Skip to content

Commit

Permalink
Merge branch 'develop' into feature/1070-explorer-zoom-drag
Browse files Browse the repository at this point in the history
  • Loading branch information
mlabouardy authored Nov 2, 2023
2 parents 0d4ab28 + 6cffe29 commit 53cb64d
Showing 36 changed files with 297 additions and 266 deletions.
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;
17 changes: 5 additions & 12 deletions dashboard/components/cloud-account/components/CloudAccountItem.tsx
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';
@@ -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} />
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 = {
@@ -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>
Original file line number Diff line number Diff line change
@@ -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">
2 changes: 1 addition & 1 deletion dashboard/components/explorer/DependencyGraphWrapper.tsx
Original file line number Diff line number Diff line change
@@ -110,7 +110,7 @@ function DependencyGraphWrapper() {
);
}}
action={() => {
router.push('/');
router.push('/cloud-accounts');
}}
/>
</div>
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,
@@ -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';
@@ -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">
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 {
@@ -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>
13 changes: 3 additions & 10 deletions dashboard/components/inventory/components/view/InventoryView.tsx
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';
@@ -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>
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 (
@@ -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>
);
8 changes: 6 additions & 2 deletions dashboard/components/pill/Pill.tsx
Original file line number Diff line number Diff line change
@@ -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>
Loading

0 comments on commit 53cb64d

Please sign in to comment.