From 0a1a53e0bcf132a86c5b5014f850e7bae04a3a09 Mon Sep 17 00:00:00 2001 From: Nabarun Gogoi Date: Thu, 21 Dec 2023 16:42:06 +0530 Subject: [PATCH] Add chips to display different kinds of information (#20) * Add chip for showing deployment status * Add chip to display projects count * Display label if project search is not matching * Add chip to display domain is not connected * Fix text size in chips for deployment domain * Add chip to display if repository is private --------- Co-authored-by: neeraj --- packages/frontend/src/assets/deployments.json | 6 +- packages/frontend/src/assets/projects.json | 18 +++-- .../frontend/src/assets/repositories.json | 20 +++--- .../src/components/projects/ProjectCard.tsx | 2 +- .../src/components/projects/ProjectSearch.tsx | 65 +++++++++++-------- .../projects/create/ProjectRepoCard.tsx | 21 ++++-- .../projects/project/ActivityCard.tsx | 9 ++- .../projects/project/DeploymentsTabPanel.tsx | 8 ++- .../projects/project/OverviewTabPanel.tsx | 36 +++++++--- .../deployments/DeploymentDetailsCard.tsx | 31 +++++++-- packages/frontend/src/pages/Projects.tsx | 14 ++-- packages/frontend/src/types/project.ts | 1 + 12 files changed, 153 insertions(+), 78 deletions(-) diff --git a/packages/frontend/src/assets/deployments.json b/packages/frontend/src/assets/deployments.json index 6034e7e2..c2805124 100644 --- a/packages/frontend/src/assets/deployments.json +++ b/packages/frontend/src/assets/deployments.json @@ -1,6 +1,6 @@ [ { - "title": "nextjs-bolerplate-9t44zbky4dg-bygideon-projects", + "title": "nextjs-boilerplate-9t44zbky4dg-bygideon-projects", "status": "Building", "environment": "Production", "branch": "prod", @@ -12,7 +12,7 @@ "updatedAt": "2023-12-11T04:20:00" }, { - "title": "nextjs-bolerplate-9232dwky4dg-bygideon-projects", + "title": "nextjs-boilerplate-9232dwky4dg-bygideon-projects", "status": "Ready", "environment": "Preview", "branch": "prod", @@ -24,7 +24,7 @@ "updatedAt": "2023-12-11T04:20:00" }, { - "title": "nextjs-bolerplate-9saa22y4dg-bygideon-projects", + "title": "nextjs-boilerplate-9saa22y4dg-bygideon-projects", "status": "Error", "environment": "Production", "branch": "main", diff --git a/packages/frontend/src/assets/projects.json b/packages/frontend/src/assets/projects.json index 584aeb9e..c9f9e419 100644 --- a/packages/frontend/src/assets/projects.json +++ b/packages/frontend/src/assets/projects.json @@ -4,8 +4,9 @@ "icon": "^", "name": "iglotools", "title": "Iglotools", + "domain": "", "organization": "Airfoil", - "domain": "iglotools.co", + "url": "iglotools.co", "createdAt": "2023-12-07T04:20:00", "createdBy": "Alice", "deployment": "iglotools.snowballtools.co", @@ -21,8 +22,9 @@ "icon": "^", "name": "snowball-starter-kit", "title": "Snowball Starter Kit", + "domain": "", "organization": "Snowball", - "domain": "starterkit.snowballtools.com", + "url": "starterkit.snowballtools.com", "createdAt": "2023-12-04T04:20:00", "createdBy": "Bob", "deployment": "deploy.snowballtools.com", @@ -38,8 +40,9 @@ "icon": "^", "name": "web3-android", "title": "Web3 Android", + "domain": "", "organization": "Personal", - "domain": "web3fordroids.com", + "url": "web3fordroids.com", "createdAt": "2023-12-01T04:20:00", "createdBy": "Charlie", "deployment": "deploy.web3fordroids.com", @@ -55,8 +58,9 @@ "icon": "^", "name": "passkeys-demo", "title": "Passkeys Demo", + "domain": "", "organization": "Airfoil", - "domain": "passkeys.iglootools.xyz", + "url": "passkeys.iglootools.xyz", "createdAt": "2023-12-01T04:20:00", "createdBy": "David", "deployment": "demo.passkeys.xyz", @@ -72,8 +76,9 @@ "icon": "^", "name": "iglootools", "title": "Iglootools", + "domain": "", "organization": "Airfoil", - "domain": "iglotools.xyz", + "url": "iglotools.xyz", "createdAt": "2023-12-11T04:20:00", "createdBy": "Erin", "deployment": "staging.snowballtools.com", @@ -89,8 +94,9 @@ "icon": "^", "name": "iglootools", "title": "Iglootools", + "domain": "", "organization": "Airfoil", - "domain": "iglotools.xyz", + "url": "iglotools.xyz", "createdAt": "2023-12-11T04:20:00", "createdBy": "Frank", "deployment": "iglotools.snowballtools.com", diff --git a/packages/frontend/src/assets/repositories.json b/packages/frontend/src/assets/repositories.json index f9364789..04a1cff1 100644 --- a/packages/frontend/src/assets/repositories.json +++ b/packages/frontend/src/assets/repositories.json @@ -2,31 +2,31 @@ { "title": "project-101", "updatedAt": "2023-12-21T08:30:00", - "user": "bob" + "user": "bob", + "private": false }, { "title": "project-102", "updatedAt": "2023-12-21T08:30:00", - "user": "alice" + "user": "alice", + "private": true }, { "title": "project-103", "updatedAt": "2023-12-21T04:20:00", - "user": "charlie" + "user": "charlie", + "private": false }, { "title": "project-104", "updatedAt": "2023-12-21T04:27:00", - "user": "alice" + "user": "alice", + "private": false }, { "title": "project-105", "updatedAt": "2023-12-21T04:41:00", - "user": "ivan" - }, - { - "title": "project-106", - "updatedAt": "2023-12-21T04:32:00", - "user": "david" + "user": "ivan", + "private": false } ] diff --git a/packages/frontend/src/components/projects/ProjectCard.tsx b/packages/frontend/src/components/projects/ProjectCard.tsx index 25125700..afa24369 100644 --- a/packages/frontend/src/components/projects/ProjectCard.tsx +++ b/packages/frontend/src/components/projects/ProjectCard.tsx @@ -25,7 +25,7 @@ const ProjectCard: React.FC = ({ project }) => { {project.name} - {project.domain} + {project.url} diff --git a/packages/frontend/src/components/projects/ProjectSearch.tsx b/packages/frontend/src/components/projects/ProjectSearch.tsx index baf37937..e5037431 100644 --- a/packages/frontend/src/components/projects/ProjectSearch.tsx +++ b/packages/frontend/src/components/projects/ProjectSearch.tsx @@ -27,6 +27,7 @@ const ProjectSearch = ({ onChange }: ProjectsSearchProps) => { getInputProps, getItemProps, highlightedIndex, + inputValue, } = useCombobox({ onInputValueChange({ inputValue }) { setItems( @@ -57,39 +58,47 @@ const ProjectSearch = ({ onChange }: ProjectsSearchProps) => {
-
- - Suggestions - -
- {items.map((item, index) => ( - - - ^ - -
- - {item.title} - - - {item.organization} + {items.length ? ( + <> +
+ + Suggestions
- - ))} + {items.map((item, index) => ( + + + ^ + +
+ + {item.title} + + + {item.organization} + +
+ + ))} + + ) : ( +
+ ^ No projects matching this name +
+ )}
diff --git a/packages/frontend/src/components/projects/create/ProjectRepoCard.tsx b/packages/frontend/src/components/projects/create/ProjectRepoCard.tsx index 67703f86..158de6bc 100644 --- a/packages/frontend/src/components/projects/create/ProjectRepoCard.tsx +++ b/packages/frontend/src/components/projects/create/ProjectRepoCard.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { IconButton } from '@material-tailwind/react'; +import { Chip, IconButton } from '@material-tailwind/react'; import { relativeTime } from '../../../utils/time'; @@ -8,6 +8,7 @@ interface RepositoryDetails { title: string; updatedAt: string; user: string; + private: boolean; } interface ProjectRepoCardProps { @@ -19,9 +20,21 @@ const ProjectRepoCard: React.FC = ({ repository }) => {
^
-

- {repository.user}/{repository.title} -

+
+ + {repository.user}/{repository.title} + + {repository.private ? ( + + ) : ( + '' + )} +

{relativeTime(repository.updatedAt)}

diff --git a/packages/frontend/src/components/projects/project/ActivityCard.tsx b/packages/frontend/src/components/projects/project/ActivityCard.tsx index 4d2b8497..9a8f473a 100644 --- a/packages/frontend/src/components/projects/project/ActivityCard.tsx +++ b/packages/frontend/src/components/projects/project/ActivityCard.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { Typography } from '@material-tailwind/react'; +import { Typography, IconButton } from '@material-tailwind/react'; import { relativeTime } from '../../../utils/time'; @@ -18,7 +18,7 @@ interface ActivityCardProps { const ActivityCard = ({ activity }: ActivityCardProps) => { return ( -
+
{activity.authorAvatar}
@@ -30,6 +30,11 @@ const ActivityCard = ({ activity }: ActivityCardProps) => { {activity.message}
+
+ + {'>'} + +
); }; diff --git a/packages/frontend/src/components/projects/project/DeploymentsTabPanel.tsx b/packages/frontend/src/components/projects/project/DeploymentsTabPanel.tsx index 64d1715b..ae21894b 100644 --- a/packages/frontend/src/components/projects/project/DeploymentsTabPanel.tsx +++ b/packages/frontend/src/components/projects/project/DeploymentsTabPanel.tsx @@ -3,7 +3,9 @@ import React, { useCallback, useMemo, useState } from 'react'; import { Button, Typography } from '@material-tailwind/react'; import deploymentData from '../../../assets/deployments.json'; -import DeployDetailsCard from './deployments/DeploymentDetailsCard'; +import DeployDetailsCard, { + DeploymentDetails, +} from './deployments/DeploymentDetailsCard'; import FilterForm, { FilterValue, StatusOptions, @@ -17,7 +19,7 @@ const DEFAULT_FILTER_VALUE: FilterValue = { const DeploymentsTabPanel = () => { const [filterValue, setFilterValue] = useState(DEFAULT_FILTER_VALUE); - const filteredDeployments = useMemo(() => { + const filteredDeployments = useMemo(() => { return deploymentData.filter((deployment) => { // Searched branch filter const branchMatch = @@ -37,7 +39,7 @@ const DeploymentsTabPanel = () => { new Date(deployment.updatedAt) <= filterValue.updateAtRange!.to!); return branchMatch && statusMatch && dateMatch; - }); + }) as DeploymentDetails[]; }, [filterValue]); const handleResetFilters = useCallback(() => { diff --git a/packages/frontend/src/components/projects/project/OverviewTabPanel.tsx b/packages/frontend/src/components/projects/project/OverviewTabPanel.tsx index 65a133c5..1d49843d 100644 --- a/packages/frontend/src/components/projects/project/OverviewTabPanel.tsx +++ b/packages/frontend/src/components/projects/project/OverviewTabPanel.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { Typography } from '@material-tailwind/react'; +import { Typography, Button, Chip } from '@material-tailwind/react'; import ActivityCard from './ActivityCard'; import activityDetails from '../../../assets/activities.json'; @@ -19,24 +19,40 @@ const OverviewTabPanel = ({ project }: OverviewProps) => (
{project.name} - {project.domain} + {project.url}
-
-

Domain

- {project.domain ?

{project.domain}

: } +
+
+ ^ Domain + {!project.domain && ( + + )} +
+ {project.domain ? ( +

{project.domain}

+ ) : ( + + )}
-

Source

-

^ {project.source}

+

^ Source

+

{project.source}

-

deployment

-

{project.deployment} ^

+

^ Deployment

+

{project.deployment}

-

Created

+

^ Created

{relativeTime(project.createdAt)} by ^ {project.createdBy}

diff --git a/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx b/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx index cd87c0d2..0a1bab92 100644 --- a/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx +++ b/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx @@ -6,13 +6,21 @@ import { MenuList, MenuItem, Typography, + Chip, + ChipProps, } from '@material-tailwind/react'; import { relativeTime } from '../../../../utils/time'; -interface DeploymentDetails { +export enum Status { + BUILDING = 'Building', + READY = 'Ready', + ERROR = 'Error', +} + +export interface DeploymentDetails { title: string; - status: string; + status: Status; environment: string; branch: string; commit: { @@ -27,15 +35,24 @@ interface DeployDetailsCardProps { deployment: DeploymentDetails; } +const STATUS_COLORS: { [key in Status]: ChipProps['color'] } = { + [Status.BUILDING]: 'blue', + [Status.READY]: 'green', + [Status.ERROR]: 'red', +}; + const DeployDetailsCard = ({ deployment }: DeployDetailsCardProps) => { return ( -
+
- {deployment.title} - - {deployment.status} - + {deployment.title} + ^} + />
{deployment.environment}
diff --git a/packages/frontend/src/pages/Projects.tsx b/packages/frontend/src/pages/Projects.tsx index f7c4fa08..daafcd5e 100644 --- a/packages/frontend/src/pages/Projects.tsx +++ b/packages/frontend/src/pages/Projects.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Link } from 'react-router-dom'; -import { Button, IconButton, Typography } from '@material-tailwind/react'; +import { Button, IconButton, Typography, Chip } from '@material-tailwind/react'; import ProjectCard from '../components/projects/ProjectCard'; import HorizontalLine from '../components/HorizontalLine'; @@ -26,12 +26,18 @@ const Projects = () => {
-
+
- Projects +
+ Projects + +
- {/* TODO: Create button component */}