feat(CanvasForm): Make title sticky

Currently, the entire `CanvasForm` scrolls, forcing the title and the close icon to be lost. This commit makes the `Title` sticky, so it can always be visible while the `CanvasForm` can be scrolled. fix: #682
KaotoIO · Jan 26, 2024 · dc7c7a0 · dc7c7a0
1 parent 5a2e90a
commit dc7c7a0
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 91 deletions.
diff --git a/packages/ui/src/components/Visualization/Canvas/CanvasForm.scss b/packages/ui/src/components/Visualization/Canvas/CanvasForm.scss
@@ -10,3 +10,7 @@ form[data-testid='autoform'] > div {
   display: inherit;
   gap: inherit;
 }
+
+.canvas-form {
+  overflow: scroll;
+}
diff --git a/packages/ui/src/components/Visualization/Canvas/CanvasForm.tsx b/packages/ui/src/components/Visualization/Canvas/CanvasForm.tsx
@@ -85,27 +85,29 @@ export const CanvasForm: FunctionComponent<CanvasFormProps> = (props) => {
   return (
     <ErrorBoundary key={props.selectedNode.id} fallback={<p>This node cannot be configured yet</p>}>
       <Title headingLevel="h1">{componentName}</Title>
-      {isUnknownComponent ? (
-        <CodeBlock>
-          <CodeBlockCode>{stringify(model)}</CodeBlockCode>
-        </CodeBlock>
-      ) : (
-        <AutoField.componentDetectorContext.Provider value={CustomAutoFieldDetector}>
-          {isExpressionAwareStep && <StepExpressionEditor selectedNode={props.selectedNode} />}
-          {isDataFormatAwareStep && <DataFormatEditor selectedNode={props.selectedNode} />}
-          {isLoadBalanceAwareStep && <LoadBalancerEditor selectedNode={props.selectedNode} />}
-          <AutoForm
-            ref={formRef}
-            schema={schema}
-            model={model}
-            onChange={handleOnChangeIndividualProp}
-            data-testid="autoform"
-          >
-            <AutoFields omitFields={omitFields} />
-            <ErrorsField />
-          </AutoForm>
-        </AutoField.componentDetectorContext.Provider>
-      )}
+      <div className="canvas-form">
+        {isUnknownComponent ? (
+          <CodeBlock>
+            <CodeBlockCode>{stringify(model)}</CodeBlockCode>
+          </CodeBlock>
+        ) : (
+          <AutoField.componentDetectorContext.Provider value={CustomAutoFieldDetector}>
+            {isExpressionAwareStep && <StepExpressionEditor selectedNode={props.selectedNode} />}
+            {isDataFormatAwareStep && <DataFormatEditor selectedNode={props.selectedNode} />}
+            {isLoadBalanceAwareStep && <LoadBalancerEditor selectedNode={props.selectedNode} />}
+            <AutoForm
+              ref={formRef}
+              schema={schema}
+              model={model}
+              onChange={handleOnChangeIndividualProp}
+              data-testid="autoform"
+            >
+              <AutoFields omitFields={omitFields} />
+              <ErrorsField />
+            </AutoForm>
+          </AutoField.componentDetectorContext.Provider>
+        )}
+      </div>
     </ErrorBoundary>
   );
 };
diff --git a/packages/ui/src/components/Visualization/Canvas/CanvasSideBar.scss b/packages/ui/src/components/Visualization/Canvas/CanvasSideBar.scss
@@ -1,3 +1,14 @@
-img[class^='sidebar-icon-'] {
-  max-height: 40px;
+.canvas-sidebar {
+  overflow: scroll;
+  max-height: 100%;
+
+  img[class^='sidebar-icon-'] {
+    max-height: 40px;
+  }
+
+  &__body {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+  }
 }
diff --git a/packages/ui/src/components/Visualization/Canvas/CanvasSideBar.tsx b/packages/ui/src/components/Visualization/Canvas/CanvasSideBar.tsx
@@ -19,7 +19,7 @@ export const CanvasSideBar: FunctionComponent<CanvasSideBarProps> = (props) => {
      * and doesn't take into account the sidebar children.
      */
     <TopologySideBar show={props.selectedNode !== undefined}>
-      <Card>
+      <Card className="canvas-sidebar">
         <CardHeader>
           <Grid hasGutter>
             <GridItem span={2}>
@@ -37,7 +37,7 @@ export const CanvasSideBar: FunctionComponent<CanvasSideBarProps> = (props) => {
             </GridItem>
           </Grid>
         </CardHeader>
-        <CardBody>
+        <CardBody className="canvas-sidebar canvas-sidebar__body">
           {props.selectedNode === undefined ? null : (
             <ErrorBoundary key={props.selectedNode.id} fallback={<p>Something didn't work as expected</p>}>
               <CanvasForm selectedNode={props.selectedNode} />

diff --git a/packages/ui/src/components/Visualization/Canvas/__snapshots__/CanvasForm.test.tsx.snap b/packages/ui/src/components/Visualization/Canvas/__snapshots__/CanvasForm.test.tsx.snap
@@ -10,71 +10,75 @@ exports[`CanvasForm should render 1`] = `
   >
     My Node
   </h1>
-  <form
-    class="pf-v5-c-form"
-    data-testid="autoform"
-    novalidate=""
+  <div
+    class="canvas-form"
   >
-    <div>
-      <div
-        class="pf-v5-c-form__group"
-        data-fieldname="name"
-        data-testid="wrapper-field"
-      >
+    <form
+      class="pf-v5-c-form"
+      data-testid="autoform"
+      novalidate=""
+    >
+      <div>
         <div
-          class="pf-v5-c-form__group-label"
+          class="pf-v5-c-form__group"
+          data-fieldname="name"
+          data-testid="wrapper-field"
         >
-          <label
-            class="pf-v5-c-form__label"
-            for="uniforms-0000-0005"
+          <div
+            class="pf-v5-c-form__group-label"
           >
-            <span
-              class="pf-v5-c-form__label-text"
+            <label
+              class="pf-v5-c-form__label"
+              for="uniforms-0000-0005"
             >
-              Name
-            </span>
-          </label>
-           
-        </div>
-        <div
-          class="pf-v5-c-form__group-control"
-        >
-          <span
-            class="pf-v5-c-form-control"
-          >
-            <input
-              aria-invalid="false"
-              aria-label="uniforms text field"
-              data-ouia-component-id="OUIA-Generated-TextInputBase-2"
-              data-ouia-component-type="PF5/TextInput"
-              data-ouia-safe="true"
-              data-testid="text-field"
-              id="uniforms-0000-0005"
-              label="Name"
-              name="name"
-              type="text"
-              value="my node"
-            />
-          </span>
+              <span
+                class="pf-v5-c-form__label-text"
+              >
+                Name
+              </span>
+            </label>
+             
+          </div>
           <div
-            class="pf-v5-c-form__helper-text"
+            class="pf-v5-c-form__group-control"
           >
+            <span
+              class="pf-v5-c-form-control"
+            >
+              <input
+                aria-invalid="false"
+                aria-label="uniforms text field"
+                data-ouia-component-id="OUIA-Generated-TextInputBase-2"
+                data-ouia-component-type="PF5/TextInput"
+                data-ouia-safe="true"
+                data-testid="text-field"
+                id="uniforms-0000-0005"
+                label="Name"
+                name="name"
+                type="text"
+                value="my node"
+              />
+            </span>
             <div
-              class="pf-v5-c-helper-text"
+              class="pf-v5-c-form__helper-text"
             >
               <div
-                class="pf-v5-c-helper-text__item"
+                class="pf-v5-c-helper-text"
               >
-                <span
-                  class="pf-v5-c-helper-text__item-text"
-                />
+                <div
+                  class="pf-v5-c-helper-text__item"
+                >
+                  <span
+                    class="pf-v5-c-helper-text__item-text"
+                  />
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-  </form>
+    </form>
+  </div>
 </div>
 `;
 
@@ -89,21 +93,25 @@ exports[`CanvasForm should render nothing if no schema and no definition is avai
     My Node
   </h1>
   <div
-    class="pf-v5-c-code-block"
+    class="canvas-form"
   >
     <div
-      class="pf-v5-c-code-block__content"
+      class="pf-v5-c-code-block"
     >
-      <pre
-        class="pf-v5-c-code-block__pre"
+      <div
+        class="pf-v5-c-code-block__content"
       >
-        <code
-          class="pf-v5-c-code-block__code"
+        <pre
+          class="pf-v5-c-code-block__pre"
         >
-          null
+          <code
+            class="pf-v5-c-code-block__code"
+          >
+            null
 
-        </code>
-      </pre>
+          </code>
+        </pre>
+      </div>
     </div>
   </div>
 </div>
@@ -118,18 +126,22 @@ exports[`CanvasForm should render nothing if no schema is available 1`] = `
     data-ouia-safe="true"
   />
   <div
-    class="pf-v5-c-code-block"
+    class="canvas-form"
   >
     <div
-      class="pf-v5-c-code-block__content"
+      class="pf-v5-c-code-block"
     >
-      <pre
-        class="pf-v5-c-code-block__pre"
+      <div
+        class="pf-v5-c-code-block__content"
       >
-        <code
-          class="pf-v5-c-code-block__code"
-        />
-      </pre>
+        <pre
+          class="pf-v5-c-code-block__pre"
+        >
+          <code
+            class="pf-v5-c-code-block__code"
+          />
+        </pre>
+      </div>
     </div>
   </div>
 </div>