fix: Provide prev/next step when querying step catalog to the backend

Fixes: #1246
KaotoIO · May 9, 2023 · 05365fe · 05365fe
1 parent e1911c1
commit 05365fe
Show file tree

Hide file tree

Showing 15 changed files with 213 additions and 189 deletions.
diff --git a/src/api/apiService.ts b/src/api/apiService.ts
@@ -65,10 +65,18 @@ export async function fetchCatalogSteps(
     // e.g. 'START', 'END', 'MIDDLE'
     type?: string;
     namespace?: string;
+    previousStep?: string;
+    followingStep?: string;
   },
   cache?: RequestCache | undefined
 ) {
   try {
+    if (!queryParams?.previousStep) {
+      delete queryParams?.previousStep;
+    }
+    if (!queryParams?.followingStep) {
+      delete queryParams?.followingStep;
+    }
     const resp = await RequestService.get({
       endpoint: `${apiVersion}/steps`,
       cache,

diff --git a/src/components/AppendStepButton.tsx b/src/components/AppendStepButton.tsx
@@ -1,13 +1,13 @@
+import { BranchBuilder } from './BranchBuilder';
+import { MiniCatalog } from './MiniCatalog';
 import { useShowBranchTab } from '@kaoto/hooks';
-import { ValidationService } from '@kaoto/services';
+import { StepsService, ValidationService } from '@kaoto/services';
 import { useIntegrationJsonStore, useSettingsStore } from '@kaoto/store';
 import { IStepProps } from '@kaoto/types';
 import { Popover, Tooltip } from '@patternfly/react-core';
 import { PlusIcon } from '@patternfly/react-icons';
 import { FunctionComponent, useEffect, useState } from 'react';
 import { Position } from 'reactflow';
-import { BranchBuilder } from './BranchBuilder';
-import { MiniCatalog } from './MiniCatalog';
 
 interface IAddStepButton {
   handleAddBranch: () => void;
@@ -31,6 +31,9 @@ export const AppendStepButton: FunctionComponent<IAddStepButton> = ({
   const [tooltipText, setTooltipText] = useState('');
   const [disableButton, setDisableButton] = useState(false);
 
+  const stepsService = new StepsService();
+  const followingStep = stepsService.getFollowingStep(step.id);
+
   useEffect(() => {
     setDisableButton(!showStepsTab && disableBranchesTab);
   }, [showStepsTab, disableBranchesTab]);
@@ -53,6 +56,8 @@ export const AppendStepButton: FunctionComponent<IAddStepButton> = ({
           queryParams={{
             dsl: currentDSL,
             type: ValidationService.appendableStepTypes(step.type),
+            previousStep: step.id,
+            followingStep: followingStep?.id,
           }}
           step={step}
         >
@@ -68,10 +73,7 @@ export const AppendStepButton: FunctionComponent<IAddStepButton> = ({
       position="right-start"
       showClose={false}
     >
-      <Tooltip
-        content={tooltipText}
-        position={position}
-      >
+      <Tooltip content={tooltipText} position={position}>
         <button
           className="stepNode__Add plusButton nodrag"
           data-testid="stepNode__appendStep-btn"

diff --git a/src/components/Catalog.test.tsx b/src/components/Catalog.test.tsx
@@ -2,9 +2,8 @@ import { AlertProvider } from '../layout';
 import { Catalog } from './Catalog';
 import { jest } from '@jest/globals';
 import { fetchCatalogSteps } from '@kaoto/api';
-import { useStepCatalogStore } from '@kaoto/store';
 import { screen } from '@testing-library/dom';
-import { render, renderHook } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 jest.mock('@kaoto/api');
@@ -104,8 +103,6 @@ describe('Catalog.tsx', () => {
 
   test('Search input works correctly', async () => {
     const user = userEvent.setup();
-    const { result } = renderHook(() => useStepCatalogStore());
-    result.current.setStepCatalog([]);
     render(
       <AlertProvider>
         <Catalog handleClose={jest.fn()} />
@@ -132,8 +129,6 @@ describe('Catalog.tsx', () => {
     method = (fetchCatalogSteps as jest.Mock<typeof fetchCatalogSteps>).mockImplementation(() =>
       Promise.reject('fail')
     );
-    const { result } = renderHook(() => useStepCatalogStore());
-    result.current.setStepCatalog([]);
     render(
       <AlertProvider>
         <Catalog handleClose={jest.fn()} />

diff --git a/src/components/Catalog.tsx b/src/components/Catalog.tsx
@@ -1,8 +1,8 @@
 import './Catalog.css';
 import { fetchCatalogSteps } from '@kaoto/api';
-import { useSettingsStore, useStepCatalogStore } from '@kaoto/store';
+import { useSettingsStore } from '@kaoto/store';
 import { IStepProps } from '@kaoto/types';
-import { shorten, truncateString } from '@kaoto/utils';
+import { shorten, truncateString, usePrevious } from '@kaoto/utils';
 import {
   AlertVariant,
   Bullseye,
@@ -29,10 +29,11 @@ import { useAlert } from '@rhoas/app-services-ui-shared';
 import { useEffect, useRef, useState } from 'react';
 
 export const Catalog = ({ handleClose }: { handleClose: () => void }) => {
-  const stepCatalog = useStepCatalogStore();
+  const [catalogData, setCatalogData] = useState<IStepProps[]>([]);
   const [isSelected, setIsSelected] = useState('START');
   const [query, setQuery] = useState(``);
   const dsl = useSettingsStore((state) => state.settings.dsl.name);
+  const previousDSL = usePrevious(dsl);
   const searchInputRef = useRef<HTMLInputElement>(null);
 
   const { addAlert } = useAlert() || {};
@@ -42,14 +43,14 @@ export const Catalog = ({ handleClose }: { handleClose: () => void }) => {
    * Checks for changes to the settings for DSL
    */
   useEffect(() => {
-    if (stepCatalog.stepCatalog.length) return;
+    if (previousDSL === dsl) return;
     fetchCatalogSteps({
       dsl,
     })
       .then((value) => {
         if (value) {
           value.sort((a: IStepProps, b: IStepProps) => a.name.localeCompare(b.name));
-          stepCatalog.setStepCatalog(value);
+          setCatalogData(value);
         }
       })
       .catch((e) => {
@@ -153,53 +154,54 @@ export const Catalog = ({ handleClose }: { handleClose: () => void }) => {
         hasGutter={true}
         style={{ flex: '1 1', overflow: 'auto', padding: '0 10px', alignContent: 'flex-start' }}
       >
-        {search(stepCatalog.stepCatalog).map((step, idx) => {
-          return (
-            <GalleryItem key={idx}>
-              <Card
-                className={'catalog__step'}
-                data-testid={`catalog-step-${step.name}`}
-                isCompact={true}
-                isSelectable={true}
-                draggable={'true'}
-                onDragStart={(e: any) => {
-                  e.dataTransfer.setData('application/reactflow', 'step');
-                  e.dataTransfer.setData('text/plain', JSON.stringify(step));
+        {catalogData &&
+          search(catalogData).map((step, idx) => {
+            return (
+              <GalleryItem key={idx}>
+                <Card
+                  className={'catalog__step'}
+                  data-testid={`catalog-step-${step.name}`}
+                  isCompact={true}
+                  isSelectable={true}
+                  draggable={'true'}
+                  onDragStart={(e: any) => {
+                    e.dataTransfer.setData('application/reactflow', 'step');
+                    e.dataTransfer.setData('text/plain', JSON.stringify(step));
 
-                  e.dataTransfer.effectAllowed = 'move';
-                }}
-              >
-                <Grid md={6}>
-                  <GridItem span={2}>
-                    <Bullseye>
-                      <img
-                        src={step.icon}
-                        className={'catalog__stepImage'}
-                        alt={'Step Image'}
-                        data-testid={'catalog__stepImage'}
-                      />
-                    </Bullseye>
-                  </GridItem>
-                  <GridItem span={7}>
-                    <CardTitle>
-                      <span>{step.name}</span>
-                    </CardTitle>
-                    <CardBody>{shorten(step?.description, 60)}</CardBody>
-                  </GridItem>
-                  <GridItem span={3}>
-                    <Label
-                      color={'blue'}
-                      data-testid={'catalog__stepLabel'}
-                      style={{ marginTop: '0.8em' }}
-                    >
-                      {truncateString(step.kind, 8)}
-                    </Label>
-                  </GridItem>
-                </Grid>
-              </Card>
-            </GalleryItem>
-          );
-        })}
+                    e.dataTransfer.effectAllowed = 'move';
+                  }}
+                >
+                  <Grid md={6}>
+                    <GridItem span={2}>
+                      <Bullseye>
+                        <img
+                          src={step.icon}
+                          className={'catalog__stepImage'}
+                          alt={'Step Image'}
+                          data-testid={'catalog__stepImage'}
+                        />
+                      </Bullseye>
+                    </GridItem>
+                    <GridItem span={7}>
+                      <CardTitle>
+                        <span>{step.name}</span>
+                      </CardTitle>
+                      <CardBody>{shorten(step?.description, 60)}</CardBody>
+                    </GridItem>
+                    <GridItem span={3}>
+                      <Label
+                        color={'blue'}
+                        data-testid={'catalog__stepLabel'}
+                        style={{ marginTop: '0.8em' }}
+                      >
+                        {truncateString(step.kind, 8)}
+                      </Label>
+                    </GridItem>
+                  </Grid>
+                </Card>
+              </GalleryItem>
+            );
+          })}
       </Gallery>
     </div>
   );

diff --git a/src/components/MiniCatalog.tsx b/src/components/MiniCatalog.tsx
@@ -1,5 +1,5 @@
 import { fetchCatalogSteps } from '@kaoto/api';
-import { useSettingsStore, useStepCatalogStore } from '@kaoto/store';
+import { useSettingsStore } from '@kaoto/store';
 import { IStepProps, IStepQueryParams } from '@kaoto/types';
 import { truncateString } from '@kaoto/utils';
 import {
@@ -37,7 +37,7 @@ export interface IMiniCatalog {
 }
 
 export const MiniCatalog = (props: IMiniCatalog) => {
-  const stepCatalog = useStepCatalogStore();
+  const [catalogData, setCatalogData] = useState<IStepProps[]>([]);
   const [query, setQuery] = useState(``);
   const [activeTabKey, setActiveTabKey] = useState(props.disableStepsTab ? 1 : 0);
   const dsl = useSettingsStore((state) => state.settings.dsl.name);
@@ -57,14 +57,15 @@ export const MiniCatalog = (props: IMiniCatalog) => {
    * Sort & fetch all Steps for the Catalog
    */
   useEffect(() => {
-    if (!props.steps && !stepCatalog.stepCatalog.length) {
+    if (!props.steps) {
       fetchCatalogSteps({
+        ...props.queryParams,
         dsl,
       })
         .then((value) => {
           if (value) {
             value.sort((a: IStepProps, b: IStepProps) => a.name.localeCompare(b.name));
-            stepCatalog.setStepCatalog(value);
+            setCatalogData(value);
           }
         })
         .catch((e) => {
@@ -175,34 +176,35 @@ export const MiniCatalog = (props: IMiniCatalog) => {
             </ToolbarContent>
           </Toolbar>
           <Gallery hasGutter={false} className={'miniCatalog__gallery'}>
-            {search(stepCatalog.stepCatalog).map((step) => {
-              return (
-                <Button
-                  key={step.id}
-                  variant={'tertiary'}
-                  onClick={() => {
-                    handleSelectStep(step);
-                  }}
-                  className={'miniCatalog__stepItem'}
-                  data-testid={`miniCatalog__stepItem--${step.name}`}
-                >
-                  <Grid md={6} className={'miniCatalog__stepItem__grid'}>
-                    <GridItem span={3}>
-                      <Bullseye>
-                        <img
-                          src={step.icon}
-                          className={'miniCatalog__stepImage'}
-                          alt={'Step Image'}
-                          loading="lazy"
-                          decoding="async"
-                        />
-                      </Bullseye>
-                    </GridItem>
-                    <GridItem span={9}>{truncateString(step.name, 25)}</GridItem>
-                  </Grid>
-                </Button>
-              );
-            })}
+            {catalogData &&
+              search(catalogData).map((step) => {
+                return (
+                  <Button
+                    key={step.id}
+                    variant={'tertiary'}
+                    onClick={() => {
+                      handleSelectStep(step);
+                    }}
+                    className={'miniCatalog__stepItem'}
+                    data-testid={`miniCatalog__stepItem--${step.name}`}
+                  >
+                    <Grid md={6} className={'miniCatalog__stepItem__grid'}>
+                      <GridItem span={3}>
+                        <Bullseye>
+                          <img
+                            src={step.icon}
+                            className={'miniCatalog__stepImage'}
+                            alt={'Step Image'}
+                            loading="lazy"
+                            decoding="async"
+                          />
+                        </Bullseye>
+                      </GridItem>
+                      <GridItem span={9}>{truncateString(step.name, 25)}</GridItem>
+                    </Grid>
+                  </Button>
+                );
+              })}
           </Gallery>
         </Tab>
         <Tab

diff --git a/src/components/PlusButtonEdge.tsx b/src/components/PlusButtonEdge.tsx
@@ -1,3 +1,4 @@
+import './CustomEdge.css';
 import { BranchBuilder, MiniCatalog } from '@kaoto/components';
 import { usePosition, useShowBranchTab } from '@kaoto/hooks';
 import { StepsService, ValidationService, VisualizationService } from '@kaoto/services';
@@ -7,7 +8,6 @@ import { Popover, Tooltip } from '@patternfly/react-core';
 import { PlusIcon } from '@patternfly/react-icons';
 import { ReactNode } from 'react';
 import { EdgeText, getBezierPath, Position, useReactFlow } from 'reactflow';
-import './CustomEdge.css';
 
 const foreignObjectSize = 40;
 
@@ -48,7 +48,10 @@ const PlusButtonEdge = ({
 
   const { tooltipPosition } = usePosition();
   const views = useIntegrationJsonStore((state) => state.views);
-  const { disableBranchesTab, disableBranchesTabMsg } = useShowBranchTab(sourceNode?.data.step, views);
+  const { disableBranchesTab, disableBranchesTabMsg } = useShowBranchTab(
+    sourceNode?.data.step,
+    views
+  );
 
   const [edgePath, edgeCenterX, edgeCenterY] = getBezierPath({
     sourceX,
@@ -100,6 +103,8 @@ const PlusButtonEdge = ({
                     sourceNode?.data.step,
                     targetNode?.data.step
                   ),
+                  previousStep: sourceNode?.data.step.id,
+                  followingStep: targetNode?.data.step.id,
                 }}
                 step={sourceNode?.data.step}
               >