fix: Add checking subtitleText in empty list component (#4603)

* fix: add checking subtitleText in empty list component

* refactor: check subtitle text in ExtensibilityList instead of empty list component

* fix: pass translated description to empty list component

* fix: links not working in empty list component

* fix: change return value from object to string

Author: awoloszyn22

public/i18n/en.yaml

@@ -214,6 +214,7 @@ command-palette:
     rolebindings: Role Bindings
     serviceaccounts: Service Accounts
     serviceentries: Service Entries
+    services: Services
     statefulsets: Stateful Sets
     storageclasses: Storage Classes
     subscriptions: Subscriptions

src/components/Extensibility/ExtensibilityList.jsx

@@ -13,7 +13,7 @@ import { useGetCRbyPath } from './useGetCRbyPath';
 import ExtensibilityCreate from './ExtensibilityCreate';
 import {
   applyFormula,
-  getResourceDescAndUrl,
+  getResourceUrl,
   getTextSearchProperties,
   TranslationBundleContext,
   useCreateResourceDescription,
@@ -123,8 +123,7 @@ export const ExtensibilityListCore = ({
     defaultSearch: true,
   });
 
-  const { description: subtitleText, url: emptyListUrl } =
-    getResourceDescAndUrl(description);
+  const emptyListUrl = getResourceUrl(description);
 
   return (
     <ResourcesList
@@ -143,7 +142,7 @@ export const ExtensibilityListCore = ({
           textSearchProperties(defaultSearchProperties),
       }}
       emptyListProps={{
-        subtitleText: subtitleText,
+        subtitleText: newListProps?.description,
         url: emptyListUrl,
       }}
     />

src/components/Extensibility/helpers/index.js

@@ -168,12 +168,8 @@ export const useCreateResourceDescription = (descID) => {
   }
 };
 
-export const getResourceDescAndUrl = (descID) => {
-  if (!descID)
-    return {
-      description: null,
-      url: null,
-    };
+export const getResourceUrl = (descID) => {
+  if (!descID) return null;
 
   const helmBracketsRegex = /{{"(.*?)"}}/g;
   const trans = descID.replace(helmBracketsRegex, '$1');
@@ -183,19 +179,9 @@ export const getResourceDescAndUrl = (descID) => {
 
     if (links?.length >= 1) {
       const matchedLink = links[0];
-      const processedTrans = trans.replace(
-        matchedLink.matchedText,
-        `<0>${matchedLink.urlText}</0>`,
-      );
-      return {
-        description: processedTrans,
-        url: matchedLink.url,
-      };
+      return matchedLink.url;
     } else {
-      return {
-        description: trans,
-        url: null,
-      };
+      return null;
     }
   }
 };

src/shared/components/EmptyListComponent/EmptyListComponent.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import { Button, IllustratedMessage, Title } from '@ui5/webcomponents-react';
 import '@ui5/webcomponents-fiori/dist/illustrations/AllIllustrations';
 import { ExternalLink } from 'shared/components/ExternalLink/ExternalLink';
@@ -28,15 +28,6 @@ export const EmptyListComponent = ({
   image = 'NoEntries',
 }: EmptyListComponentProps) => {
   const { t } = useTranslation();
-  const subtitle = subtitleText ? (
-    <Trans
-      i18nKey={subtitleText}
-      defaults={subtitleText}
-      components={[<ExternalLink key={subtitleText} url={url} />]}
-    />
-  ) : (
-    ''
-  );
 
   if (showButton === undefined) {
     showButton = typeof onClick === 'function';
@@ -57,7 +48,9 @@ export const EmptyListComponent = ({
             {titleText}
           </Title>
         }
-        subtitle={<span className="sap-margin-top-small">{subtitle}</span>}
+        subtitle={
+          <span className="sap-margin-top-small">{subtitleText ?? ''}</span>
+        }
       >
         <div className="emptyListComponent__buttons">
           {showButton && <Button onClick={onClick}>{buttonText}</Button>}