diff --git a/awx/ui_next/src/components/Workflow/WorkflowKey.jsx b/awx/ui_next/src/components/Workflow/WorkflowLegend.jsx
similarity index 92%
rename from awx/ui_next/src/components/Workflow/WorkflowKey.jsx
rename to awx/ui_next/src/components/Workflow/WorkflowLegend.jsx
index 6c5cdd5be1..870d35c067 100644
--- a/awx/ui_next/src/components/Workflow/WorkflowKey.jsx
+++ b/awx/ui_next/src/components/Workflow/WorkflowLegend.jsx
@@ -23,7 +23,7 @@ const Header = styled.div`
   position: relative;
 `;
 
-const Key = styled.ul`
+const Legend = styled.ul`
   padding: 5px 10px;
 
   li {
@@ -77,14 +77,14 @@ const Close = styled(TimesIcon)`
   top: 15px;
 `;
 
-function WorkflowKey({ i18n, onClose }) {
+function WorkflowLegend({ i18n, onClose }) {
   return (
     <Wrapper>
       <Header>
-        <b>{i18n._(t`Key`)}</b>
+        <b>{i18n._(t`Legend`)}</b>
         <Close onClick={onClose} />
       </Header>
-      <Key>
+      <Legend>
         <li>
           <NodeTypeLetter>JT</NodeTypeLetter>
           <span>{i18n._(t`Job Template`)}</span>
@@ -123,13 +123,13 @@ function WorkflowKey({ i18n, onClose }) {
           <AlwaysLink />
           <span>{i18n._(t`Always`)}</span>
         </li>
-      </Key>
+      </Legend>
     </Wrapper>
   );
 }
 
-WorkflowKey.propTypes = {
+WorkflowLegend.propTypes = {
   onClose: func.isRequired,
 };
 
-export default withI18n()(WorkflowKey);
+export default withI18n()(WorkflowLegend);
diff --git a/awx/ui_next/src/components/Workflow/WorkflowKey.test.jsx b/awx/ui_next/src/components/Workflow/WorkflowLegend.test.jsx
similarity index 53%
rename from awx/ui_next/src/components/Workflow/WorkflowKey.test.jsx
rename to awx/ui_next/src/components/Workflow/WorkflowLegend.test.jsx
index 05d8762acd..19b27bd1c6 100644
--- a/awx/ui_next/src/components/Workflow/WorkflowKey.test.jsx
+++ b/awx/ui_next/src/components/Workflow/WorkflowLegend.test.jsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { mountWithContexts } from '@testUtils/enzymeHelpers';
-import WorkflowKey from './WorkflowKey';
+import WorkflowLegend from './WorkflowLegend';
 
-describe('WorkflowKey', () => {
+describe('WorkflowLegend', () => {
   test('renders the expected content', () => {
-    const wrapper = mountWithContexts(<WorkflowKey onClose={() => {}} />);
+    const wrapper = mountWithContexts(<WorkflowLegend onClose={() => {}} />);
     expect(wrapper).toHaveLength(1);
   });
 });
diff --git a/awx/ui_next/src/components/Workflow/index.js b/awx/ui_next/src/components/Workflow/index.js
index 3dd45adb26..d3c5d519da 100644
--- a/awx/ui_next/src/components/Workflow/index.js
+++ b/awx/ui_next/src/components/Workflow/index.js
@@ -3,7 +3,7 @@ export {
   default as WorkflowActionTooltipItem,
 } from './WorkflowActionTooltipItem';
 export { default as WorkflowHelp } from './WorkflowHelp';
-export { default as WorkflowKey } from './WorkflowKey';
+export { default as WorkflowLegend } from './WorkflowLegend';
 export { default as WorkflowLinkHelp } from './WorkflowLinkHelp';
 export { default as WorkflowNodeHelp } from './WorkflowNodeHelp';
 export { default as WorkflowNodeTypeLetter } from './WorkflowNodeTypeLetter';
diff --git a/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutput.jsx b/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutput.jsx
index 10d438876d..0e41845ac7 100644
--- a/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutput.jsx
+++ b/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutput.jsx
@@ -41,7 +41,7 @@ function WorkflowOutput({ job, i18n }) {
   const [graphNodes, setGraphNodes] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
   const [nodePositions, setNodePositions] = useState(null);
-  const [showKey, setShowKey] = useState(false);
+  const [showLegend, setShowLegend] = useState(false);
   const [showTools, setShowTools] = useState(false);
 
   useEffect(() => {
@@ -200,9 +200,9 @@ function WorkflowOutput({ job, i18n }) {
       <Wrapper>
         <WorkflowOutputToolbar
           job={job}
-          keyShown={showKey}
+          legendShown={showLegend}
           nodes={graphNodes}
-          onKeyToggle={() => setShowKey(!showKey)}
+          onLegendToggle={() => setShowLegend(!showLegend)}
           onToolsToggle={() => setShowTools(!showTools)}
           toolsShown={showTools}
         />
@@ -211,9 +211,9 @@ function WorkflowOutput({ job, i18n }) {
             links={graphLinks}
             nodePositions={nodePositions}
             nodes={graphNodes}
-            onUpdateShowKey={setShowKey}
+            onUpdateShowLegend={setShowLegend}
             onUpdateShowTools={setShowTools}
-            showKey={showKey}
+            showLegend={showLegend}
             showTools={showTools}
           />
         )}
diff --git a/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputGraph.jsx b/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputGraph.jsx
index 571a3b7e06..32244b1197 100644
--- a/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputGraph.jsx
+++ b/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputGraph.jsx
@@ -11,7 +11,7 @@ import {
 } from '@screens/Job/WorkflowOutput';
 import {
   WorkflowHelp,
-  WorkflowKey,
+  WorkflowLegend,
   WorkflowLinkHelp,
   WorkflowNodeHelp,
   WorkflowStartNode,
@@ -22,9 +22,9 @@ function WorkflowOutputGraph({
   links,
   nodePositions,
   nodes,
-  onUpdateShowKey,
+  onUpdateShowLegend,
   onUpdateShowTools,
-  showKey,
+  showLegend,
   showTools,
 }) {
   const [linkHelp, setLinkHelp] = useState();
@@ -213,7 +213,7 @@ function WorkflowOutputGraph({
             zoomPercentage={zoomPercentage}
           />
         )}
-        {showKey && <WorkflowKey onClose={() => onUpdateShowKey(false)} />}
+        {showLegend && <WorkflowLegend onClose={() => onUpdateShowLegend(false)} />}
       </div>
     </Fragment>
   );
@@ -223,9 +223,9 @@ WorkflowOutputGraph.propTypes = {
   links: arrayOf(shape()).isRequired,
   nodePositions: shape().isRequired,
   nodes: arrayOf(shape()).isRequired,
-  onUpdateShowKey: func.isRequired,
+  onUpdateShowLegend: func.isRequired,
   onUpdateShowTools: func.isRequired,
-  showKey: bool.isRequired,
+  showLegend: bool.isRequired,
   showTools: bool.isRequired,
 };
 
diff --git a/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputToolbar.jsx b/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputToolbar.jsx
index d3a93d2578..975467adde 100644
--- a/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputToolbar.jsx
+++ b/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputToolbar.jsx
@@ -56,9 +56,9 @@ const StatusIconWithMargin = styled(StatusIcon)`
 function WorkflowOutputToolbar({
   i18n,
   job,
-  keyShown,
+  legendShown,
   nodes,
-  onKeyToggle,
+  onLegendToggle,
   onToolsToggle,
   toolsShown,
 }) {
@@ -74,10 +74,10 @@ function WorkflowOutputToolbar({
         <div>{i18n._(t`Total Nodes`)}</div>
         <Badge isRead>{totalNodes}</Badge>
         <VerticalSeparator />
-        <Tooltip content={i18n._(t`Toggle Key`)} position="bottom">
+        <Tooltip content={i18n._(t`Toggle Legend`)} position="bottom">
           <ActionButton
-            isActive={keyShown}
-            onClick={onKeyToggle}
+            isActive={legendShown}
+            onClick={onLegendToggle}
             variant="plain"
           >
             <CompassIcon />
@@ -99,9 +99,9 @@ function WorkflowOutputToolbar({
 
 WorkflowOutputToolbar.propTypes = {
   job: shape().isRequired,
-  keyShown: bool.isRequired,
+  legendShown: bool.isRequired,
   nodes: arrayOf(shape()),
-  onKeyToggle: func.isRequired,
+  onLegendToggle: func.isRequired,
   onToolsToggle: func.isRequired,
   toolsShown: bool.isRequired,
 };
diff --git a/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputToolbar.test.jsx b/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputToolbar.test.jsx
index 02c2fecba8..980f47ca23 100644
--- a/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputToolbar.test.jsx
+++ b/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputToolbar.test.jsx
@@ -12,9 +12,9 @@ describe('WorkflowOutputToolbar', () => {
     const wrapper = mountWithContexts(
       <WorkflowOutputToolbar
         job={job}
-        keyShown={false}
+        legendShown={false}
         nodes={[]}
-        onKeyToggle={() => {}}
+        onLegendToggle={() => {}}
         onToolsToggle={() => {}}
         toolsShown={false}
       />
@@ -38,9 +38,9 @@ describe('WorkflowOutputToolbar', () => {
     const wrapper = mountWithContexts(
       <WorkflowOutputToolbar
         job={job}
-        keyShown={false}
+        legendShown={false}
         nodes={nodes}
-        onKeyToggle={() => {}}
+        onLegendToggle={() => {}}
         onToolsToggle={() => {}}
         toolsShown={false}
       />
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Visualizer.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Visualizer.jsx
index 98a578fc5a..2523882194 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Visualizer.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Visualizer.jsx
@@ -77,7 +77,7 @@ function Visualizer({ history, template, i18n }) {
   const [nodeToView, setNodeToView] = useState(null);
   const [nodes, setNodes] = useState([]);
   const [showDeleteAllNodesModal, setShowDeleteAllNodesModal] = useState(false);
-  const [showKey, setShowKey] = useState(false);
+  const [showLegend, setShowLegend] = useState(false);
   const [showTools, setShowTools] = useState(false);
   const [showUnsavedChangesModal, setShowUnsavedChangesModal] = useState(false);
   const [unsavedChanges, setUnsavedChanges] = useState(false);
@@ -800,11 +800,11 @@ function Visualizer({ history, template, i18n }) {
     <Fragment>
       <Wrapper>
         <VisualizerToolbar
-          keyShown={showKey}
+          legendShown={showLegend}
           nodes={nodes}
           onClose={handleVisualizerClose}
           onDeleteAllClick={() => setShowDeleteAllNodesModal(true)}
-          onKeyToggle={() => setShowKey(!showKey)}
+          onLegendToggle={() => setShowLegend(!showLegend)}
           onSave={handleVisualizerSave}
           onToolsToggle={() => setShowTools(!showTools)}
           template={template}
@@ -825,11 +825,11 @@ function Visualizer({ history, template, i18n }) {
             onEditNodeClick={startEditNode}
             onLinkEditClick={setLinkToEdit}
             onStartAddLinkClick={selectSourceNodeForLinking}
-            onUpdateShowKey={setShowKey}
+            onUpdateShowLegend={setShowLegend}
             onUpdateShowTools={setShowTools}
             onViewNodeClick={setNodeToView}
             readOnly={!template.summary_fields.user_capabilities.edit}
-            showKey={showKey}
+            showLegend={showLegend}
             showTools={showTools}
           />
         ) : (
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerGraph.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerGraph.jsx
index abceda1a2d..7fbd0880fe 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerGraph.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerGraph.jsx
@@ -11,7 +11,7 @@ import {
 } from '@components/Workflow/WorkflowUtils';
 import {
   WorkflowHelp,
-  WorkflowKey,
+  WorkflowLegend,
   WorkflowLinkHelp,
   WorkflowNodeHelp,
   WorkflowStartNode,
@@ -47,11 +47,11 @@ function VisualizerGraph({
   onEditNodeClick,
   onLinkEditClick,
   onStartAddLinkClick,
-  onUpdateShowKey,
+  onUpdateShowLegend,
   onUpdateShowTools,
   onViewNodeClick,
   readOnly,
-  showKey,
+  showLegend,
   showTools,
 }) {
   const [helpText, setHelpText] = useState(null);
@@ -354,7 +354,7 @@ function VisualizerGraph({
             zoomPercentage={zoomPercentage}
           />
         )}
-        {showKey && <WorkflowKey onClose={() => onUpdateShowKey(false)} />}
+        {showLegend && <WorkflowLegend onClose={() => onUpdateShowLegend(false)} />}
       </div>
     </>
   );
@@ -374,11 +374,11 @@ VisualizerGraph.propTypes = {
   onEditNodeClick: func.isRequired,
   onLinkEditClick: func.isRequired,
   onStartAddLinkClick: func.isRequired,
-  onUpdateShowKey: func.isRequired,
+  onUpdateShowLegend: func.isRequired,
   onUpdateShowTools: func.isRequired,
   onViewNodeClick: func.isRequired,
   readOnly: bool.isRequired,
-  showKey: bool.isRequired,
+  showLegend: bool.isRequired,
   showTools: bool.isRequired,
 };
 
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerToolbar.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerToolbar.jsx
index 68d86664f8..c60e756064 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerToolbar.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerToolbar.jsx
@@ -38,11 +38,11 @@ const ActionButton = styled(Button)`
 
 function VisualizerToolbar({
   i18n,
-  keyShown,
+  legendShown,
   nodes,
   onClose,
   onDeleteAllClick,
-  onKeyToggle,
+  onLegendToggle,
   onSave,
   onToolsToggle,
   template,
@@ -62,10 +62,10 @@ function VisualizerToolbar({
           <div>{i18n._(t`Total Nodes`)}</div>
           <Badge isRead>{totalNodes}</Badge>
           <VerticalSeparator />
-          <Tooltip content={i18n._(t`Toggle Key`)} position="bottom">
+          <Tooltip content={i18n._(t`Toggle Legend`)} position="bottom">
             <ActionButton
-              isActive={keyShown}
-              onClick={onKeyToggle}
+              isActive={legendShown}
+              onClick={onLegendToggle}
               variant="plain"
             >
               <CompassIcon />
@@ -115,11 +115,11 @@ function VisualizerToolbar({
 }
 
 VisualizerToolbar.propTypes = {
-  keyShown: bool.isRequired,
+  legendShown: bool.isRequired,
   nodes: arrayOf(shape()),
   onClose: func.isRequired,
   onDeleteAllClick: func.isRequired,
-  onKeyToggle: func.isRequired,
+  onLegendToggle: func.isRequired,
   onSave: func.isRequired,
   onToolsToggle: func.isRequired,
   template: shape().isRequired,