refactor: Rework kyma modules list (#3867)

* Rework kyma modules list

* Rework modules, add KymaModuleProvider, remove kyma channel

* move module templates to provider

* Show modules in navigation if module templates exist

* Use provider for edit

* Disable button when no kyma

* Fix tests

* Fix tests

* Fix tests

* Fix job test

Author: akucharska

src/components/Extensibility/ExtensibilityDetails.js

@@ -1,4 +1,5 @@
 import pluralize from 'pluralize';
+import { useContext } from 'react';
 
 import { usePrepareDetailsProps } from 'resources/helpers';
 import { ResourceDetails } from 'shared/components/ResourceDetails/ResourceDetails';
@@ -20,6 +21,7 @@ import { useJsonata } from './hooks/useJsonata';
 import CustomResource from 'resources/CustomResourceDefinitions/CustomResources.details';
 import { useSetRecoilState } from 'recoil';
 import { resourcesConditions } from 'state/resourceConditionsAtom';
+import { KymaModuleContext } from 'components/KymaModules/providers/KymaModuleProvider';
 
 export const ExtensibilityDetailsCore = ({
   resMetaData,
@@ -224,11 +226,12 @@ const ExtensibilityDetails = ({
   layoutCloseCreateUrl,
   namespaceId,
   isModule = false,
-  headerActions,
 }) => {
   const resMetaData = useGetCRbyPath(resourceType);
   const { urlPath, defaultPlaceholder } = resMetaData?.general || {};
 
+  const { deleteModuleButton: headerActions } = useContext(KymaModuleContext);
+
   if (!resMetaData) {
     return (
       <CustomResource

src/components/KymaModules/KymaModulesAddModule.js

@@ -1,30 +1,30 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useContext, useEffect, useState } from 'react';
 import { MessageStrip } from '@ui5/webcomponents-react';
 import { useTranslation } from 'react-i18next';
 import { ResourceForm } from 'shared/ResourceForm';
 import { Spinner } from 'shared/components/Spinner/Spinner';
 import ModulesCard from 'components/KymaModules/components/ModulesCard';
 import { cloneDeep } from 'lodash';
-import {
-  useModulesReleaseQuery,
-  useModuleTemplatesQuery,
-} from './kymaModulesQueries';
+import { useModulesReleaseQuery } from './kymaModulesQueries';
+import { KymaModuleContext } from './providers/KymaModuleProvider';
 
 import './KymaModulesAddModule.scss';
 import { findModuleStatus } from './support';
 
-export default function KymaModulesAddModule({
-  resourceName,
-  kymaResourceUrl,
-  loading,
-  activeKymaModules,
-  initialUnchangedResource,
-  kymaResource,
-  setKymaResource,
-  props,
-}) {
+export default function KymaModulesAddModule(props) {
   const { t } = useTranslation();
 
+  const {
+    kymaResource: resourceName,
+    resourceUrl: kymaResourceUrl,
+    kymaResourceState: kymaResource,
+    setKymaResourceState: setKymaResource,
+    kymaResourceLoading: loading,
+    selectedModules: activeKymaModules,
+    moduleTemplates,
+    initialUnchangedResource,
+  } = useContext(KymaModuleContext);
+
   const [resource, setResource] = useState(cloneDeep(kymaResource));
 
   const [selectedModules, setSelectedModules] = useState([]);
@@ -51,9 +51,6 @@ export default function KymaModulesAddModule({
   const { data: moduleReleaseMetas } = useModulesReleaseQuery({
     skip: !resourceName,
   });
-  const { data: moduleTemplates } = useModuleTemplatesQuery({
-    skip: !resourceName,
-  });
 
   const [columnsCount, setColumnsCount] = useState(2);
   const [cardsContainerRef, setCardsContainerRef] = useState(null);

src/components/KymaModules/KymaModulesEdit.js

@@ -408,50 +408,52 @@ export default function KymaModulesEdit({ resource, ...props }) {
         />,
         document.body,
       )}
-      <ResourceForm
-        {...props}
-        className="kyma-modules-create"
-        pluralKind="kymas"
-        singularName={t('kyma-modules.kyma')}
-        resource={kymaResource}
-        initialResource={initialResource}
-        setResource={setKymaResource}
-        createUrl={props.resourceUrl}
-        disableDefaultFields
-        skipCreateFn={skipModuleFn}
-      >
-        <ResourceForm.CollapsibleSection
-          defaultOpen
-          defaultTitleType
-          className="collapsible-margins"
-          title={t('kyma-modules.modules-channel')}
+      {kymaResource && (
+        <ResourceForm
+          {...props}
+          className="kyma-modules-create"
+          pluralKind="kymas"
+          singularName={t('kyma-modules.kyma')}
+          resource={kymaResource}
+          initialResource={initialResource}
+          setResource={setKymaResource}
+          createUrl={props.resourceUrl}
+          disableDefaultFields
+          skipCreateFn={skipModuleFn}
         >
-          <UnmanagedModuleInfo kymaResource={kymaResource} />
-          {modulesEditData?.length !== 0 ? (
-            <>
-              {checkIfSelectedModuleIsBeta() ? (
-                <MessageStrip
-                  key={'beta'}
-                  design="Critical"
-                  hideCloseButton
-                  className="sap-margin-top-tiny"
-                >
-                  {t('kyma-modules.beta-alert')}
-                </MessageStrip>
-              ) : null}
-              {renderModules()}
-            </>
-          ) : (
-            <MessageStrip
-              design="Critical"
-              hideCloseButton
-              className="sap-margin-top-small"
-            >
-              {t('extensibility.widgets.modules.no-modules-installed')}
-            </MessageStrip>
-          )}
-        </ResourceForm.CollapsibleSection>
-      </ResourceForm>
+          <ResourceForm.CollapsibleSection
+            defaultOpen
+            defaultTitleType
+            className="collapsible-margins"
+            title={t('kyma-modules.modules-channel')}
+          >
+            <UnmanagedModuleInfo kymaResource={kymaResource} />
+            {modulesEditData?.length !== 0 ? (
+              <>
+                {checkIfSelectedModuleIsBeta() ? (
+                  <MessageStrip
+                    key={'beta'}
+                    design="Critical"
+                    hideCloseButton
+                    className="sap-margin-top-tiny"
+                  >
+                    {t('kyma-modules.beta-alert')}
+                  </MessageStrip>
+                ) : null}
+                {renderModules()}
+              </>
+            ) : (
+              <MessageStrip
+                design="Critical"
+                hideCloseButton
+                className="sap-margin-top-small"
+              >
+                {t('extensibility.widgets.modules.no-modules-installed')}
+              </MessageStrip>
+            )}
+          </ResourceForm.CollapsibleSection>
+        </ResourceForm>
+      )}
     </>
   );
 }

src/components/KymaModules/KymaModulesList.js

@@ -1,96 +1,80 @@
+import { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ResourceDetails } from 'shared/components/ResourceDetails/ResourceDetails';
-import { DynamicPageHeader, FlexBox, Text } from '@ui5/webcomponents-react';
-import { HintButton } from 'shared/components/DescriptionHint/DescriptionHint';
-import { useState } from 'react';
-import {
-  apiGroup,
-  apiVersion,
-  Create,
-  ReleaseChannelDescription,
-  ResourceDescription,
-  resourceType,
-} from 'components/KymaModules';
+
+import { Create, ResourceDescription } from 'components/KymaModules';
 import { Spinner } from 'shared/components/Spinner/Spinner';
-import { Label } from 'shared/ResourceForm/components/Label';
-import { useModuleTemplatesQuery } from './kymaModulesQueries';
 import { ModulesList } from './components/ModulesList';
+import { KymaModuleContext } from './providers/KymaModuleProvider';
+import { DynamicPageComponent } from 'shared/components/DynamicPageComponent/DynamicPageComponent';
+import { ResourceCreate } from 'shared/components/ResourceCreate/ResourceCreate';
+import { ErrorBoundary } from 'shared/components/ErrorBoundary/ErrorBoundary';
+import { useProtectedResources } from 'shared/hooks/useProtectedResources';
 
-export default function KymaModulesList({
-  resourceName,
-  resourceUrl,
-  kymaResource,
-  kymaResourceLoading,
-  selectedModules,
-  namespaced,
-  setOpenedModuleIndex,
-  handleResourceDelete,
-}) {
+export default function KymaModulesList({ namespaced }) {
   const { t } = useTranslation();
-  const [
-    showReleaseChannelTitleDescription,
-    setShowReleaseChannelTitleDescription,
-  ] = useState(false);
-
-  const namespace = 'kyma-system';
 
-  // Fetching all Module Templates can be replcaed with fetching one by one from api after implementing https://github.com/kyma-project/lifecycle-manager/issues/2232
   const {
-    data: moduleTemplates,
-    loading: moduleTemplateLoading,
-  } = useModuleTemplatesQuery({ skip: !resourceName });
-  if (moduleTemplateLoading || kymaResourceLoading) {
+    resourceName,
+    resourceUrl,
+    kymaResource,
+    kymaResourceLoading,
+    selectedModules,
+    moduleTemplates,
+    moduleTemplatesLoading,
+    setOpenedModuleIndex,
+    handleResourceDelete,
+  } = useContext(KymaModuleContext);
+  const { isProtected, protectedResourceWarning } = useProtectedResources();
+
+  if (moduleTemplatesLoading || kymaResourceLoading) {
     return <Spinner />;
   }
 
   return (
-    <ResourceDetails
+    <DynamicPageComponent
       className="kyma-modules"
+      showYamlTab={false}
       layoutNumber="startColumn"
-      windowTitle={t('kyma-modules.title')}
-      headerContent={
-        <DynamicPageHeader className="no-shadow">
-          <FlexBox alignItems="Center">
-            <Label showColon>{t('kyma-modules.release-channel')}</Label>
-            <Text style={{ marginRight: '0.2rem' }}> </Text>
-            <Text>{kymaResource?.spec.channel}</Text>
-            <HintButton
-              className="sap-margin-begin-tiny"
-              setShowTitleDescription={setShowReleaseChannelTitleDescription}
-              showTitleDescription={showReleaseChannelTitleDescription}
-              description={ReleaseChannelDescription}
-              ariaTitle={t('kyma-modules.release-channel')}
+      title={t('kyma-modules.title')}
+      description={ResourceDescription}
+      content={
+        <>
+          {kymaResource && (
+            <ModulesList
+              key="kyma-modules-list"
+              resource={kymaResource}
+              moduleTemplates={moduleTemplates}
+              resourceName={resourceName}
+              selectedModules={selectedModules}
+              kymaResource={kymaResource}
+              namespaced={namespaced}
+              resourceUrl={resourceUrl}
+              setOpenedModuleIndex={setOpenedModuleIndex}
+              handleResourceDelete={handleResourceDelete}
             />
-          </FlexBox>
-        </DynamicPageHeader>
+          )}
+        </>
       }
-      customComponents={[
-        resource => (
-          <ModulesList
-            key="kyma-modules-list"
-            resource={resource}
-            moduleTemplates={moduleTemplates}
-            resourceName={resourceName}
-            selectedModules={selectedModules}
-            kymaResource={kymaResource}
-            namespaced={namespaced}
-            resourceUrl={resourceUrl}
-            setOpenedModuleIndex={setOpenedModuleIndex}
-            handleResourceDelete={handleResourceDelete}
-          />
-        ),
-      ]}
-      apiGroup={apiGroup}
-      apiVersion={apiVersion}
-      resourceUrl={resourceUrl}
-      resourceType={resourceType}
-      resourceName={resourceName}
-      namespace={namespace}
-      customTitle={t('kyma-modules.title')}
-      headerDescription={ResourceDescription}
-      createResourceForm={Create}
-      disableResourceDetailsCard
-      disableDelete
+      inlineEditForm={() => (
+        <ResourceCreate
+          isEdit={true}
+          confirmText={t('common.buttons.save')}
+          protectedResource={isProtected(kymaResource)}
+          protectedResourceWarning={protectedResourceWarning(
+            kymaResource,
+            true,
+          )}
+          renderForm={props => (
+            <ErrorBoundary>
+              <Create
+                resource={kymaResource}
+                resourceUrl={resourceUrl}
+                {...props}
+              />
+            </ErrorBoundary>
+          )}
+        />
+      )}
     />
   );
 }

src/components/KymaModules/components/ModulesList.tsx

@@ -300,6 +300,7 @@ export const ModulesList = ({
           <Button
             key="add-module"
             design="Emphasized"
+            disabled={!resource}
             onClick={handleShowAddModule}
           >
             {t('common.buttons.add')}

src/components/KymaModules/index.tsx

@@ -17,12 +17,3 @@ export const ResourceDescription = (
     }
   />
 );
-
-export const ReleaseChannelDescription = (
-  <Description
-    i18nKey={'kyma-modules.release-channel-description'}
-    url={
-      'https://help.sap.com/docs/btp/sap-business-technology-platform/kyma-s-modular-approach?locale=en-US#kyma-release-channels'
-    }
-  />
-);

src/components/KymaModules/kymaModulesNode.ts

@@ -1,4 +1,4 @@
-import { configFeaturesNames, NavNode } from 'state/types';
+import { NavNode } from 'state/types';
 
 export const kymaModulesNavNode: NavNode = {
   category: 'Configuration',
@@ -7,7 +7,7 @@ export const kymaModulesNavNode: NavNode = {
   pathSegment: 'kymamodules',
   label: 'Modules',
   namespaced: false,
-  requiredFeatures: [configFeaturesNames.EXTENSIBILITY],
+  requiredFeatures: [],
   apiGroup: '',
   apiVersion: 'v1',
 };