feat: Replace kyma extensions with Modules (#3573)

* Replace kyma extensions with Modules

* Adjust urls

Author: akucharska

kyma/environments/dev/extensions.json

@@ -5,9 +5,6 @@
   {
     "source": "extensions/discovery-and-network"
   },
-  {
-    "source": "extensions/kyma"
-  },
   {
     "source": "extensions/service-management"
   },

kyma/environments/prod/extensions.json

@@ -8,9 +8,6 @@
   {
     "source": "extensions/configuration"
   },
-  {
-    "source": "extensions/kyma"
-  },
   {
     "source": "extensions/service-management"
   },

kyma/environments/stage/extensions.json

@@ -8,9 +8,6 @@
   {
     "source": "extensions/configuration"
   },
-  {
-    "source": "extensions/kyma"
-  },
   {
     "source": "extensions/service-management"
   },

kyma/extensions/kyma/kyma.yaml

@@ -52,6 +52,7 @@ export default function KymaModulesList({
   selectedModules,
   setOpenedModuleIndex,
   detailsOpen,
+  namespaced,
 }) {
   const { t } = useTranslation();
   const [
@@ -60,7 +61,7 @@ export default function KymaModulesList({
   ] = useState(false);
   const setLayoutColumn = useSetRecoilState(columnLayoutState);
   const setIsFormOpen = useSetRecoilState(isFormOpenState);
-  const { clusterUrl } = useUrl();
+  const { clusterUrl, namespaceUrl } = useUrl();
 
   const { data: kymaExt } = useGetList(
     ext => ext.metadata.labels['app.kubernetes.io/part-of'] === 'Kyma',
@@ -325,27 +326,21 @@ export default function KymaModulesList({
         return;
       }
 
-      const path = moduleStatus?.resource?.metadata?.namespace
-        ? clusterUrl(
-            `kymamodules/namespaces/${
-              moduleStatus?.resource?.metadata?.namespace
-            }/${
-              isExtension
-                ? `${pluralize(
-                    moduleStatus?.resource?.kind || '',
-                  ).toLowerCase()}/${moduleStatus?.resource?.metadata?.name}`
-                : `${moduleCrd?.metadata?.name}/${moduleStatus?.resource?.metadata?.name}`
-            }`,
-          )
-        : clusterUrl(
-            `kymamodules/${
-              isExtension
-                ? `${pluralize(
-                    moduleStatus?.resource?.kind || '',
-                  ).toLowerCase()}/${moduleStatus?.resource?.metadata?.name}`
-                : `${moduleCrd?.metadata?.name}/${moduleStatus?.resource?.metadata?.name}`
-            }`,
-          );
+      const pathName = `${
+        isExtension
+          ? `${pluralize(moduleStatus?.resource?.kind || '').toLowerCase()}/${
+              moduleStatus?.resource?.metadata?.name
+            }`
+          : `${moduleCrd?.metadata?.name}/${moduleStatus?.resource?.metadata?.name}`
+      }`;
+
+      const partialPath = moduleStatus?.resource?.metadata?.namespace
+        ? `kymamodules/namespaces/${moduleStatus?.resource?.metadata?.namespace}/${pathName}`
+        : `kymamodules/${pathName}`;
+
+      const path = namespaced
+        ? namespaceUrl(partialPath)
+        : clusterUrl(partialPath);
 
       if (!isExtension) {
         setLayoutColumn({

src/components/KymaModules/KymaModulesList.js

@@ -24,18 +24,18 @@ const KymaModulesAddModule = React.lazy(() =>
   import('../../components/KymaModules/KymaModulesAddModule'),
 );
 
-const ColumnWraper = (defaultColumn = 'list') => {
+const ColumnWraper = ({ defaultColumn = 'list', namespaced = false }) => {
   const [layoutState, setLayoutColumn] = useRecoilState(columnLayoutState);
-  const { clusterUrl } = useUrl();
+  const { clusterUrl, namespaceUrl } = useUrl();
   const layout = 'OneColumn';
+  const url = namespaced
+    ? namespaceUrl('kymamodules')
+    : clusterUrl('kymamodules');
 
   if (layoutState.layout === layout) {
-    window.history.pushState(
-      window.history.state,
-      '',
-      `${clusterUrl('kymamodules')}`,
-    );
+    window.history.pushState(window.history.state, '', url);
   }
+
   const { resourceName, resourceType, namespace } = useParams();
 
   const initialLayoutState = {
@@ -145,7 +145,7 @@ const ColumnWraper = (defaultColumn = 'list') => {
   if (!layout && defaultColumn === 'details') {
     startColumnComponent = (
       <ExtensibilityDetails
-        layoutCloseCreateUrl={clusterUrl('kymamodules')}
+        layoutCloseCreateUrl={url}
         resourceName={layoutState?.midColumn?.resourceName || resourceName}
         resourceType={layoutState?.midColumn?.resourceType || resourceType}
         namespaceId={
@@ -175,6 +175,7 @@ const ColumnWraper = (defaultColumn = 'list') => {
         selectedModules={selectedModules}
         setOpenedModuleIndex={setOpenedModuleIndex}
         detailsOpen={detailsOpen}
+        namespaced={namespaced}
       />
     );
   }
@@ -183,7 +184,7 @@ const ColumnWraper = (defaultColumn = 'list') => {
   if (!layoutState?.showCreate && layoutState?.midColumn) {
     detailsMidColumn = (
       <ExtensibilityDetails
-        layoutCloseCreateUrl={clusterUrl('kymamodules')}
+        layoutCloseCreateUrl={url}
         resourceName={layoutState?.midColumn?.resourceName || resourceName}
         resourceType={layoutState?.midColumn?.resourceType || resourceType}
         namespaceId={
@@ -202,7 +203,7 @@ const ColumnWraper = (defaultColumn = 'list') => {
     <ResourceCreate
       title={t('kyma-modules.add-module')}
       confirmText={t('common.buttons.add')}
-      layoutCloseCreateUrl={clusterUrl('kymamodules')}
+      layoutCloseCreateUrl={url}
       renderForm={renderProps => {
         return (
           <ErrorBoundary>
@@ -263,5 +264,21 @@ export default (
       path="kymamodules/:resourceType/:resourceName"
       element={<ColumnWraper defaultColumn="details" />}
     />
+    <Route
+      path={'namespaces/:globalnamespace/kymamodules'}
+      element={
+        <Suspense fallback={<Spinner />}>
+          <ColumnWraper namespaced={true} />
+        </Suspense>
+      }
+    />
+    <Route
+      path="namespaces/:globalnamespace/kymamodules/namespaces/:namespace/:resourceType/:resourceName"
+      element={<ColumnWraper defaultColumn="details" namespaced={true} />}
+    />
+    <Route
+      path="namespaces/:globalnamespace/kymamodules/:resourceType/:resourceName"
+      element={<ColumnWraper defaultColumn="details" namespaced={true} />}
+    />
   </>
 );

src/resources/other/kymaModules.routes.js

@@ -11,6 +11,7 @@ import { namespaceOverviewNode } from 'resources/Namespaces/namespaceOverviewNod
 import * as secretMetadata from 'resources/Secrets';
 import * as crdMetadata from 'resources/CustomResourceDefinitions';
 import * as cmMetadata from 'resources/ConfigMaps';
+
 import { kymaModulesNavNode } from 'components/KymaModules/kymaModulesNode';
 
 export const addAdditionalNodes = (
@@ -29,11 +30,20 @@ export const addAdditionalNodes = (
     extensionsNavNode,
     configFeatures,
   );
+
   const cmIndex = findResourceIndex(cm, navNodes) + 1;
-  if (isExtEnabled && cmIndex && scope === 'cluster') {
-    addResource(extensionsNavNode, extNavList.length, extNavList);
+  if (isExtEnabled && cmIndex) {
+    if (scope === 'cluster') {
+      addResource(extensionsNavNode, extNavList.length, extNavList);
+    }
     if (kymaResources) {
-      addResource(kymaModulesNavNode, extNavList.length, extNavList);
+      addResource(
+        scope === 'cluster'
+          ? kymaModulesNavNode
+          : { ...kymaModulesNavNode, namespaced: true },
+        extNavList.length,
+        extNavList,
+      );
     }
   }