refactor: Kyma Modules move queries to separate file (#3637)

* move queries to separate file * fix acc resources counter * fix acc resources counter * get rid of useGet in Add Modules and add skips * get rid of useGet in kyma create view * idk how to name it * hakunamatata * being blind is not a crime --------- Co-authored-by: mrCherry97 <[email protected]>
kyma-project · Jan 28, 2025 · 79d7b67 · 79d7b67
1 parent 043e79e
commit 79d7b67
Show file tree

Hide file tree

Showing 7 changed files with 152 additions and 128 deletions.
diff --git a/src/components/Clusters/views/ClusterOverview/ClusterDetails.js b/src/components/Clusters/views/ClusterOverview/ClusterDetails.js
@@ -7,7 +7,7 @@ import { DynamicPageComponent } from 'shared/components/DynamicPageComponent/Dyn
 import ResourceDetailsCard from 'shared/components/ResourceDetails/ResourceDetailsCard';
 import { Button, Text } from '@ui5/webcomponents-react';
 import { CountingCard } from 'shared/components/CountingCard/CountingCard';
-import { useKymaModulesQuery } from 'components/KymaModules/KymaModulesQuery';
+import { useKymaModulesQuery } from 'components/KymaModules/kymaModulesQueries';
 import { useUrl } from 'hooks/useUrl';
 import { useNavigate } from 'react-router-dom';
 import { spacing } from '@ui5/webcomponents-react-base';

diff --git a/src/components/KymaModules/KymaModulesAddModule.js b/src/components/KymaModules/KymaModulesAddModule.js
@@ -2,12 +2,16 @@ import { useCallback, useEffect, useState } from 'react';
 import { MessageStrip } from '@ui5/webcomponents-react';
 import { spacing } from '@ui5/webcomponents-react-base';
 import { useTranslation } from 'react-i18next';
-import { useGet } from 'shared/hooks/BackendAPI/useGet';
 import { ResourceForm } from 'shared/ResourceForm';
 import { Spinner } from 'shared/components/Spinner/Spinner';
 import ModulesCard from './ModulesCard';
-import './KymaModulesAddModule.scss';
 import { cloneDeep } from 'lodash';
+import {
+  useModulesReleaseQuery,
+  useModuleTemplatesQuery,
+} from './kymaModulesQueries';
+
+import './KymaModulesAddModule.scss';
 
 export default function KymaModulesAddModule({
   resourceName,
@@ -21,10 +25,6 @@ export default function KymaModulesAddModule({
 }) {
   const { t } = useTranslation();
 
-  const modulesResourceUrl = `/apis/operator.kyma-project.io/v1beta2/moduletemplates`;
-
-  const modulesReleaseMetaResourceUrl = `/apis/operator.kyma-project.io/v1beta2/modulereleasemetas`;
-
   const [resource, setResource] = useState(cloneDeep(kymaResource));
 
   const [selectedModules, setSelectedModules] = useState([]);
@@ -48,13 +48,10 @@ export default function KymaModulesAddModule({
     }
   }, [setKymaResource, kymaResource, selectedModules, activeKymaModules]);
 
-  const { data: modules } = useGet(modulesResourceUrl, {
-    pollingInterval: 3000,
+  const { data: moduleReleaseMetas } = useModulesReleaseQuery({
     skip: !resourceName,
   });
-
-  const { data: moduleReleaseMetas } = useGet(modulesReleaseMetaResourceUrl, {
-    pollingInterval: 3000,
+  const { data: moduleTemplates } = useModuleTemplatesQuery({
     skip: !resourceName,
   });
 
@@ -99,7 +96,7 @@ export default function KymaModulesAddModule({
     );
   }
 
-  const modulesAddData = modules?.items.reduce((acc, module) => {
+  const modulesAddData = moduleTemplates?.items.reduce((acc, module) => {
     const name = module.metadata.labels['operator.kyma-project.io/module-name'];
     const existingModule = acc.find(item => item.name === name);
     const isAlreadyInstalled = initialUnchangedResource?.spec?.modules?.find(

diff --git a/src/components/KymaModules/KymaModulesCreate.js b/src/components/KymaModules/KymaModulesCreate.js
@@ -7,7 +7,6 @@ import { useTranslation } from 'react-i18next';
 import { useUrl } from 'hooks/useUrl';
 
 import { useNotification } from 'shared/contexts/NotificationContext';
-import { useGet } from 'shared/hooks/BackendAPI/useGet';
 import { useUpdate } from 'shared/hooks/BackendAPI/useMutation';
 import { useSingleGet } from 'shared/hooks/BackendAPI/useGet';
 import { HttpError } from 'shared/hooks/BackendAPI/config';
@@ -33,6 +32,10 @@ import { isResourceEditedState } from 'state/resourceEditedAtom';
 import { ManagedWarnings } from './ManagedWarnings';
 import { ChannelWarning } from './ChannelWarning';
 import { UnmanagedModuleInfo } from './UnmanagedModuleInfo';
+import {
+  useModulesReleaseQuery,
+  useModuleTemplatesQuery,
+} from './kymaModulesQueries';
 
 export default function KymaModulesCreate({ resource, ...props }) {
   const { t } = useTranslation();
@@ -43,20 +46,17 @@ export default function KymaModulesCreate({ resource, ...props }) {
   const setIsFormOpen = useSetRecoilState(isFormOpenState);
 
   const resourceName = kymaResource?.metadata.name;
-  const modulesResourceUrl = `/apis/operator.kyma-project.io/v1beta2/moduletemplates`;
-
-  const modulesReleaseMetaResourceUrl = `/apis/operator.kyma-project.io/v1beta2/modulereleasemetas`;
-
-  const { data: modules, loading: lodingModules } = useGet(modulesResourceUrl, {
-    pollingInterval: 3000,
-    skip: !resourceName,
-  });
 
   const {
     data: moduleReleaseMetas,
     loading: loadingModulesReleaseMetas,
-  } = useGet(modulesReleaseMetaResourceUrl, {
-    pollingInterval: 3000,
+  } = useModulesReleaseQuery({
+    skip: !resourceName,
+  });
+  const {
+    data: moduleTemplates,
+    loading: lodingModuleTemplates,
+  } = useModuleTemplatesQuery({
     skip: !resourceName,
   });
 
@@ -79,7 +79,7 @@ export default function KymaModulesCreate({ resource, ...props }) {
     onSave: false,
   });
 
-  if (lodingModules || loadingModulesReleaseMetas) {
+  if (lodingModuleTemplates || loadingModulesReleaseMetas) {
     return (
       <div style={{ height: 'calc(100vh - 14rem)' }}>
         <Spinner />
@@ -128,7 +128,7 @@ export default function KymaModulesCreate({ resource, ...props }) {
     setShowManagedBox({ isOpen: true, onSave: false });
   };
 
-  const installedModules = modules?.items.filter(module => {
+  const installedModules = moduleTemplates?.items.filter(module => {
     const name =
       module.metadata?.labels['operator.kyma-project.io/module-name'];
     return (

diff --git a/src/components/KymaModules/KymaModulesList.js b/src/components/KymaModules/KymaModulesList.js
@@ -4,14 +4,14 @@ import jsyaml from 'js-yaml';
 
 import { ResourceDetails } from 'shared/components/ResourceDetails/ResourceDetails';
 import {
-  DynamicPageHeader,
+  Badge,
   Button,
+  DynamicPageHeader,
   FlexBox,
-  Text,
-  Badge,
   List,
-  StandardListItem,
   MessageStrip,
+  StandardListItem,
+  Text,
 } from '@ui5/webcomponents-react';
 
 import { HintButton } from 'shared/components/DescriptionHint/DescriptionHint';
@@ -28,11 +28,11 @@ import { ExternalLink } from 'shared/components/ExternalLink/ExternalLink';
 import { EMPTY_TEXT_PLACEHOLDER } from 'shared/constants';
 import KymaModulesCreate from './KymaModulesCreate';
 import {
+  apiGroup,
+  apiVersion,
   ReleaseChannelDescription,
   ResourceDescription,
   resourceType,
-  apiGroup,
-  apiVersion,
 } from 'components/KymaModules';
 import { useSetRecoilState } from 'recoil';
 import { columnLayoutState } from 'state/columnLayoutAtom';
@@ -45,6 +45,10 @@ import { ModuleStatus } from './components/ModuleStatus';
 import { cloneDeep } from 'lodash';
 import { StatusBadge } from 'shared/components/StatusBadge/StatusBadge';
 import { useNavigate } from 'react-router-dom';
+import {
+  useModulesReleaseQuery,
+  useModuleTemplatesQuery,
+} from './kymaModulesQueries';
 
 export default function KymaModulesList({
   DeleteMessageBox,
@@ -56,7 +60,6 @@ export default function KymaModulesList({
   resourceUrl,
   kymaResource,
   kymaResourceLoading,
-  kymaResourcesLoading,
   kymaResourceState,
   selectedModules,
   setOpenedModuleIndex,
@@ -83,29 +86,21 @@ export default function KymaModulesList({
 
   const namespace = 'kyma-system';
 
-  const modulesResourceUrl = `/apis/operator.kyma-project.io/v1beta2/moduletemplates`;
-  const modulesReleaseMetaResourceUrl = `/apis/operator.kyma-project.io/v1beta2/modulereleasemetas`;
-
-  const { data: moduleReleaseMetas } = useGet(modulesReleaseMetaResourceUrl, {
-    pollingInterval: 3000,
+  const { data: moduleReleaseMetas } = useModulesReleaseQuery({
     skip: !resourceName,
   });
-
-  const { data: modules, loading: modulesLoading } = useGet(
-    modulesResourceUrl,
-    {
-      pollingInterval: 3000,
-      skip: !resourceName,
-    },
-  );
+  const {
+    data: moduleTemplates,
+    loading: moduleTemplateLoading,
+  } = useModuleTemplatesQuery({ skip: !resourceName });
 
   const crdUrl = `/apis/apiextensions.k8s.io/v1/customresourcedefinitions`;
   const { data: crds } = useGet(crdUrl, {
     pollingInterval: 5000,
   });
   const [chosenModuleIndex, setChosenModuleIndex] = useState(null);
 
-  if (kymaResourcesLoading || modulesLoading || kymaResourceLoading) {
+  if (moduleTemplateLoading || kymaResourceLoading) {
     return <Spinner />;
   }
 
@@ -125,22 +120,25 @@ export default function KymaModulesList({
 
   const ModulesList = resource => {
     const findModule = (moduleName, channel, version) => {
-      // This change was made due to changes in modules and should be simplified once all modules migrate
-      const moduleWithoutInfo = modules?.items?.find(
-        module =>
+      // This change was made due to changes in moduleTemplates and should be simplified once all moduleTemplates migrate
+      const moduleTemplateWithoutInfo = moduleTemplates?.items?.find(
+        moduleTemplate =>
           moduleName ===
-            module.metadata.labels['operator.kyma-project.io/module-name'] &&
-          module.spec.channel === channel,
+            moduleTemplate.metadata.labels[
+              'operator.kyma-project.io/module-name'
+            ] && moduleTemplate.spec.channel === channel,
       );
-      const moduleWithInfo = modules?.items?.find(
-        module =>
+      const moduleWithInfo = moduleTemplates?.items?.find(
+        moduleTemplate =>
           moduleName ===
-            module.metadata.labels['operator.kyma-project.io/module-name'] &&
-          !module.spec.channel &&
-          module.spec.version === version,
+            moduleTemplate.metadata.labels[
+              'operator.kyma-project.io/module-name'
+            ] &&
+          !moduleTemplate.spec.channel &&
+          moduleTemplate.spec.version === version,
       );
 
-      return moduleWithInfo ?? moduleWithoutInfo;
+      return moduleWithInfo ?? moduleTemplateWithoutInfo;
     };
 
     const findModuleReleaseMeta = moduleName => {
@@ -487,27 +485,33 @@ export default function KymaModulesList({
                       mode="None"
                       separators="All"
                     >
-                      {getAssociatedResources().map(assResource => (
-                        <StandardListItem
-                          onClick={e => {
-                            e.preventDefault();
-                            handleItemClick(
-                              assResource.kind,
-                              assResource.group,
-                              assResource.version,
-                            );
-                          }}
-                          type="Active"
-                          key={`${assResource.kind}-${assResource.group}-${assResource.version}`}
-                          additionalText={
-                            resourceCounts[
-                              `${assResource.kind}-${assResource.group}-${assResource.version}`
-                            ] || t('common.headers.loading')
-                          }
-                        >
-                          {pluralize(assResource?.kind)}
-                        </StandardListItem>
-                      ))}
+                      {getAssociatedResources().map(assResource => {
+                        const resourceCount =
+                          resourceCounts[
+                            `${assResource.kind}-${assResource.group}-${assResource.version}`
+                          ];
+
+                        return (
+                          <StandardListItem
+                            onClick={e => {
+                              e.preventDefault();
+                              handleItemClick(
+                                assResource.kind,
+                                assResource.group,
+                                assResource.version,
+                              );
+                            }}
+                            type="Active"
+                            key={`${assResource.kind}-${assResource.group}-${assResource.version}`}
+                            additionalText={
+                              (resourceCount === 0 ? '0' : resourceCount) ||
+                              t('common.headers.loading')
+                            }
+                          >
+                            {pluralize(assResource?.kind)}
+                          </StandardListItem>
+                        );
+                      })}
                     </List>
                   </>
                 )

diff --git a/src/components/KymaModules/KymaModulesQuery.js b/src/components/KymaModules/KymaModulesQuery.js