From 2770525ba7a11c6e15588a60856368ace36f96eb Mon Sep 17 00:00:00 2001
From: Jenny <32821331+jenny-s51@users.noreply.github.com>
Date: Tue, 6 Aug 2024 13:17:13 -0400
Subject: [PATCH] revert toolbar refactor

---
 .../topologyPackageDemo/OptionsContextBar.tsx | 126 ++++++++++--------
 .../topologyPackageDemo/OptionsViewBar.tsx    | 120 +++++++++--------
 2 files changed, 136 insertions(+), 110 deletions(-)

diff --git a/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsContextBar.tsx b/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsContextBar.tsx
index d7fb7c73..272a7f18 100644
--- a/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsContextBar.tsx
+++ b/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsContextBar.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import {
   Button,
+  Flex,
+  FlexItem,
   MenuToggle,
   MenuToggleElement,
   Select,
@@ -225,65 +227,79 @@ const OptionsContextBar: React.FC = observer(() => {
   };
 
   return (
-    <>
-      <ToolbarItem variant="label">Nodes:</ToolbarItem>
+    <Flex>
       <ToolbarItem>
-        <TextInput
-          aria-label="nodes"
-          type="number"
-          value={numNodes || ''}
-          onChange={(_event, val: string) =>
-            val ? updateValue(parseInt(val), 0, 9999, setNumNodes) : setNumNodes(null)
-          }
-        />
-      </ToolbarItem>
-      <ToolbarItem variant="label">Edges:</ToolbarItem>
-      <ToolbarItem>
-        <TextInput
-          aria-label="edges"
-          type="number"
-          value={numEdges === null ? '' : numEdges}
-          onChange={(_event, val: string) =>
-            val ? updateValue(parseInt(val), 0, 200, setNumEdges) : setNumEdges(null)
-          }
-        />
-      </ToolbarItem>
-      <ToolbarItem variant="label">Groups:</ToolbarItem>
-      <ToolbarItem>
-        <TextInput
-          aria-label="groups"
-          type="number"
-          value={numGroups === null ? '' : numGroups}
-          onChange={(_event, val: string) =>
-            val ? updateValue(parseInt(val), 0, 100, setNumGroups) : setNumGroups(null)
-          }
-        />
-      </ToolbarItem>
-      <ToolbarItem variant="label">Nesting Depth:</ToolbarItem>
-      <ToolbarItem>
-        <TextInput
-          aria-label="nesting depth"
-          type="number"
-          value={nestedLevel === null ? '' : nestedLevel}
-          onChange={(_event, val: string) =>
-            val ? updateValue(parseInt(val), 0, 5, setNestedLevel) : setNestedLevel(null)
-          }
-        />
-        <ToolbarItem>
-          <Button
-            variant="link"
-            isDisabled={numNodes === undefined || numNodes < 1 || numEdges === undefined || numGroups === undefined}
-            onClick={() => options.setCreationCounts({ numNodes, numEdges, numGroups, nestedLevel })}
-          >
-            Apply
-          </Button>
-        </ToolbarItem>
+        <Flex flexWrap={{ default: 'wrap' }} gap={{ default: 'gapMd' }}>
+          <FlexItem>
+            <Flex flexWrap={{ default: 'nowrap' }} gap={{ default: 'gapXs' }}>
+              <span>Nodes:</span>
+              <TextInput
+                aria-label="nodes"
+                type="number"
+                value={numNodes || ''}
+                onChange={(_event, val: string) =>
+                  val ? updateValue(parseInt(val), 0, 9999, setNumNodes) : setNumNodes(null)
+                }
+              />
+            </Flex>
+          </FlexItem>
+          <FlexItem>
+            <Flex flexWrap={{ default: 'nowrap' }} gap={{ default: 'gapXs' }}>
+              <span>Edges:</span>
+              <TextInput
+                aria-label="edges"
+                type="number"
+                value={numEdges === null ? '' : numEdges}
+                onChange={(_event, val: string) =>
+                  val ? updateValue(parseInt(val), 0, 200, setNumEdges) : setNumEdges(null)
+                }
+              />
+            </Flex>
+          </FlexItem>
+          <FlexItem>
+            <Flex flexWrap={{ default: 'nowrap' }} gap={{ default: 'gapXs' }}>
+              <span>Groups:</span>
+              <TextInput
+                aria-label="groups"
+                type="number"
+                value={numGroups === null ? '' : numGroups}
+                onChange={(_event, val: string) =>
+                  val ? updateValue(parseInt(val), 0, 100, setNumGroups) : setNumGroups(null)
+                }
+              />
+            </Flex>
+          </FlexItem>
+          <FlexItem>
+            <Flex flexWrap={{ default: 'nowrap' }} gap={{ default: 'gapXs' }}>
+              <span>Nesting Depth:</span>
+              <TextInput
+                aria-label="nesting depth"
+                type="number"
+                value={nestedLevel === null ? '' : nestedLevel}
+                onChange={(_event, val: string) =>
+                  val ? updateValue(parseInt(val), 0, 5, setNestedLevel) : setNestedLevel(null)
+                }
+              />
+            </Flex>
+          </FlexItem>
+          <FlexItem>
+            <Button
+              variant="link"
+              isDisabled={numNodes === undefined || numNodes < 1 || numEdges === undefined || numGroups === undefined}
+              onClick={() => options.setCreationCounts({ numNodes, numEdges, numGroups, nestedLevel })}
+            >
+              Apply
+            </Button>
+          </FlexItem>
+        </Flex>
       </ToolbarItem>
       <ToolbarItem>
-        {renderNodeOptionsDropdown()}
-        {renderEdgeOptionsDropdown()}
+        <Flex gap={{ default: 'gapMd' }}>
+          {renderNodeOptionsDropdown()}
+          {renderEdgeOptionsDropdown()}
+        </Flex>
       </ToolbarItem>
-    </>
+    </Flex>
   );
 });
 
diff --git a/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsViewBar.tsx b/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsViewBar.tsx
index 72884ab0..90d7b6da 100644
--- a/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsViewBar.tsx
+++ b/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsViewBar.tsx
@@ -4,6 +4,8 @@ import {
   Dropdown,
   DropdownItem,
   DropdownList,
+  Flex,
+  FlexItem,
   MenuToggle,
   MenuToggleElement,
   TextInput,
@@ -26,9 +28,11 @@ const OptionsContextBar: React.FC<{ controller: Controller }> = observer(({ cont
   };
 
   const layoutDropdown = (
-    <>
-      <ToolbarItem variant="label">Layout:</ToolbarItem>
-      <ToolbarItem>
+    <Flex flexWrap={{ default: 'nowrap' }} gap={{ default: 'gapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
+      <FlexItem>
+        <label className="pf-v6-u-display-inline-block pf-v6-u-mr-md pf-v6-u-mt-sm">Layout:</label>
+      </FlexItem>
+      <FlexItem>
         <Dropdown
           toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
             <MenuToggle ref={toggleRef} onClick={() => setLayoutDropdownOpen(!layoutDropdownOpen)}>
@@ -65,8 +69,8 @@ const OptionsContextBar: React.FC<{ controller: Controller }> = observer(({ cont
             </DropdownItem>
           </DropdownList>
         </Dropdown>
-      </ToolbarItem>
-    </>
+      </FlexItem>
+    </Flex>
   );
 
   const saveModel = () => {
@@ -130,60 +134,66 @@ const OptionsContextBar: React.FC<{ controller: Controller }> = observer(({ cont
   };
 
   return (
-    <>
-      <ToolbarItem>{layoutDropdown}</ToolbarItem>
-      <ToolbarItem>
-        <Tooltip content="Layout info saved" trigger="manual" isVisible={modelSaved}>
-          <Button variant="secondary" onClick={saveModel}>
-            Save Layout Info
+    <Flex flexWrap={{ default: 'wrap' }} gap={{ default: 'gapMd' }} alignItems={{ default: 'alignItemsCenter' }}>
+      <Flex>
+        <ToolbarItem>{layoutDropdown}</ToolbarItem>
+        <ToolbarItem>
+          <Tooltip content="Layout info saved" trigger="manual" isVisible={modelSaved}>
+            <Button variant="secondary" onClick={saveModel}>
+              Save Layout Info
+            </Button>
+          </Tooltip>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary" onClick={restoreLayout}>
+            Restore Layout Info
           </Button>
-        </Tooltip>
-      </ToolbarItem>
-      <ToolbarItem>
-        <Button variant="secondary" onClick={restoreLayout}>
-          Restore Layout Info
-        </Button>
-      </ToolbarItem>
-      <ToolbarItem>
-        <Button variant="secondary" onClick={addNode}>
-          Add Node
-        </Button>
-      </ToolbarItem>
-      <ToolbarItem variant="label"> Medium Scale:</ToolbarItem>
-      <ToolbarItem>
-        <TextInput
-          aria-labelledby="med-scale"
-          max={1.0}
-          min={options.lowScale}
-          step={0.01}
-          value={options.medScale}
-          type="number"
-          onChange={(_event, val) => {
-            const newValue = parseFloat(val);
-            if (!Number.isNaN(newValue) && newValue > options.lowScale && newValue >= 0.01 && newValue <= 1.0) {
-              options.setMedScale(parseFloat(val));
-            }
-          }}
-        />
-        <ToolbarItem variant="label">Low Scale:</ToolbarItem>
+        </ToolbarItem>
         <ToolbarItem>
-          <TextInput
-            aria-labelledby="low-scale"
-            max={options.medScale}
-            min={0.01}
-            step={0.01}
-            value={options.lowScale}
-            type="number"
-            onChange={(_event, val) => {
-              const newValue = parseFloat(val);
-              if (!Number.isNaN(newValue) && newValue < options.medScale && newValue >= 0.01 && newValue <= 1.0) {
-                options.setLowScale(parseFloat(val));
-              }
-            }}
-          />
+          <Button variant="secondary" onClick={addNode}>
+            Add Node
+          </Button>
         </ToolbarItem>
+      </Flex>
+      <ToolbarItem>
+        <Flex flexWrap={{ default: 'nowrap' }} gap={{ default: 'gapMd' }}>
+          <Flex flexWrap={{ default: 'nowrap' }} gap={{ default: 'gapXs' }}>
+            <span id="med-scale">Medium Scale:</span>
+            <TextInput
+              aria-labelledby="med-scale"
+              max={1.0}
+              min={options.lowScale}
+              step={0.01}
+              value={options.medScale}
+              type="number"
+              onChange={(_event, val) => {
+                const newValue = parseFloat(val);
+                if (!Number.isNaN(newValue) && newValue > options.lowScale && newValue >= 0.01 && newValue <= 1.0) {
+                  options.setMedScale(parseFloat(val));
+                }
+              }}
+            />
+          </Flex>
+          <Flex flexWrap={{ default: 'nowrap' }} gap={{ default: 'gapXs' }}>
+            <span id="low-scale">Low Scale:</span>
+            <TextInput
+              aria-labelledby="low-scale"
+              max={options.medScale}
+              min={0.01}
+              step={0.01}
+              value={options.lowScale}
+              type="number"
+              onChange={(_event, val) => {
+                const newValue = parseFloat(val);
+                if (!Number.isNaN(newValue) && newValue < options.medScale && newValue >= 0.01 && newValue <= 1.0) {
+                  options.setLowScale(parseFloat(val));
+                }
+              }}
+            />
+          </Flex>
+        </Flex>
       </ToolbarItem>
-    </>
+    </Flex>
   );
 });