feat: Community module synchronius installation (#4214)

* installation partially working

* add mvp of upload dialog

* remove old file

* fix fetch

* fix

* fix deletion

* use singleGet instead of fetch

* improve code

* first implementation

* move upload to context

* move things to proper place

* refactor and improve code quality

* improve error handling

* improve moduleDuringInstalation state

* fix upload

* fix upload

* remove console.logs and finished uploads

* improve notifications

* remove not needed sleep

* small fixes

* cleanup

* fix eslint

* fix lint

* small fixes

* fix logic

* use transform function instead of direct updates

* fix lint

* fix code review

* fix after mege

Author: dbadura

public/i18n/en.yaml

@@ -953,6 +953,7 @@ modules:
       source-yaml-fetch-failed: 'Failed to download source yaml: {{error}}'
       source-yaml-invalid-url: Ensure your URL ends with ".yaml".
       success: '{{resourceType}} installed'
+      upload: Start {{resourceType}} upload
     no-modules: No community modules available
     no-modules-description: Customize your cluster by adding the modules you need.
     no-modules-installed: No community modules installed

src/components/Modules/community/CommunityModulesAddModule.tsx

@@ -7,29 +7,43 @@ import { ResourceForm } from 'shared/ResourceForm';
 import { MessageStrip } from '@ui5/webcomponents-react';
 import { Spinner } from 'shared/components/Spinner/Spinner';
 import {
-  fetchResourcesToApply,
   getAvailableCommunityModules,
   VersionInfo,
 } from 'components/Modules/community/communityModulesHelpers';
 import {
-  DEFAULT_K8S_NAMESPACE,
   getModuleName,
   ModuleTemplateListType,
   ModuleTemplateType,
 } from 'components/Modules/support';
-import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import { UnsavedMessageBox } from 'shared/components/UnsavedMessageBox/UnsavedMessageBox';
-import { createPortal } from 'react-dom';
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 import { isResourceEditedAtom } from 'state/resourceEditedAtom';
 import { refreshExtenshionsAtom } from 'state/refreshExtenshionsAtom';
-import { useUploadResources } from 'resources/Namespaces/YamlUpload/useUploadResources';
-import { usePost } from 'shared/hooks/BackendAPI/usePost';
+import { PostFn, usePost } from 'shared/hooks/BackendAPI/usePost';
 import { CommunityModuleContext } from 'components/Modules/community/providers/CommunityModuleProvider';
 import CommunityModuleCard from 'components/Modules/community/components/CommunityModuleCard';
-
-import { useNotification } from 'shared/contexts/NotificationContext';
+import {
+  NotificationContextArgs,
+  useNotification,
+} from 'shared/contexts/NotificationContext';
 
 import 'components/Modules/KymaModulesAddModule.scss';
+import { useSingleGet } from 'shared/hooks/BackendAPI/useGet';
+import { CommunityModulesInstallationContext } from 'components/Modules/community/providers/CommunitModulesInstalationProvider';
+import { MutationFn, useUpdate } from 'shared/hooks/BackendAPI/useMutation';
+import { useAtomValue } from 'jotai/index';
+import { allNodesAtom } from 'state/navigation/allNodesAtom';
+import {
+  CallbackFn,
+  installCommunityModule,
+} from 'components/Modules/community/communityModulesInstallHelpers';
+import { UnsavedMessageBox } from 'shared/components/UnsavedMessageBox/UnsavedMessageBox';
+import { createPortal } from 'react-dom';
 
 type VersionDisplayInfo = {
   moduleTemplate: {
@@ -49,14 +63,14 @@ type ModuleDisplayInfo = {
 
 function onVersionChange(
   moduleTemplates: ModuleTemplateListType,
-  moduleTemplatesToApply: Map<string, ModuleTemplateType>,
+  moduleTemplatesToApply: { map: Map<string, ModuleTemplateType> },
   setModulesTemplatesToApply: (
-    update: SetStateAction<Map<string, ModuleTemplateType>>,
+    update: SetStateAction<{ map: Map<string, ModuleTemplateType> }>,
   ) => void,
   setIsResourceEdited: (update: SetStateAction<any>) => void,
 ): any {
   return (value: string, shouldRemove: boolean) => {
-    const newModulesTemplatesToApply = new Map(moduleTemplatesToApply);
+    const newModulesTemplatesToApply = new Map(moduleTemplatesToApply.map);
 
     const [name, namespace] = value.split('|');
     const newModuleTemplateToApply = moduleTemplates.items.find(
@@ -88,7 +102,7 @@ function onVersionChange(
       });
     }
 
-    setModulesTemplatesToApply(newModulesTemplatesToApply);
+    setModulesTemplatesToApply({ map: newModulesTemplatesToApply });
   };
 }
 
@@ -113,39 +127,108 @@ function transformDataForDisplay(
   });
 }
 
+async function upload(
+  t: Function,
+  communityModulesTemplatesToUpload: { map: Map<string, ModuleTemplateType> },
+  setModulesTemplatesToUpload: React.Dispatch<
+    SetStateAction<{ map: Map<string, ModuleTemplateType> }>
+  >,
+  clusterNodes: any,
+  namespaceNodes: any,
+  postRequest: PostFn,
+  patchRequest: MutationFn,
+  singleGet: Function,
+  notification: NotificationContextArgs,
+  callback: CallbackFn,
+) {
+  if (communityModulesTemplatesToUpload.map.size === 0) {
+    return;
+  }
+
+  try {
+    let errorOccurred = false;
+    for (const module of communityModulesTemplatesToUpload.map.values()) {
+      try {
+        notification.notifySuccess({
+          content: t('modules.community.messages.upload', {
+            resourceType: getModuleName(module),
+          }),
+        });
+
+        await installCommunityModule(
+          module,
+          clusterNodes,
+          namespaceNodes,
+          postRequest,
+          patchRequest,
+          singleGet,
+          callback,
+        );
+      } catch (e) {
+        errorOccurred = true;
+        notification.notifyError({
+          content: t('modules.community.messages.install-failure', {
+            resourceType: getModuleName(module),
+            error: e instanceof Error && e?.message ? e.message : '',
+          }),
+        });
+      }
+    }
+    setModulesTemplatesToUpload({ map: new Map() });
+    if (!errorOccurred) {
+      notification.notifySuccess({
+        content: t('modules.community.messages.success', {
+          resourceType: 'Community Module',
+        }),
+      });
+    }
+  } catch (e) {
+    console.error(e);
+    notification.notifyError({
+      content: t('modules.community.messages.install-failure', {
+        resourceType: 'Community Module',
+        error: e instanceof Error && e?.message ? e.message : '',
+      }),
+    });
+  }
+}
+
 export default function CommunityModulesAddModule(props: any) {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const { isEnabled: isCommunityModulesEnabled } =
     useFeature('COMMUNITY_MODULES');
-  const notification = useNotification();
-  const post = usePost();
   const setIsResourceEdited = useSetAtom(isResourceEditedAtom);
+
   const [refreshExtenshionsCount, setRefreshExtenshions] = useAtom(
     refreshExtenshionsAtom,
   );
+  const notification = useNotification();
+  const postRequest = usePost();
+  const patchRequest = useUpdate();
 
-  const [resourcesToApply, setResourcesToApply] = useState<{ value: any }[]>(
-    [],
+  const singleGet = useSingleGet();
+  const clusterNodes = useAtomValue(allNodesAtom).filter(
+    (node) => !node.namespaced,
   );
+  const namespaceNodes = useAtomValue(allNodesAtom).filter(
+    (node) => node.namespaced,
+  );
+
   const [layoutColumn, setLayoutColumn] = useAtom(columnLayoutAtom);
 
-  const uploadResources = useUploadResources(
-    resourcesToApply,
-    setResourcesToApply,
-    () => {},
-    DEFAULT_K8S_NAMESPACE,
-  );
   const [
     communityModulesTemplatesToApply,
     setCommunityModulesTemplatesToApply,
-  ] = useState(new Map<string, ModuleTemplateType>());
+  ] = useState({ map: new Map<string, ModuleTemplateType>() });
 
   const {
     notInstalledCommunityModuleTemplates,
     installedCommunityModulesLoading: notInstalledCommunityModulesLoading,
   } = useContext(CommunityModuleContext);
 
+  const { callback } = useContext(CommunityModulesInstallationContext);
+
   const availableCommunityModules = useMemo(() => {
     if (!notInstalledCommunityModulesLoading) {
       return getAvailableCommunityModules(
@@ -160,14 +243,6 @@ export default function CommunityModulesAddModule(props: any) {
     notInstalledCommunityModulesLoading,
   ]);
 
-  useEffect(() => {
-    fetchResourcesToApply(
-      communityModulesTemplatesToApply,
-      setResourcesToApply,
-      post,
-    );
-  }, [communityModulesTemplatesToApply]); // eslint-disable-line react-hooks/exhaustive-deps
-
   const [columnsCount, setColumnsCount] = useState(2);
   const [cardsContainerRef, setCardsContainerRef] =
     useState<HTMLDivElement | null>(null);
@@ -214,7 +289,7 @@ export default function CommunityModulesAddModule(props: any) {
   );
 
   const isChecked = (name: string) => {
-    const sth = !!communityModulesTemplatesToApply.get(name);
+    const sth = !!communityModulesTemplatesToApply.map.get(name);
     return sth;
   };
   const renderCards = () => {
@@ -232,7 +307,7 @@ export default function CommunityModulesAddModule(props: any) {
             setCommunityModulesTemplatesToApply,
             setIsResourceEdited,
           )}
-          selectedModules={communityModulesTemplatesToApply}
+          selectedModules={communityModulesTemplatesToApply.map}
         />
       );
       columns[i % columnsCount].push(card);
@@ -257,33 +332,27 @@ export default function CommunityModulesAddModule(props: any) {
 
   const handleSubmit = (e: any) => {
     e.preventDefault();
-    try {
-      uploadResources();
-
-      notification.notifySuccess({
-        content: t('modules.community.messages.success', {
-          resourceType: 'Community Module',
-        }),
-      });
-
-      setLayoutColumn({
-        ...layoutColumn,
-        layout: 'OneColumn',
-        midColumn: null,
-        endColumn: null,
-        showCreate: null,
-      });
-      navigate(window.location.pathname, { replace: true });
-      setRefreshExtenshions(refreshExtenshionsCount + 1);
-    } catch (e) {
-      console.error(e);
-      notification.notifyError({
-        content: t('modules.community.messages.install-failure', {
-          resourceType: 'Community Module',
-          error: e instanceof Error && e?.message ? e.message : '',
-        }),
-      });
-    }
+    upload(
+      t,
+      communityModulesTemplatesToApply,
+      setCommunityModulesTemplatesToApply,
+      clusterNodes,
+      namespaceNodes,
+      postRequest,
+      patchRequest,
+      singleGet,
+      notification,
+      callback,
+    );
+    navigate(window.location.pathname, { replace: true });
+    setRefreshExtenshions(refreshExtenshionsCount + 1);
+    setLayoutColumn({
+      ...layoutColumn,
+      layout: 'OneColumn',
+      midColumn: null,
+      endColumn: null,
+      showCreate: null,
+    });
   };
 
   if (isCommunityModulesEnabled) {
@@ -317,7 +386,6 @@ export default function CommunityModulesAddModule(props: any) {
             )}
           </>
         </ResourceForm>
-
         {createPortal(<UnsavedMessageBox />, document.body)}
       </>
     );

src/components/Modules/community/CommunityModulesList.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button } from '@ui5/webcomponents-react';
 import pluralize from 'pluralize';
@@ -8,6 +8,7 @@ import {
   findCrd,
   findExtension,
   findModuleTemplate,
+  getModuleName,
   ModuleTemplateListType,
   ModuleTemplateType,
 } from 'components/Modules/support';
@@ -29,6 +30,11 @@ import { GenericList } from 'shared/components/GenericList/GenericList';
 import { useNavigate } from 'react-router';
 import { useFetchModuleData } from 'components/Modules/hooks';
 import { ModulesListRows } from 'components/Modules/components/ModulesListRows';
+import {
+  CommunityModulesInstallationContext,
+  moduleInstallationState,
+} from 'components/Modules/community/providers/CommunitModulesInstalationProvider';
+import { State } from 'components/Modules/community/components/uploadStateAtom';
 
 type CommunityModulesListProps = {
   moduleTemplates: ModuleTemplateListType;
@@ -44,6 +50,23 @@ type CommunityModulesListProps = {
   setSelectedEntry?: React.Dispatch<React.SetStateAction<any>>;
 };
 
+// This function create fake module templates which is treated as installed to show progress of module upload
+function createFakeModuleTemplateWithStatus(
+  moduleState: moduleInstallationState,
+) {
+  return {
+    name: getModuleName(moduleState.moduleTpl),
+    namespace: moduleState.moduleTpl.metadata.namespace,
+    moduleTemplateName: moduleState.moduleTpl.metadata.name,
+    version: moduleState.moduleTpl.spec.version,
+    fakeStatus: {
+      type: moduleState.state,
+      state: moduleState.state,
+      message: moduleState.message,
+    },
+  };
+}
+
 export const CommunityModulesList = ({
   moduleTemplates,
   selectedModules: installedModules,
@@ -89,6 +112,33 @@ export const CommunityModulesList = ({
   );
   const getScope = useGetScope();
 
+  const { modulesDuringUpload } = useContext(
+    CommunityModulesInstallationContext,
+  );
+
+  const [modulesToDisplay, setModulesToDisplay] =
+    useState<any[]>(installedModules);
+
+  useEffect(() => {
+    const modulesDuringProcessing = modulesDuringUpload.filter((m) => {
+      return !installedModules.find((installedModule) => {
+        return installedModule.moduleTemplateName === m.moduleTpl.metadata.name;
+      });
+    });
+
+    if (modulesDuringProcessing.length === 0) {
+      setModulesToDisplay(installedModules);
+      return;
+    }
+
+    const moduleTemplatesDuringUpload = modulesDuringProcessing
+      .filter((m) => m.state !== State.Finished)
+      .map((m) => createFakeModuleTemplateWithStatus(m));
+    setModulesToDisplay(
+      [...installedModules].concat(moduleTemplatesDuringUpload),
+    );
+  }, [installedModules, modulesDuringUpload]);
+
   const handleShowAddModule = () => {
     setLayoutColumn({
       startColumn: {
@@ -296,7 +346,7 @@ export const CommunityModulesList = ({
         customColumnLayout={customColumnLayout as any}
         enableColumnLayout
         hasDetailsView
-        entries={installedModules as any}
+        entries={modulesToDisplay as any}
         serverDataLoading={modulesLoading}
         headerRenderer={headerRenderer}
         rowRenderer={(resource) =>