Disable tools/legend buttons when the workflow has no nodes and is displaying the start screen.

awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Visualizer.test.jsx

@@ -192,6 +192,30 @@ describe('Visualizer', () => {
     ).toHaveBeenCalledWith(8, 9);
   });
 
+  test('Start Screen shown when no nodes are present', async () => {
+    WorkflowJobTemplatesAPI.readNodes.mockResolvedValue({
+      data: {
+        count: 0,
+        results: [],
+      },
+    });
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <svg>
+          <Visualizer template={template} />
+        </svg>
+      );
+    });
+    wrapper.update();
+    expect(wrapper.find('VisualizerStartScreen')).toHaveLength(1);
+    expect(
+      wrapper.find('ActionButton#visualizer-toggle-tools').props().isDisabled
+    ).toBe(true);
+    expect(
+      wrapper.find('ActionButton#visualizer-toggle-legend').props().isDisabled
+    ).toBe(true);
+  });
+
   test('Error shown to user when error thrown fetching workflow nodes', async () => {
     WorkflowJobTemplatesAPI.readNodes.mockRejectedValue(new Error());
     await act(async () => {

awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerToolbar.jsx

@@ -39,6 +39,7 @@ const ActionButton = styled(Button)`
     color: white;
   }
 `;
+ActionButton.displayName = 'ActionButton';
 
 function VisualizerToolbar({ i18n, onClose, onSave, template }) {
   const dispatch = useContext(WorkflowDispatchContext);
@@ -62,7 +63,8 @@ function VisualizerToolbar({ i18n, onClose, onSave, template }) {
           <Tooltip content={i18n._(t`Toggle Legend`)} position="bottom">
             <ActionButton
               id="visualizer-toggle-legend"
-              isActive={showLegend}
+              isActive={totalNodes > 0 && showLegend}
+              isDisabled={totalNodes === 0}
               onClick={() => dispatch({ type: 'TOGGLE_LEGEND' })}
               variant="plain"
             >
@@ -72,7 +74,8 @@ function VisualizerToolbar({ i18n, onClose, onSave, template }) {
           <Tooltip content={i18n._(t`Toggle Tools`)} position="bottom">
             <ActionButton
               id="visualizer-toggle-tools"
-              isActive={showTools}
+              isActive={totalNodes > 0 && showTools}
+              isDisabled={totalNodes === 0}
               onClick={() => dispatch({ type: 'TOGGLE_TOOLS' })}
               variant="plain"
             >