feat(homepage): update quickaccess card icon rendering logic (#1578)

Author: debsmita1

workspaces/homepage/.changeset/loud-weeks-tie.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-dynamic-home-page': patch
+---
+
+update quickaccess card's icon rendering logic

workspaces/homepage/packages/app/src/App.tsx

@@ -60,6 +60,7 @@ import {
   DynamicCustomizableHomePage,
   VisitListener,
   OnboardingSection,
+  QuickAccessCard,
   EntitySection,
   TemplateSection,
   defaultLayouts,
@@ -115,6 +116,12 @@ const mountPoints: HomePageCardMountPoint[] = [
       layouts: defaultLayouts.onboarding,
     },
   },
+  {
+    Component: QuickAccessCard,
+    config: {
+      layouts: defaultLayouts.quickAccessCard,
+    },
+  },
   {
     Component: EntitySection,
     config: {

workspaces/homepage/plugins/dynamic-home-page/report.api.md

@@ -114,6 +114,38 @@ export const defaultLayouts: {
             h: number;
         };
     };
+    quickAccessCard: {
+        xl: {
+            w: number;
+            h: number;
+            x: number;
+        };
+        lg: {
+            w: number;
+            h: number;
+            x: number;
+        };
+        md: {
+            w: number;
+            h: number;
+            x: number;
+        };
+        sm: {
+            w: number;
+            h: number;
+            x: number;
+        };
+        xs: {
+            w: number;
+            h: number;
+            x: number;
+        };
+        xxs: {
+            w: number;
+            h: number;
+            x: number;
+        };
+    };
 };
 
 // @public

workspaces/homepage/plugins/dynamic-home-page/src/components/QuickAccessCard.tsx

@@ -28,6 +28,7 @@ import { makeStyles } from 'tss-react/mui';
 
 import { useQuickAccessLinks } from '../hooks/useQuickAccessLinks';
 import { useTranslation } from '../hooks/useTranslation';
+import { QuickAccessIcon } from './QuickAccessIcon';
 
 const useStyles = makeStyles()({
   center: {
@@ -36,10 +37,6 @@ const useStyles = makeStyles()({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  img: {
-    height: '40px',
-    width: 'auto',
-  },
   title: {
     '& div > div > div > div > p': {
       textTransform: 'uppercase',
@@ -89,13 +86,7 @@ export const QuickAccessCard = (props: QuickAccessCardProps) => {
             title={item.title}
             tools={item.links.map(link => ({
               ...link,
-              icon: (
-                <img
-                  className={classes.img}
-                  src={link.iconUrl}
-                  alt={link.label}
-                />
-              ),
+              icon: <QuickAccessIcon icon={link.iconUrl} alt={link.label} />,
             }))}
             // Component creation is allowed inside component props only
             // if prop name starts with `render`.

workspaces/homepage/plugins/dynamic-home-page/src/components/QuickAccessIcon.tsx

@@ -0,0 +1,72 @@
+/*
+ * Copyright Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { ReactElement } from 'react';
+import { makeStyles } from 'tss-react/mui';
+
+import { isValidElement } from 'react';
+import { useApp } from '@backstage/core-plugin-api';
+
+import MuiIcon from '@mui/material/Icon';
+
+const useStyles = makeStyles()({
+  img: {
+    height: '40px',
+    width: 'auto',
+  },
+});
+
+export const QuickAccessIcon = ({
+  icon,
+  alt,
+}: {
+  icon: string | ReactElement;
+  alt: string;
+}) => {
+  const { classes } = useStyles();
+  const app = useApp();
+
+  if (!icon) {
+    return null;
+  }
+
+  if (isValidElement(icon)) {
+    return icon;
+  }
+
+  const strIcon = icon as string;
+
+  const SystemIcon = app.getSystemIcon(strIcon);
+
+  if (SystemIcon) {
+    return <SystemIcon fontSize="large" />;
+  }
+
+  if (strIcon.startsWith('<svg')) {
+    const svgDataUri = `data:image/svg+xml;base64,${btoa(strIcon)}`;
+    return <img src={svgDataUri} className={classes.img} alt={alt} />;
+  }
+
+  if (
+    strIcon.startsWith('https://') ||
+    strIcon.startsWith('http://') ||
+    strIcon.startsWith('/')
+  ) {
+    return <img src={strIcon} className={classes.img} alt={alt} />;
+  }
+
+  return <MuiIcon baseClassName="material-icons-outlined">{strIcon}</MuiIcon>;
+};

workspaces/homepage/plugins/dynamic-home-page/src/defaults.ts

@@ -65,4 +65,12 @@ export const defaultLayouts = {
     xs: { w: 12, h: 7.5 },
     xxs: { w: 12, h: 13.5 },
   },
+  quickAccessCard: {
+    xl: { w: 6, h: 8, x: 6 },
+    lg: { w: 6, h: 8, x: 6 },
+    md: { w: 6, h: 8, x: 6 },
+    sm: { w: 12, h: 8, x: 6 },
+    xs: { w: 12, h: 8, x: 6 },
+    xxs: { w: 12, h: 8, x: 6 },
+  },
 };