[Feat-1097] Add Avatar component, Optimize, Refactor and Improvements

dashboard/components/avatar/Avatar.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Avatar from './Avatar';
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta: Meta<typeof Avatar> = {
+  title: 'Komiser/Avatar',
+  component: Avatar,
+  tags: ['autodocs']
+};
+
+export default meta;
+type Story = StoryObj<typeof Avatar>;
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
+export const CloudProviders: Story = {
+  args: {
+    avatarName: 'aws',
+    size: 48
+  }
+};
+
+export const Integrations: Story = {
+  args: {
+    avatarName: 'slack',
+    size: 48
+  }
+};

dashboard/components/avatar/Avatar.tsx

@@ -0,0 +1,22 @@
+import platform, { Integration, Provider } from '@utils/providerHelper';
+import Image from 'next/image';
+
+export type AvatarProps = {
+  avatarName: Provider | Integration;
+  size?: number;
+};
+
+function Avatar({ avatarName, size = 24 }: AvatarProps) {
+  const src = platform.getImgSrc(avatarName) || 'unknown platform';
+  return (
+    <Image
+      src={src}
+      alt={`${avatarName} logo`}
+      width={size}
+      height={size}
+      className="rounded-full border border-gray-100"
+    />
+  );
+}
+
+export default Avatar;

dashboard/components/cloud-account/components/CloudAccountItem.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef } from 'react';
-import Image from 'next/image';
-import providers from '@utils/providerHelper';
+import Avatar from '@components/avatar/Avatar';
+import platform from '@utils/providerHelper';
 import { CloudAccount } from '../hooks/useCloudAccounts/useCloudAccount';
 import CloudAccountStatus from './CloudAccountStatus';
 import More2Icon from '../../icons/More2Icon';
@@ -21,7 +21,7 @@ export default function CloudAccountItem({
   setCloudAccountItem: (cloudAccountItem: CloudAccount) => void;
 }) {
   const optionsRef = useRef<HTMLDivElement | null>(null);
-  const { id, provider, name, status } = account;
+  const { id, provider: cloudProvider, name, status } = account;
   const [isOpen, setIsOpen] = useState(false);
 
   useEffect(() => {
@@ -47,17 +47,10 @@ export default function CloudAccountItem({
       onClick={() => openModal(account)}
       className="relative my-5 flex w-full items-center gap-4 rounded-lg border-2 border-black-170 bg-white p-6 text-black-900 transition-colors"
     >
-      <Image
-        src={providers.providerImg(provider) as string}
-        alt={`${name} image`}
-        width={150}
-        height={150}
-        className="h-12 w-12 rounded-full"
-      />
-
+      <Avatar avatarName={cloudProvider} size={48} />
       <div className="mr-auto">
         <p className="font-bold">{name}</p>
-        <p className="text-black-300">{providers.providerLabel(provider)}</p>
+        <p className="text-black-300">{platform.getLabel(cloudProvider)}</p>
       </div>
 
       <CloudAccountStatus status={status} />

dashboard/components/cloud-account/components/CloudAccountsLayout.tsx

@@ -2,7 +2,7 @@ import { NextRouter } from 'next/router';
 import { ReactNode, useContext } from 'react';
 
 import GlobalAppContext from '../../layout/context/GlobalAppContext';
-import Providers, { allProviders } from '../../../utils/providerHelper';
+import platform, { allProviders } from '../../../utils/providerHelper';
 import { CloudAccount } from '../hooks/useCloudAccounts/useCloudAccount';
 
 type CloudAccountsLayoutProps = {
@@ -73,7 +73,7 @@ function CloudAccountsLayout({
                   >
                     <div className={isActive ? 'ml-[-2px]' : ''}>
                       <p className="w-[188px] truncate">
-                        {Providers.providerLabel(provider)}
+                        {platform.getLabel(provider)}
                       </p>
                     </div>
                   </button>

dashboard/components/cloud-account/components/CloudAccountsSidePanel.tsx

@@ -11,10 +11,8 @@ import OciAccountDetails from '@components/account-details/OciAccountDetails';
 import ScalewayAccountDetails from '@components/account-details/ScalewayAccountDetails';
 import { getPayloadFromForm } from '@utils/cloudAccountHelpers';
 import { ToastProps } from '@components/toast/Toast';
-import providers, {
-  allProviders,
-  Provider
-} from '../../../utils/providerHelper';
+import Avatar from '@components/avatar/Avatar';
+import { allProviders, Provider } from '../../../utils/providerHelper';
 import AwsAccountDetails from '../../account-details/AwsAccountDetails';
 import Button from '../../button/Button';
 import Sidepanel from '../../sidepanel/Sidepanel';
@@ -132,14 +130,7 @@ function CloudAccountsSidePanel({
           <div className="flex flex-wrap-reverse items-center justify-between gap-6 sm:flex-nowrap">
             {cloudAccount && (
               <div className="flex flex-wrap items-center gap-4 sm:flex-nowrap">
-                <picture className="flex-shrink-0">
-                  <img
-                    src={providers.providerImg(cloudAccount.provider)}
-                    className="h-10 w-10 rounded-full"
-                    alt={cloudAccount.provider}
-                  />
-                </picture>
-
+                <Avatar avatarName={cloudAccount.provider} size={40} />
                 <div className="flex flex-col gap-1">
                   <div className="flex max-w-[14rem] items-center gap-1">
                     <p className="truncate font-medium text-black-900">

dashboard/components/explorer/DependencyGraphWrapper.tsx

@@ -110,7 +110,7 @@ function DependencyGraphWrapper() {
                 );
               }}
               action={() => {
-                router.push('/');
+                router.push('/cloud-accounts');
               }}
             />
           </div>

dashboard/components/explorer/filter/DependendencyGraphFilter.tsx

@@ -32,7 +32,7 @@ function DependendencyGraphFilter({
       {!hasFilters ? (
         <>
           <div
-            className="flex w-fit cursor-pointer items-center gap-1 rounded-md border-2 border-dashed border-black-200 border-opacity-60 px-3 py-1 overflow-hidden"
+            className="flex w-fit cursor-pointer items-center gap-1 overflow-hidden rounded-md border-2 border-dashed border-black-200 border-opacity-60 px-3 py-1"
             onClick={toggle}
           >
             <PlusIcon width={16} height={16} />

dashboard/components/inventory/components/InventorySidePanel.tsx

@@ -1,5 +1,5 @@
+import Avatar from '@components/avatar/Avatar';
 import formatNumber from '../../../utils/formatNumber';
-import providers from '../../../utils/providerHelper';
 import Button from '../../button/Button';
 import CloseIcon from '../../icons/CloseIcon';
 import PlusIcon from '../../icons/PlusIcon';
@@ -52,14 +52,7 @@ function InventorySidePanel({
         <div className="flex flex-wrap-reverse items-center justify-between gap-6 sm:flex-nowrap">
           {data && (
             <div className="flex flex-wrap items-center gap-4 sm:flex-nowrap">
-              <picture className="flex-shrink-0">
-                <img
-                  src={providers.providerImg(data.provider)}
-                  className="h-8 w-8 rounded-full"
-                  alt={data.provider}
-                />
-              </picture>
-
+              <Avatar avatarName={data.provider} size={48} />
               <div className="flex flex-col gap-1 py-1">
                 <p className="... w-48 truncate font-medium text-black-900">
                   {data.service}

dashboard/components/inventory/components/InventoryTable.tsx

@@ -1,8 +1,8 @@
 import { ToastProps } from '@components/toast/Toast';
 import { NextRouter } from 'next/router';
 import { ChangeEvent } from 'react';
+import Avatar from '@components/avatar/Avatar';
 import formatNumber from '../../../utils/formatNumber';
-import providers from '../../../utils/providerHelper';
 import Checkbox from '../../checkbox/Checkbox';
 import SkeletonInventory from '../../skeleton/SkeletonInventory';
 import {
@@ -118,13 +118,7 @@ function InventoryTable({
                         className="min-w-[7rem] cursor-pointer py-4 pl-2 pr-6"
                       >
                         <div className="flex items-center gap-3">
-                          <picture className="flex-shrink-0">
-                            <img
-                              src={providers.providerImg(item.provider)}
-                              className="h-6 w-6 rounded-full"
-                              alt={item.provider}
-                            />
-                          </picture>
+                          <Avatar avatarName={item.provider} />
                           <span>{item.provider}</span>
                         </div>
                       </td>
@@ -203,13 +197,7 @@ function InventoryTable({
                         className="min-w-[7rem] cursor-pointer py-4 pl-2 pr-6"
                       >
                         <div className="flex items-center gap-3">
-                          <picture className="flex-shrink-0">
-                            <img
-                              src={providers.providerImg(item.provider)}
-                              className="h-6 w-6 rounded-full"
-                              alt={item.provider}
-                            />
-                          </picture>
+                          <Avatar avatarName={item.provider} />
                           <span>{item.provider}</span>
                         </div>
                       </td>

dashboard/components/inventory/components/view/InventoryView.tsx

@@ -1,8 +1,9 @@
 import Image from 'next/image';
 import { NextRouter } from 'next/router';
 import { ToastProps } from '@components/toast/Toast';
+import Avatar from '@components/avatar/Avatar';
 import formatNumber from '../../../../utils/formatNumber';
-import providers, { Provider } from '../../../../utils/providerHelper';
+import { Provider } from '../../../../utils/providerHelper';
 import Button from '../../../button/Button';
 import Checkbox from '../../../checkbox/Checkbox';
 import AlertIcon from '../../../icons/AlertIcon';
@@ -223,15 +224,7 @@ function InventoryView({
                         </td>
                         <td className="py-4 pl-2 pr-6">
                           <div className="flex items-center gap-2">
-                            <picture className="flex-shrink-0">
-                              <img
-                                src={providers.providerImg(
-                                  item.provider as Provider
-                                )}
-                                className="h-6 w-6 rounded-full"
-                                alt={item.provider}
-                              />
-                            </picture>
+                            <Avatar avatarName={item.provider as Provider} />
                             <span>{item.provider}</span>
                           </div>
                         </td>

dashboard/components/onboarding-wizard/PurplinCloud.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import Image from 'next/image';
 
-import ProviderCls, { Provider } from '../../utils/providerHelper';
+import Avatar from '@components/avatar/Avatar';
+import { Provider } from '../../utils/providerHelper';
 
 function PurplinCloud({ provider }: { provider: Provider }) {
   return (
@@ -13,13 +14,7 @@ function PurplinCloud({ provider }: { provider: Provider }) {
         height={120}
       />
       <div className="absolute left-[48%] top-[53%] -translate-x-1/2 -translate-y-1/2 transform rounded-full">
-        <Image
-          src={ProviderCls.providerImg(provider) as string}
-          alt={`${provider} Logo`}
-          className="rounded-full shadow-md"
-          width={95}
-          height={95}
-        />
+        <Avatar avatarName={provider} size={96} />
       </div>
     </div>
   );

dashboard/pages/onboarding/choose-cloud.tsx

@@ -3,10 +3,8 @@ import Head from 'next/head';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 
-import ProviderCls, {
-  allProviders,
-  Provider
-} from '../../utils/providerHelper';
+import Avatar from '@components/avatar/Avatar';
+import platform, { allProviders, Provider } from '../../utils/providerHelper';
 
 import Button from '../../components/button/Button';
 import OnboardingWizardLayout, {
@@ -57,7 +55,7 @@ export default function ChooseCloud() {
               values={Object.values(allProviders)}
               handleChange={handleSelectChange}
               displayValues={Object.values(allProviders).map(value => ({
-                label: ProviderCls.providerLabel(value)
+                label: platform.getLabel(value)
               }))}
             />
           </div>
@@ -93,13 +91,7 @@ export default function ChooseCloud() {
               height={120}
             />
             <div className="absolute left-[48%] top-[53%] -translate-x-1/2 -translate-y-1/2 transform rounded-full">
-              <Image
-                src={ProviderCls.providerImg(provider) as string}
-                alt={`${provider} Logo`}
-                className="rounded-full shadow-md"
-                width={95}
-                height={95}
-              />
+              <Avatar avatarName={provider} size={96} />
             </div>
           </div>
           <Image