From a42d28ea4529f23ed3d716d0a08f3f2eb7cdcea1 Mon Sep 17 00:00:00 2001 From: Tomohisa Igarashi Date: Thu, 2 Mar 2023 17:12:37 -0500 Subject: [PATCH] fix(catalog): Mini catalog is taking a long time to load Fixes: #1269 --- src/components/Catalog.tsx | 104 +++++++++++++++---------------- src/components/MiniCatalog.tsx | 66 ++++++++++---------- src/components/SettingsModal.tsx | 9 ++- src/store/index.ts | 1 + src/store/stepCatalogStore.tsx | 25 ++++++++ 5 files changed, 117 insertions(+), 88 deletions(-) create mode 100644 src/store/stepCatalogStore.tsx diff --git a/src/components/Catalog.tsx b/src/components/Catalog.tsx index e24f5163d..61dd90ef3 100644 --- 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([]); + 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(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 ( - - { - e.dataTransfer.setData('application/reactflow', 'step'); - e.dataTransfer.setData('text/plain', JSON.stringify(step)); + {search(stepCatalog.stepCatalog).map((step, idx) => { + return ( + + { + e.dataTransfer.setData('application/reactflow', 'step'); + e.dataTransfer.setData('text/plain', JSON.stringify(step)); - e.dataTransfer.effectAllowed = 'move'; - }} - > - - - - {'Step - - - - - {step.name} - - {shorten(step?.description, 60)} - - - - - - - - ); - })} + e.dataTransfer.effectAllowed = 'move'; + }} + > + + + + {'Step + + + + + {step.name} + + {shorten(step?.description, 60)} + + + + + + + + ); + })} ); diff --git a/src/components/MiniCatalog.tsx b/src/components/MiniCatalog.tsx index 5bdcfaf32..ff9453e4a 100644 --- 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(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) => { - {catalogData && - search(catalogData).map((step) => { - return ( - - ); - })} + {search(stepCatalog.stepCatalog).map((step) => { + return ( + + ); + })} ([]); const { settings, setSettings } = useSettingsStore((state) => state); const [localSettings, setLocalSettings] = useState(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 index a067a0226..ddf09ee69 100644 --- 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 new file mode 100644 index 000000000..35abd0e06 --- /dev/null +++ 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((set) => ({ + dsl: initDsl.name, + stepCatalog: initialStepCatalog, + setDsl: (dsl: string) => { + set({ dsl: dsl, stepCatalog: [] }); + }, + setStepCatalog: (vals: IStepProps[]) => { + set({ stepCatalog: vals }); + }, +})); + +export default useStepCatalogStore;