fix(Catalog): Using labels causes unintended navigation

Context: Currently, we're using the `numLabels` property of the `LabelGroup` component to show just a few `Labels`. When the user clicks on the `n more` label, a navigation is performed and the UI is reloaded, causing the VSCode extension to fail. This happens because `LabelGroup` is a child of the `Form` component, causing to execute the default Form behavior when selecting a `Label` Changes: The fix is to move the Label bar outside of the `Form` component. fix: #1073 fix: #1074
KaotoIO · May 13, 2024 · 649987a · 649987a
1 parent ddc4142
commit 649987a
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 60 deletions.
diff --git a/packages/ui/src/components/Catalog/BaseCatalog.scss b/packages/ui/src/components/Catalog/BaseCatalog.scss
@@ -1,3 +1,4 @@
 .catalog-list {
   overflow: auto;
+  padding: var(--pf-v5-global--spacer--sm);
 }
diff --git a/packages/ui/src/components/Catalog/Catalog.scss b/packages/ui/src/components/Catalog/Catalog.scss
@@ -5,7 +5,7 @@
   flex-direction: column;
 
   &__filter {
-    margin-bottom: var(--pf-v5-global--spacer--xl);
+    margin-bottom: var(--pf-v5-global--spacer--md);
   }
 
   &__base {

diff --git a/packages/ui/src/components/Catalog/CatalogFilter.scss b/packages/ui/src/components/Catalog/CatalogFilter.scss
@@ -0,0 +1,16 @@
+.filter-bar {
+  padding: 0 2px;
+  display: flex;
+  flex-flow: row;
+  justify-content: space-between;
+  margin-bottom: var(--pf-v5-global--spacer--sm);
+
+  &__search {
+    flex: 1;
+  }
+}
+
+.category-bar {
+  display: flex;
+  flex-flow: row;
+}
diff --git a/packages/ui/src/components/Catalog/CatalogFilter.tsx b/packages/ui/src/components/Catalog/CatalogFilter.tsx
@@ -2,19 +2,18 @@ import {
   Badge,
   Form,
   FormGroup,
-  Grid,
-  GridItem,
   Label,
   LabelGroup,
   SearchInput,
   ToggleGroup,
   ToggleGroupItem,
   capitalize,
 } from '@patternfly/react-core';
+import { TimesCircleIcon } from '@patternfly/react-icons';
 import { FunctionComponent, useEffect, useRef } from 'react';
 import { CatalogLayout } from './Catalog.models';
+import './CatalogFilter.scss';
 import { CatalogLayoutIcon } from './CatalogLayoutIcon';
-import { TimesCircleIcon } from '@patternfly/react-icons';
 
 interface CatalogFilterProps {
   className?: string;
@@ -63,67 +62,66 @@ export const CatalogFilter: FunctionComponent<CatalogFilterProps> = (props) => {
   };
 
   return (
-    <Form className={props.className}>
-      <Grid hasGutter>
-        <GridItem md={5} lg={6}>
-          <FormGroup label="Filter" fieldId="search-term">
-            <SearchInput
-              aria-label="Filter by name, description or tag"
-              placeholder="Filter by name, description or tag"
-              value={props.searchTerm}
-              onChange={props.onChange}
-              onClear={props.onChange}
-              ref={inputRef}
-            />
-          </FormGroup>
-        </GridItem>
+    <div className={props.className}>
+      <Form className="filter-bar">
+        <FormGroup className="filter-bar__search" label="Filter" fieldId="search-term">
+          <SearchInput
+            aria-label="Filter by name, description or tag"
+            placeholder="Filter by name, description or tag"
+            value={props.searchTerm}
+            onChange={props.onChange}
+            onClear={props.onChange}
+            ref={inputRef}
+          />
+        </FormGroup>
+
+        <FormGroup label="Type" fieldId="element-type">
+          <ToggleGroup aria-label="Select element type">
+            {props.groups.map((tileGroup) => (
+              <ToggleGroupItem
+                text={
+                  <>
+                    <span>{capitalize(tileGroup.name)}</span> <Badge isRead>{tileGroup.count}</Badge>
+                  </>
+                }
+                key={tileGroup.name}
+                data-testid={`${tileGroup.name}-catalog-tab`}
+                buttonId={`toggle-group-button-${tileGroup.name}`}
+                isSelected={props.activeGroups.includes(tileGroup.name)}
+                onChange={(_event, selected: boolean) => toggleActiveGroup(selected, tileGroup.name)}
+              />
+            ))}
+          </ToggleGroup>
+        </FormGroup>
+
+        <FormGroup label="Layout" fieldId="layout">
+          <ToggleGroup aria-label="Change layout">
+            {props.layouts.map((key) => (
+              <ToggleGroupItem
+                icon={<CatalogLayoutIcon key={key} layout={key} />}
+                key={key}
+                data-testid={`toggle-layout-button-${key}`}
+                buttonId={`toggle-layout-button-${key}`}
+                aria-label={`toggle-layout-button-${key}`}
+                isSelected={props.activeLayout === key}
+                onChange={() => {
+                  props.setActiveLayout(key);
+                }}
+              />
+            ))}
+          </ToggleGroup>
+        </FormGroup>
+      </Form>
 
-        <GridItem className="pf-v5-u-text-align-right" md={5}>
-          <FormGroup label="Type" fieldId="element-type">
-            <ToggleGroup aria-label="Select element type">
-              {props.groups.map((tileGroup) => (
-                <ToggleGroupItem
-                  text={
-                    <>
-                      <span>{capitalize(tileGroup.name)}</span> <Badge isRead>{tileGroup.count}</Badge>
-                    </>
-                  }
-                  key={tileGroup.name}
-                  data-testid={`${tileGroup.name}-catalog-tab`}
-                  buttonId={`toggle-group-button-${tileGroup.name}`}
-                  isSelected={props.activeGroups.includes(tileGroup.name)}
-                  onChange={(_event, selected: boolean) => toggleActiveGroup(selected, tileGroup.name)}
-                />
-              ))}
-            </ToggleGroup>
-          </FormGroup>
-        </GridItem>
-        <GridItem md={2} lg={1}>
-          <FormGroup label="Layout" fieldId="layout">
-            <ToggleGroup aria-label="Change layout">
-              {props.layouts.map((key) => (
-                <ToggleGroupItem
-                  icon={<CatalogLayoutIcon key={key} layout={key} />}
-                  key={key}
-                  data-testid={`toggle-layout-button-${key}`}
-                  buttonId={`toggle-layout-button-${key}`}
-                  aria-label={`toggle-layout-button-${key}`}
-                  isSelected={props.activeLayout === key}
-                  onChange={() => {
-                    props.setActiveLayout(key);
-                  }}
-                />
-              ))}
-            </ToggleGroup>
-          </FormGroup>
-        </GridItem>
-      </Grid>
       <LabelGroup
-        categoryName={'Filter Categories'}
+        isCompact
+        className="category-bar"
+        categoryName="Filter Categories"
         numLabels={props.filterTags.length > 0 ? props.tagsOverflowIndex + 1 : props.tagsOverflowIndex}
       >
         {props.filterTags.length > 0 && (
           <Label
+            isCompact
             key="clear"
             id="clear"
             color="grey"
@@ -136,6 +134,7 @@ export const CatalogFilter: FunctionComponent<CatalogFilterProps> = (props) => {
         )}
         {props.tags.map((tag, index) => (
           <Label
+            isCompact
             key={tag + index}
             id={tag + index}
             data-testid={`button-catalog-tag-${tag}`}
@@ -147,6 +146,6 @@ export const CatalogFilter: FunctionComponent<CatalogFilterProps> = (props) => {
           </Label>
         ))}
       </LabelGroup>
-    </Form>
+    </div>
   );
 };