cfbender/snowballtools-base
1
0
Fork 0
forked from cerc-io/snowballtools-base
Code Pull Requests Activity

🎨 style: refactor and re-styling deployment tab page

Browse Source
This commit is contained in:
Wahyu Kurniawan 2024-02-29 10:45:12 +07:00
parent 6db5871868
commit 83fec1d273
No known key found for this signature in database
GPG Key ID: 040A1549143A8E33
3 changed files with 40 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/frontend/src/layouts/ProjectSearch.tsx
View File

@ -32,7 +32,7 @@ const ProjectSearch = () => {
}, []); }, []);
return ( return (
<div> <div className="h-full">
<div className="sticky top-0 bg-white z-30"> <div className="sticky top-0 bg-white z-30">
<div className="flex pl-3 pr-8 pt-3 pb-3 items-center"> <div className="flex pl-3 pr-8 pt-3 pb-3 items-center">
<div className="grow"> <div className="grow">
@ -64,7 +64,7 @@ const ProjectSearch = () => {
</div> </div>
<HorizontalLine /> <HorizontalLine />
</div> </div>
<div className="z-0"> <div className="z-0 h-full">
<Outlet /> <Outlet />
</div> </div>
</div> </div>

6
packages/frontend/src/pages/org-slug/projects/Id.tsx
View File

@ -87,8 +87,8 @@ const Id = () => {
</div> </div>
</div> </div>
<WavyBorder /> <WavyBorder />
<div className="px-6 "> <div className="px-6 h-full">
<Tabs value={currentTab} className="flex-col pt-6"> <Tabs value={currentTab} className="flex-col pt-6 h-full">
<Tabs.List> <Tabs.List>
<Tabs.Trigger value=""> <Tabs.Trigger value="">
<Link to="">Overview</Link> <Link to="">Overview</Link>
@ -107,7 +107,7 @@ const Id = () => {
</Tabs.Trigger> </Tabs.Trigger>
</Tabs.List> </Tabs.List>
{/* Not wrapping in Tab.Content because we are using Outlet */} {/* Not wrapping in Tab.Content because we are using Outlet */}
<div className="py-7"> <div className="py-7 h-full">
<Outlet context={{ project, onUpdate }} /> <Outlet context={{ project, onUpdate }} />
</div> </div>
</Tabs> </Tabs>

63
packages/frontend/src/pages/org-slug/projects/id/Deployments.tsx
View File

@ -2,15 +2,15 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { Deployment, Domain } from 'gql-client'; import { Deployment, Domain } from 'gql-client';
import { useOutletContext } from 'react-router-dom'; import { useOutletContext } from 'react-router-dom';
import { Button, Typography } from '@material-tailwind/react'; import DeploymentDetailsCard from 'components/projects/project/deployments/DeploymentDetailsCard';
import DeploymentDetailsCard from '../../../../components/projects/project/deployments/DeploymentDetailsCard';
import FilterForm, { import FilterForm, {
FilterValue, FilterValue,
StatusOptions, StatusOptions,
} from '../../../../components/projects/project/deployments/FilterForm'; } from 'components/projects/project/deployments/FilterForm';
import { OutletContextType } from '../../../../types'; import { OutletContextType } from 'types';
import { useGQLClient } from '../../../../context/GQLClientContext'; import { useGQLClient } from 'context/GQLClientContext';
import { Button } from 'components/shared/Button';
import { RefreshIcon } from 'components/shared/CustomIcon';
const DEFAULT_FILTER_VALUE: FilterValue = { const DEFAULT_FILTER_VALUE: FilterValue = {
searchedBranch: '', searchedBranch: '',
@ -73,12 +73,19 @@ const DeploymentsTabPanel = () => {
// TODO: match status field types // TODO: match status field types
(deployment.status as unknown as StatusOptions) === filterValue.status; (deployment.status as unknown as StatusOptions) === filterValue.status;
const startDate =
filterValue.updateAtRange instanceof Array
? filterValue.updateAtRange[0]
: null;
const endDate =
filterValue.updateAtRange instanceof Array
? filterValue.updateAtRange[1]
: null;
const dateMatch = const dateMatch =
!filterValue.updateAtRange || !filterValue.updateAtRange ||
(new Date(Number(deployment.createdAt)) >= (new Date(Number(deployment.createdAt)) >= startDate! &&
filterValue.updateAtRange!.from! && new Date(Number(deployment.createdAt)) <= endDate!);
new Date(Number(deployment.createdAt)) <=
filterValue.updateAtRange!.to!);
return branchMatch && statusMatch && dateMatch; return branchMatch && statusMatch && dateMatch;
}); });
@ -93,12 +100,12 @@ const DeploymentsTabPanel = () => {
}; };
return ( return (
<div className="p-4"> <section className="h-full">
<FilterForm <FilterForm
value={filterValue} value={filterValue}
onChange={(value) => setFilterValue(value)} onChange={(value) => setFilterValue(value)}
/> />
<div className="mt-2"> <div className="mt-2 h-full">
{Boolean(filteredDeployments.length) ? ( {Boolean(filteredDeployments.length) ? (
filteredDeployments.map((deployment, key) => { filteredDeployments.map((deployment, key) => {
return ( return (
@ -113,27 +120,27 @@ const DeploymentsTabPanel = () => {
); );
}) })
) : ( ) : (
<div className="h-[50vh] bg-gray-100 flex rounded items-center justify-center"> // TODO: Update the height based on the layout, need to re-styling the layout similar to create project layout
<div className="text-center"> <div className="h-3/4 bg-base-bg-alternate flex flex-col rounded-xl items-center justify-center text-center gap-5">
<Typography variant="h5" placeholder={''}> <div className="space-y-1">
<p className="font-medium tracking-[-0.011em] text-elements-high-em">
No deployments found No deployments found
</Typography> </p>
<Typography placeholder={''}> <p className="text-sm tracking-[-0.006em] text-elements-mid-em">
Please change your search query or filters Please change your search query or filters.
</Typography> </p>
<Button
className="rounded-full mt-5"
color="white"
onClick={handleResetFilters}
placeholder={''}
>
^ Reset filters
</Button>
</div> </div>
<Button
variant="tertiary"
leftIcon={<RefreshIcon />}
onClick={handleResetFilters}
>
Reset filters
</Button>
</div> </div>
)} )}
</div> </div>
</div> </section>
); );
}; };