feat: Add Community Modules sources list (#4420)

* List component added

* Get sources and move list to separate file

* Info button added

* Style correction

* Update public/i18n/en.yaml

Co-authored-by: Grzegorz Karaluch <grzegorz.karaluch@sap.com>

---------

Co-authored-by: Grzegorz Karaluch <grzegorz.karaluch@sap.com>

Author: KonradPietocha

public/i18n/en.yaml

@@ -958,13 +958,16 @@ modules:
     sla-warning: Community modules are contributed by the Kyma community and are not automatically updated or maintained. Additionally, they are not covered by any service level agreement (SLA). Use them at your own risk. <0>Learn more</0>
     source-yaml:
       add-source-yaml: Add Source YAML
+      add-source-yaml-info: Add your own custom modules to the Kyma cluster by adding their source files to this list. After that, your modules show up automatically in the list.
       example-format: 'Example format: http://github.com/project/repo/file.yaml'
       module-already-exists: <0> {{moduleTemplate}} </0> already exists in the <0> {{namespace}} </0> namespace.
       module-templates-to-add: ModuleTemplates to add
       modules-wont-be-added: Following ModuleTemplates already exist in the cluster and cannot be added.
       namespace-description: Namespace where ModuleTemplates are applied. If left empty, the namespace defined in the ModuleTemplates is used. Resources cannot be created in the kyma-system namespace.
       no-module-templates: No ModuleTemplates to add.
+      no-source-yaml: No source YAML added.
       source-yaml-url: Source YAML URL
+      source-yamls-header: Source YAMLs
     title: Community Modules
 namespaces:
   create-modal:

src/components/Modules/community/CommunityModulesAddModule.tsx

@@ -45,6 +45,7 @@ import {
 import { UnsavedMessageBox } from 'shared/components/UnsavedMessageBox/UnsavedMessageBox';
 import { createPortal } from 'react-dom';
 import { Description } from 'shared/components/Description/Description';
+import { CommunityModulesSourcesList } from './components/CommunityModulesSourcesList';
 
 type VersionDisplayInfo = {
   moduleTemplate: {
@@ -384,6 +385,7 @@ export default function CommunityModulesAddModule(props: any) {
                 url={'https://kyma-project.io/#/community-modules/user/README'}
               />
             </MessageStrip>
+            <CommunityModulesSourcesList />
             {communityModulesToDisplay?.length !== 0 ? (
               renderCards()
             ) : (

src/components/Modules/community/components/AddSourceYamls.tsx

@@ -191,11 +191,12 @@ export const AddSourceYamls = () => {
         accessibleName="add-yamls"
         design="Emphasized"
         key="add-yamls"
+        slot="action"
         onClick={() => {
           setShowAddSource(true);
         }}
       >
-        {t('modules.community.source-yaml.add-source-yaml')}
+        {t('common.buttons.add')}
       </Button>
 
       {showAddSource &&

src/components/Modules/community/components/CommunityModulesSourcesList.scss

@@ -0,0 +1,15 @@
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 1rem;
+
+  &__title {
+    display: flex;
+    justify-content: start;
+    align-items: center;
+  }
+}
+.list-top-separator {
+  border-top: 1px solid var(--sapGroup_TitleBorderColor);
+}

src/components/Modules/community/components/CommunityModulesSourcesList.tsx

@@ -0,0 +1,94 @@
+import { useTranslation } from 'react-i18next';
+import {
+  Card,
+  Link,
+  List,
+  ListItemStandard,
+  Title,
+} from '@ui5/webcomponents-react';
+import 'components/Modules/community/components/CommunityModulesSourcesList.scss';
+import { AddSourceYamls } from './AddSourceYamls';
+import { useContext, useState } from 'react';
+import { ModuleTemplatesContext } from 'components/Modules/providers/ModuleTemplatesProvider';
+import { Spinner } from 'shared/components/Spinner/Spinner';
+import { HintButton } from 'shared/components/HintButton/HintButton';
+
+const ListElements = ({ sources }: { sources: string[] }) => {
+  const { t } = useTranslation();
+
+  if (!sources.length) {
+    return (
+      <ListItemStandard
+        text={t('modules.community.source-yaml.no-source-yaml')}
+      />
+    );
+  }
+  return (
+    <>
+      {sources.map((sourceYaml, ind) => (
+        <ListItemStandard key={`${ind}-${sourceYaml}`}>
+          <Link design="Default" href={sourceYaml} target="_blank">
+            {sourceYaml}
+          </Link>
+        </ListItemStandard>
+      ))}
+    </>
+  );
+};
+
+export const CommunityModulesSourcesList = () => {
+  const { t } = useTranslation();
+  const { moduleTemplatesLoading, communityModuleTemplates } = useContext(
+    ModuleTemplatesContext,
+  );
+  const [showTitleDescription, setShowTitleDescription] = useState(false);
+
+  const getSources = () => {
+    const sources = (communityModuleTemplates?.items ?? [])
+      .map((item: any) => {
+        return item?.metadata?.annotations?.source;
+      })
+      .filter(Boolean);
+    return [...new Set(sources)];
+  };
+
+  return (
+    <Card
+      className="sap-margin-top-small"
+      accessibleName={t('modules.community.source-yaml.source-yamls-header')}
+      header={
+        <div className="card-header">
+          <div className="card-header__title">
+            <Title level="H5">
+              {t('modules.community.source-yaml.source-yamls-header')}
+            </Title>
+            <HintButton
+              className="sap-margin-begin-tiny"
+              setShowTitleDescription={setShowTitleDescription}
+              description={t(
+                'modules.community.source-yaml.add-source-yaml-info',
+              )}
+              showTitleDescription={showTitleDescription}
+              ariaTitle={t('modules.community.source-yaml.source-yamls-header')}
+            />
+          </div>
+          <AddSourceYamls />
+        </div>
+      }
+    >
+      <List
+        // TODO: Delete will be implemented in the next task.
+        onItemDelete={(e) => console.log('DELETE', e)}
+        selectionMode="None" // change to => 'Delete' once deleting is implemented
+        separators="Inner"
+        className="list-top-separator"
+      >
+        {moduleTemplatesLoading ? (
+          <Spinner />
+        ) : (
+          <ListElements sources={getSources()} />
+        )}
+      </List>
+    </Card>
+  );
+};

src/resources/other/kymaModules.routes.jsx

@@ -16,7 +16,6 @@ import { usePrepareLayoutColumns } from 'shared/hooks/usePrepareLayout';
 import { KymaModuleContextProvider } from 'components/Modules/providers/KymaModuleProvider';
 import { ModuleTemplatesContextProvider } from 'components/Modules/providers/ModuleTemplatesProvider';
 import { CommunityModulesDeleteBoxContextProvider } from 'components/Modules/community/components/CommunityModulesDeleteBox';
-import { AddSourceYamls } from 'components/Modules/community/components/AddSourceYamls';
 import { CommunityModuleContextProvider } from 'components/Modules/community/providers/CommunityModuleProvider';
 import { CommunityModulesUploadProvider } from 'components/Modules/community/providers/CommunitModulesInstalationProvider';
 import YamlUploadDialog from 'resources/Namespaces/YamlUpload/YamlUploadDialog';
@@ -101,8 +100,6 @@ const ColumnWrapper = ({
     </div>,
   );
 
-  const addSourceYAMLsButton = <AddSourceYamls />;
-
   const midColumnComponent = (
     <>
       {/* details */}
@@ -137,7 +134,6 @@ const ColumnWrapper = ({
             {layoutState?.showCreate?.createType === 'community' && (
               <ResourceCreate
                 title={t('modules.community.add-module')}
-                headerActions={addSourceYAMLsButton}
                 confirmText={t('common.buttons.add')}
                 layoutCloseCreateUrl={url}
                 renderForm={(renderProps) => {