fix(catalog): Mini catalog is taking a long time to load

Fixes: #1269
KaotoIO · Mar 2, 2023 · a42d28e · a42d28e
1 parent 4b801cc
commit a42d28e
Show file tree

Hide file tree

Showing 5 changed files with 117 additions and 88 deletions.
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 } from '@kaoto/store';
+import { useSettingsStore, useStepCatalogStore } from '@kaoto/store';
 import { IStepProps } from '@kaoto/types';
-import { shorten, truncateString, usePrevious } from '@kaoto/utils';
+import { shorten, truncateString } from '@kaoto/utils';
 import {
   AlertVariant,
   Bullseye,
@@ -29,11 +29,10 @@ import { useAlert } from '@rhoas/app-services-ui-shared';
 import { useEffect, useRef, useState } from 'react';
 
 export const Catalog = ({ handleClose }: { handleClose: () => void }) => {
-  const [catalogData, setCatalogData] = useState<IStepProps[]>([]);
+  const stepCatalog = useStepCatalogStore();
   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() || {};
@@ -43,14 +42,14 @@ export const Catalog = ({ handleClose }: { handleClose: () => void }) => {
    * Checks for changes to the settings for DSL
    */
   useEffect(() => {
-    if (previousDSL === dsl) return;
+    if (stepCatalog.stepCatalog.length) return;
     fetchCatalogSteps({
       dsl,
     })
       .then((value) => {
         if (value) {
           value.sort((a: IStepProps, b: IStepProps) => a.name.localeCompare(b.name));
-          setCatalogData(value);
+          stepCatalog.setStepCatalog(value);
         }
       })
       .catch((e) => {
@@ -154,54 +153,53 @@ export const Catalog = ({ handleClose }: { handleClose: () => void }) => {
         hasGutter={true}
         style={{ flex: '1 1', overflow: 'auto', padding: '0 10px', alignContent: 'flex-start' }}
       >
-        {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));
+        {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));
 
-                    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 } from '@kaoto/store';
+import { useSettingsStore, useStepCatalogStore } 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 [catalogData, setCatalogData] = useState<IStepProps[]>(props.steps ?? []);
+  const stepCatalog = useStepCatalogStore();
   const [query, setQuery] = useState(``);
   const [activeTabKey, setActiveTabKey] = useState(props.disableStepsTab ? 1 : 0);
   const dsl = useSettingsStore((state) => state.settings.dsl.name);
@@ -57,15 +57,14 @@ export const MiniCatalog = (props: IMiniCatalog) => {
    * Sort & fetch all Steps for the Catalog
    */
   useEffect(() => {
-    if (!props.steps) {
+    if (!props.steps && !stepCatalog.stepCatalog.length) {
       fetchCatalogSteps({
-        ...props.queryParams,
         dsl,
       })
         .then((value) => {
           if (value) {
             value.sort((a: IStepProps, b: IStepProps) => a.name.localeCompare(b.name));
-            setCatalogData(value);
+            stepCatalog.setStepCatalog(value);
           }
         })
         .catch((e) => {
@@ -173,35 +172,34 @@ export const MiniCatalog = (props: IMiniCatalog) => {
             </ToolbarContent>
           </Toolbar>
           <Gallery hasGutter={false} className={'miniCatalog__gallery'}>
-            {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>
-                );
-              })}
+            {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>
+              );
+            })}
           </Gallery>
         </Tab>
         <Tab

diff --git a/src/components/SettingsModal.tsx b/src/components/SettingsModal.tsx
@@ -1,6 +1,11 @@
 import { fetchCapabilities, fetchCompatibleDSLs, fetchIntegrationSourceCode } from '@kaoto/api';
 import { ValidationService } from '@kaoto/services';
-import { useIntegrationJsonStore, useIntegrationSourceStore, useSettingsStore } from '@kaoto/store';
+import {
+  useIntegrationJsonStore,
+  useIntegrationSourceStore,
+  useSettingsStore,
+  useStepCatalogStore,
+} from '@kaoto/store';
 import { ICapabilities, ISettings } from '@kaoto/types';
 import { usePrevious } from '@kaoto/utils';
 import {
@@ -36,6 +41,7 @@ export const SettingsModal = ({ handleCloseModal, isModalOpen }: ISettingsModal)
   const [availableDSLs, setAvailableDSLs] = useState<string[]>([]);
   const { settings, setSettings } = useSettingsStore((state) => state);
   const [localSettings, setLocalSettings] = useState<ISettings>(settings);
+  const setStepCatalogDsl = useStepCatalogStore((state) => state.setDsl);
   const { integrationJson, updateIntegration } = useIntegrationJsonStore((state) => state);
   const { setSourceCode } = useIntegrationSourceStore();
   const previousIntegrationJson = usePrevious(integrationJson);
@@ -99,6 +105,7 @@ export const SettingsModal = ({ handleCloseModal, isModalOpen }: ISettingsModal)
       capabilities.dsls.forEach((dsl) => {
         if (dsl.name === value) {
           setLocalSettings({ ...localSettings, dsl: dsl });
+          setStepCatalogDsl(dsl.name);
           const tmpIntegration = { ...integrationJson, dsl: dsl.name };
           updateIntegration(tmpIntegration);
           return;

diff --git a/src/store/index.ts b/src/store/index.ts
@@ -4,4 +4,5 @@ export * from './integrationJsonStore';
 export * from './integrationSourceStore';
 export * from './nestedStepsStore';
 export * from './settingsStore';
+export * from './stepCatalogStore';
 export * from './visualizationStore';
diff --git a/src/store/stepCatalogStore.tsx b/src/store/stepCatalogStore.tsx
@@ -0,0 +1,25 @@
+// @ts-ignore
+import initDsl from './settingsStore';
+import { IStepProps } from '@kaoto/types';
+import { create } from 'zustand';
+
+interface IStepCatalogStore {
+  dsl: string;
+  stepCatalog: IStepProps[];
+  setDsl: (dsl: string) => void;
+  setStepCatalog: (vals: IStepProps[]) => void;
+}
+
+export const initialStepCatalog: IStepProps[] = [];
+export const useStepCatalogStore = create<IStepCatalogStore>((set) => ({
+  dsl: initDsl.name,
+  stepCatalog: initialStepCatalog,
+  setDsl: (dsl: string) => {
+    set({ dsl: dsl, stepCatalog: [] });
+  },
+  setStepCatalog: (vals: IStepProps[]) => {
+    set({ stepCatalog: vals });
+  },
+}));
+
+export default useStepCatalogStore;