Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
108 changes: 108 additions & 0 deletions dashboard/components/avatar/Avatar.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
import type { Meta, StoryObj } from '@storybook/react';
import { allProviders, IntegrationProvider } from '@utils/providerHelper';
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'],
args: {
size: 48
}
};

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 AmazonWebServices: Story = {
args: {
avatarName: allProviders.AWS
}
};

export const GoogleCloudPlatform: Story = {
args: {
avatarName: allProviders.GCP
}
};

export const DigitalOcean: Story = {
args: {
avatarName: allProviders.DIGITAL_OCEAN
}
};

export const Azure: Story = {
args: {
avatarName: allProviders.AZURE
}
};

export const Civo: Story = {
args: {
avatarName: allProviders.CIVO
}
};

export const Kubernetes: Story = {
args: {
avatarName: allProviders.KUBERNETES
}
};

export const Linode: Story = {
args: {
avatarName: allProviders.LINODE
}
};

export const Tencent: Story = {
args: {
avatarName: allProviders.TENCENT
}
};

export const OCI: Story = {
args: {
avatarName: allProviders.OCI
}
};

export const Scaleway: Story = {
args: {
avatarName: allProviders.SCALE_WAY
}
};

export const MongoDBAtlas: Story = {
name: 'MongoDB Atlas',
args: {
avatarName: allProviders.MONGODB_ATLAS
}
};

export const Terraform: Story = {
args: {
avatarName: allProviders.TERRAFORM
}
};

export const Pulumi: Story = {
args: {
avatarName: allProviders.PULUMI
}
};

export const Slack: Story = {
args: {
avatarName: IntegrationProvider.SLACK
}
};

export const Webhook: Story = {
args: {
avatarName: IntegrationProvider.WEBHOOK
}
};
22 changes: 22 additions & 0 deletions dashboard/components/avatar/Avatar.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import platform, { IntegrationProvider, Provider } from '@utils/providerHelper';
import Image from 'next/image';

export type AvatarProps = {
avatarName: Provider | IntegrationProvider;
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;
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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(() => {
Expand All @@ -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} />
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { NextRouter } from 'next/router';
import { ReactNode, useContext } from 'react';

import platform, { allProviders } from '@utils/providerHelper';
import GlobalAppContext from '../../layout/context/GlobalAppContext';
import Providers, { allProviders } from '../../../utils/providerHelper';
import { CloudAccount } from '../hooks/useCloudAccounts/useCloudAccount';

type CloudAccountsLayoutProps = {
Expand Down Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion dashboard/components/explorer/DependencyGraphWrapper.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ function DependencyGraphWrapper() {
);
}}
action={() => {
router.push('/');
router.push('/cloud-accounts');
}}
/>
</div>
Expand Down
28 changes: 17 additions & 11 deletions dashboard/components/inventory/components/InventorySidePanel.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
import SidepanelHeader from '@components/sidepanel/SidepanelHeader';
import SidepanelPage from '@components/sidepanel/SidepanelPage';
import Pill from '@components/pill/Pill';
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';
import Sidepanel from '../../sidepanel/Sidepanel';
import SidepanelTabs from '../../sidepanel/SidepanelTabs';
import Button from '@components/button/Button';
import CloseIcon from '@components/icons/CloseIcon';
import PlusIcon from '@components/icons/PlusIcon';
import Sidepanel from '@components/sidepanel/Sidepanel';
import SidepanelTabs from '@components/sidepanel/SidepanelTabs';
import formatNumber from '@utils/formatNumber';
import {
InventoryItem,
Pages,
Expand Down Expand Up @@ -53,8 +52,16 @@ function InventorySidePanel({
const getLastFetched = (date: string) => {
const dateLastFetched = new Date(date);
const today = new Date();
const aMonthAgo = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());
const aWeekAgo = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 7);
const aMonthAgo = new Date(
today.getFullYear(),
today.getMonth() - 1,
today.getDate()
);
const aWeekAgo = new Date(
today.getFullYear(),
today.getMonth(),
today.getDate() - 7
);
let message;
if (dateLastFetched > aMonthAgo) {
message = 'Since last month';
Expand All @@ -76,8 +83,7 @@ function InventorySidePanel({
subtitle={data.name}
closeModal={closeModal}
href={data.link}
imgSrc={providers.providerImg(data.provider)}
imgAlt={data.provider}
cloudProvider={data.provider}
>
{!data && bulkItems && (
<div className="flex flex-col gap-1 py-1">
Expand Down
18 changes: 3 additions & 15 deletions dashboard/components/inventory/components/InventoryTable.tsx
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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>
Expand Down
11 changes: 3 additions & 8 deletions dashboard/components/onboarding-wizard/PurplinCloud.tsx
Original file line number Diff line number Diff line change
@@ -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 (
Expand All @@ -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>
);
Expand Down
8 changes: 6 additions & 2 deletions dashboard/components/pill/Pill.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -49,10 +49,14 @@ function Pill({ status, children, textcase = 'lowercase' }: PillProps) {

return (
<div
className={`inline-flex items-start justify-start gap-2.5 rounded-3xl px-1.5 pb-1 pt-0.5 ${handleColor().background}`}
className={`inline-flex items-start justify-start gap-2.5 rounded-3xl px-1.5 pb-1 pt-0.5 ${
handleColor().background
}`}
>
<p
className={`${handleColor().text} font-sans text-xs font-normal ${textcase}`}
className={`${
handleColor().text
} font-sans text-xs font-normal ${textcase}`}
>
{children}
</p>
Expand Down
Loading
Loading