From 87307381cbd616e7085920767d71ecad5a1cc175 Mon Sep 17 00:00:00 2001 From: Wahyu Kurniawan Date: Thu, 29 Feb 2024 10:43:24 +0700 Subject: [PATCH 01/11] =?UTF-8?q?=F0=9F=8E=A8=20style:=20refactor=20and=20?= =?UTF-8?q?re-styling=20filter=20form=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../project/deployments/FilterForm.tsx | 82 ++++++++++--------- 1 file changed, 43 insertions(+), 39 deletions(-) diff --git a/packages/frontend/src/components/projects/project/deployments/FilterForm.tsx b/packages/frontend/src/components/projects/project/deployments/FilterForm.tsx index c28c6218..5cf4c200 100644 --- a/packages/frontend/src/components/projects/project/deployments/FilterForm.tsx +++ b/packages/frontend/src/components/projects/project/deployments/FilterForm.tsx @@ -1,10 +1,10 @@ import React, { useEffect, useState } from 'react'; -import { DateRange } from 'react-day-picker'; -import { IconButton, Option, Select } from '@material-tailwind/react'; - -import SearchBar from '../../../SearchBar'; -import DatePicker from '../../../DatePicker'; +import { Input } from 'components/shared/Input'; +import { CrossCircleIcon, SearchIcon } from 'components/shared/CustomIcon'; +import { DatePicker } from 'components/shared/DatePicker'; +import { Value } from 'react-calendar/dist/cjs/shared/types'; +import { Select, SelectOption } from 'components/shared/Select'; export enum StatusOptions { ALL_STATUS = 'All status', @@ -16,7 +16,7 @@ export enum StatusOptions { export interface FilterValue { searchedBranch: string; status: StatusOptions; - updateAtRange?: DateRange; + updateAtRange?: Value; } interface FilterFormProps { @@ -27,7 +27,7 @@ interface FilterFormProps { const FilterForm = ({ value, onChange }: FilterFormProps) => { const [searchedBranch, setSearchedBranch] = useState(value.searchedBranch); const [selectedStatus, setSelectedStatus] = useState(value.status); - const [dateRange, setDateRange] = useState(); + const [dateRange, setDateRange] = useState(); useEffect(() => { onChange({ @@ -43,46 +43,50 @@ const FilterForm = ({ value, onChange }: FilterFormProps) => { setDateRange(value.updateAtRange); }, [value]); + const statusOptions = Object.values(StatusOptions) + .map((status) => ({ + label: status, + value: status, + })) + .filter((status) => status.value !== StatusOptions.ALL_STATUS); + + const handleReset = () => { + setSearchedBranch(''); + }; + return ( -
-
- +
+ } + rightIcon={ + searchedBranch && + } value={searchedBranch} - onChange={(event) => setSearchedBranch(event.target.value)} + onChange={(e) => setSearchedBranch(e.target.value)} />
-
- +
+ setDateRange(undefined)} + />
-
+
- {selectedStatus !== StatusOptions.ALL_STATUS && ( -
- setSelectedStatus(StatusOptions.ALL_STATUS)} - className="rounded-full" - size="sm" - placeholder={''} - > - X - -
- )} + value={{ label: selectedStatus, value: selectedStatus }} + onChange={(item) => + setSelectedStatus((item as SelectOption).value as StatusOptions) + } + onClear={() => setSelectedStatus(StatusOptions.ALL_STATUS)} + />
); From 630af612a290970aa80b38da386161cafba6f9d3 Mon Sep 17 00:00:00 2001 From: Wahyu Kurniawan Date: Thu, 29 Feb 2024 10:43:53 +0700 Subject: [PATCH 02/11] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20feat:=20add=20some?= =?UTF-8?q?=20components?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../shared/CustomIcon/CrossCircleIcon.tsx | 21 +++++++++++++++++ .../shared/CustomIcon/RefreshIcon.tsx | 23 +++++++++++++++++++ .../src/components/shared/CustomIcon/index.ts | 2 ++ 3 files changed, 46 insertions(+) create mode 100644 packages/frontend/src/components/shared/CustomIcon/CrossCircleIcon.tsx create mode 100644 packages/frontend/src/components/shared/CustomIcon/RefreshIcon.tsx diff --git a/packages/frontend/src/components/shared/CustomIcon/CrossCircleIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/CrossCircleIcon.tsx new file mode 100644 index 00000000..78f563c5 --- /dev/null +++ b/packages/frontend/src/components/shared/CustomIcon/CrossCircleIcon.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import { CustomIcon, CustomIconProps } from './CustomIcon'; + +export const CrossCircleIcon = (props: CustomIconProps) => { + return ( + + + + ); +}; diff --git a/packages/frontend/src/components/shared/CustomIcon/RefreshIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/RefreshIcon.tsx new file mode 100644 index 00000000..ca818a25 --- /dev/null +++ b/packages/frontend/src/components/shared/CustomIcon/RefreshIcon.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import { CustomIcon, CustomIconProps } from './CustomIcon'; + +export const RefreshIcon = (props: CustomIconProps) => { + return ( + + + + + ); +}; diff --git a/packages/frontend/src/components/shared/CustomIcon/index.ts b/packages/frontend/src/components/shared/CustomIcon/index.ts index b9965188..4b8e4b18 100644 --- a/packages/frontend/src/components/shared/CustomIcon/index.ts +++ b/packages/frontend/src/components/shared/CustomIcon/index.ts @@ -41,6 +41,8 @@ export * from './BranchStrokeIcon'; export * from './StorageIcon'; export * from './LinkIcon'; export * from './CursorBoxIcon'; +export * from './CrossCircleIcon'; +export * from './RefreshIcon'; // Templates export * from './templates'; From e0c5895e9c6a48826fd045855041f0b640962cea Mon Sep 17 00:00:00 2001 From: Wahyu Kurniawan Date: Thu, 29 Feb 2024 10:44:25 +0700 Subject: [PATCH 03/11] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20feat:=20add=20`onRes?= =?UTF-8?q?et`=20prop?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/shared/Calendar/Calendar.tsx | 41 ++++++++++++++----- .../shared/DatePicker/DatePicker.theme.ts | 2 +- .../shared/DatePicker/DatePicker.tsx | 25 +++++++---- .../components/shared/Select/Select.theme.ts | 2 +- .../src/components/shared/Select/Select.tsx | 14 +++---- .../shared/Select/SelectItem/SelectItem.tsx | 4 +- 6 files changed, 59 insertions(+), 29 deletions(-) diff --git a/packages/frontend/src/components/shared/Calendar/Calendar.tsx b/packages/frontend/src/components/shared/Calendar/Calendar.tsx index bf01dc06..1a67c34f 100644 --- a/packages/frontend/src/components/shared/Calendar/Calendar.tsx +++ b/packages/frontend/src/components/shared/Calendar/Calendar.tsx @@ -19,6 +19,7 @@ import { import './Calendar.css'; import { format } from 'date-fns'; +import { cn } from 'utils/classnames'; type ValuePiece = Date | null; export type Value = ValuePiece | [ValuePiece, ValuePiece]; @@ -63,6 +64,11 @@ export interface CalendarProps extends CustomReactCalendarProps, CalendarTheme { * @returns None */ onCancel?: () => void; + /** + * Optional callback function that is called when a reset action is triggered. + * @returns None + */ + onReset?: () => void; } /** @@ -80,6 +86,7 @@ export const Calendar = ({ actions, onSelect, onCancel, + onReset, onChange: onChangeProp, ...props }: CalendarProps): JSX.Element => { @@ -217,6 +224,11 @@ export const Calendar = ({ [setValue, setActiveDate, changeNavigationLabel, selectRange], ); + const handleReset = useCallback(() => { + setValue(null); + onReset?.(); + }, [setValue, onReset]); + return (
{actions ? ( actions ) : ( <> - - + {value && ( + + )} +
+ + +
)}
diff --git a/packages/frontend/src/components/shared/DatePicker/DatePicker.theme.ts b/packages/frontend/src/components/shared/DatePicker/DatePicker.theme.ts index 522bd348..ee1b7466 100644 --- a/packages/frontend/src/components/shared/DatePicker/DatePicker.theme.ts +++ b/packages/frontend/src/components/shared/DatePicker/DatePicker.theme.ts @@ -2,7 +2,7 @@ import { VariantProps, tv } from 'tailwind-variants'; export const datePickerTheme = tv({ slots: { - input: [], + input: ['w-full'], }, }); diff --git a/packages/frontend/src/components/shared/DatePicker/DatePicker.tsx b/packages/frontend/src/components/shared/DatePicker/DatePicker.tsx index 99fd82a5..bae4502a 100644 --- a/packages/frontend/src/components/shared/DatePicker/DatePicker.tsx +++ b/packages/frontend/src/components/shared/DatePicker/DatePicker.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useState } from 'react'; +import React, { useCallback, useMemo, useState } from 'react'; import { Input, InputProps } from 'components/shared/Input'; import * as Popover from '@radix-ui/react-popover'; import { datePickerTheme } from './DatePicker.theme'; @@ -27,6 +27,10 @@ export interface DatePickerProps * Whether to allow the selection of a date range. */ selectRange?: boolean; + /** + * Optional callback function that is called when the date picker is reset. + */ + onReset?: () => void; } /** @@ -39,6 +43,7 @@ export const DatePicker = ({ calendarProps, value, onChange, + onReset, selectRange = false, ...props }: DatePickerProps) => { @@ -50,16 +55,16 @@ export const DatePicker = ({ * Renders the value of the date based on the current state of `props.value`. * @returns {string | undefined} - The formatted date value or `undefined` if `props.value` is falsy. */ - const renderValue = useCallback(() => { - if (!value) return undefined; + const renderValue = useMemo(() => { + if (!value) return ''; if (Array.isArray(value)) { return value .map((date) => format(date as Date, 'dd/MM/yyyy')) .join(' - '); } return format(value, 'dd/MM/yyyy'); - }, [value]); - + }, [value, onReset]); + console.log(renderValue); /** * Handles the selection of a date from the calendar. */ @@ -71,15 +76,20 @@ export const DatePicker = ({ [setOpen, onChange], ); + const handleReset = useCallback(() => { + setOpen(false); + onReset?.(); + }, [setOpen, onReset]); + return ( - + setOpen(true)} />} readOnly placeholder="Select a date..." - value={renderValue()} + value={renderValue} className={input({ className })} onClick={() => setOpen(true)} /> @@ -93,6 +103,7 @@ export const DatePicker = ({ {...calendarProps} selectRange={selectRange} value={value} + onReset={handleReset} onCancel={() => setOpen(false)} onSelect={handleSelect} /> diff --git a/packages/frontend/src/components/shared/Select/Select.theme.ts b/packages/frontend/src/components/shared/Select/Select.theme.ts index 43d4b0f4..9c00a5c2 100644 --- a/packages/frontend/src/components/shared/Select/Select.theme.ts +++ b/packages/frontend/src/components/shared/Select/Select.theme.ts @@ -2,7 +2,7 @@ import { VariantProps, tv } from 'tailwind-variants'; export const selectTheme = tv({ slots: { - container: ['flex', 'flex-col', 'relative', 'gap-2'], + container: ['flex', 'flex-col', 'relative', 'gap-2', 'w-full'], label: ['text-sm', 'text-elements-high-em'], description: ['text-xs', 'text-elements-low-em'], inputWrapper: [ diff --git a/packages/frontend/src/components/shared/Select/Select.tsx b/packages/frontend/src/components/shared/Select/Select.tsx index 963cc0bb..b009e856 100644 --- a/packages/frontend/src/components/shared/Select/Select.tsx +++ b/packages/frontend/src/components/shared/Select/Select.tsx @@ -3,7 +3,6 @@ import React, { useState, ComponentPropsWithoutRef, useMemo, - useCallback, MouseEvent, useRef, useEffect, @@ -12,7 +11,7 @@ import { useMultipleSelection, useCombobox } from 'downshift'; import { SelectTheme, selectTheme } from './Select.theme'; import { ChevronDownIcon, - CrossIcon, + CrossCircleIcon, WarningIcon, } from 'components/shared/CustomIcon'; import { cloneIcon } from 'utils/cloneIcon'; @@ -270,11 +269,8 @@ export const Select = ({ itemToString: (item) => (item && !multiple ? item.label : ''), }); - const isSelected = useCallback( - (item: SelectOption) => - multiple ? selectedItems.includes(item) : selectedItem === item, - [selectedItems, selectedItem, multiple], - ); + const isSelected = (item: SelectOption) => + multiple ? selectedItems.includes(item) : selectedItem === item; const handleClear = (e: MouseEvent) => { e.stopPropagation(); @@ -306,7 +302,7 @@ export const Select = ({ return (
{clearable && (selectedItems.length > 0 || selectedItem) && ( - @@ -318,7 +314,7 @@ export const Select = ({ )}
); - }, [cloneIcon, theme, rightIcon]); + }, [cloneIcon, theme, rightIcon, selectedItem, selectedItems, clearable]); const renderHelperText = useMemo( () => ( diff --git a/packages/frontend/src/components/shared/Select/SelectItem/SelectItem.tsx b/packages/frontend/src/components/shared/Select/SelectItem/SelectItem.tsx index a6bbc487..8ac93774 100644 --- a/packages/frontend/src/components/shared/Select/SelectItem/SelectItem.tsx +++ b/packages/frontend/src/components/shared/Select/SelectItem/SelectItem.tsx @@ -62,7 +62,9 @@ const SelectItem = forwardRef(

{label}

- {orientation === 'horizontal' && } + {orientation === 'horizontal' && description && ( + + )} {description && (

{description} From 6db58718684e41447831155bde15ef0b4e3367d5 Mon Sep 17 00:00:00 2001 From: Wahyu Kurniawan Date: Thu, 29 Feb 2024 10:44:45 +0700 Subject: [PATCH 04/11] =?UTF-8?q?=F0=9F=8E=A8=20style:=20make=20the=20inpu?= =?UTF-8?q?t=20width=20to=20full?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/frontend/src/components/shared/Input/Input.theme.ts | 4 +++- packages/frontend/src/components/shared/Input/Input.tsx | 4 ++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/frontend/src/components/shared/Input/Input.theme.ts b/packages/frontend/src/components/shared/Input/Input.theme.ts index b1ecb705..0144d578 100644 --- a/packages/frontend/src/components/shared/Input/Input.theme.ts +++ b/packages/frontend/src/components/shared/Input/Input.theme.ts @@ -8,6 +8,8 @@ export const inputTheme = tv( 'items-center', 'rounded-lg', 'relative', + 'gap-2', + 'w-full', 'placeholder:text-elements-disabled', 'disabled:cursor-not-allowed', 'disabled:bg-controls-disabled', @@ -27,7 +29,7 @@ export const inputTheme = tv( 'disabled:shadow-none', 'disabled:border-none', ], - icon: ['text-elements-mid-em'], + icon: ['text-elements-low-em'], iconContainer: [ 'absolute', 'inset-y-0', diff --git a/packages/frontend/src/components/shared/Input/Input.tsx b/packages/frontend/src/components/shared/Input/Input.tsx index fb3fd7d6..dd88bd80 100644 --- a/packages/frontend/src/components/shared/Input/Input.tsx +++ b/packages/frontend/src/components/shared/Input/Input.tsx @@ -87,12 +87,12 @@ export const Input = ({ ); return ( -

+
{renderLabels}
{leftIcon && renderLeftIcon} Date: Thu, 29 Feb 2024 10:45:12 +0700 Subject: [PATCH 05/11] =?UTF-8?q?=F0=9F=8E=A8=20style:=20refactor=20and=20?= =?UTF-8?q?re-styling=20deployment=20tab=20page?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../frontend/src/layouts/ProjectSearch.tsx | 4 +- .../src/pages/org-slug/projects/Id.tsx | 6 +- .../org-slug/projects/id/Deployments.tsx | 63 ++++++++++--------- 3 files changed, 40 insertions(+), 33 deletions(-) diff --git a/packages/frontend/src/layouts/ProjectSearch.tsx b/packages/frontend/src/layouts/ProjectSearch.tsx index c471ab5d..5805ba37 100644 --- a/packages/frontend/src/layouts/ProjectSearch.tsx +++ b/packages/frontend/src/layouts/ProjectSearch.tsx @@ -32,7 +32,7 @@ const ProjectSearch = () => { }, []); return ( -
+
@@ -64,7 +64,7 @@ const ProjectSearch = () => {
-
+
diff --git a/packages/frontend/src/pages/org-slug/projects/Id.tsx b/packages/frontend/src/pages/org-slug/projects/Id.tsx index 8b164852..55f979c0 100644 --- a/packages/frontend/src/pages/org-slug/projects/Id.tsx +++ b/packages/frontend/src/pages/org-slug/projects/Id.tsx @@ -87,8 +87,8 @@ const Id = () => {
-
- +
+ Overview @@ -107,7 +107,7 @@ const Id = () => { {/* Not wrapping in Tab.Content because we are using Outlet */} -
+
diff --git a/packages/frontend/src/pages/org-slug/projects/id/Deployments.tsx b/packages/frontend/src/pages/org-slug/projects/id/Deployments.tsx index d26a2dd4..8ae231d9 100644 --- a/packages/frontend/src/pages/org-slug/projects/id/Deployments.tsx +++ b/packages/frontend/src/pages/org-slug/projects/id/Deployments.tsx @@ -2,15 +2,15 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { Deployment, Domain } from 'gql-client'; 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, { FilterValue, StatusOptions, -} from '../../../../components/projects/project/deployments/FilterForm'; -import { OutletContextType } from '../../../../types'; -import { useGQLClient } from '../../../../context/GQLClientContext'; +} from 'components/projects/project/deployments/FilterForm'; +import { OutletContextType } from 'types'; +import { useGQLClient } from 'context/GQLClientContext'; +import { Button } from 'components/shared/Button'; +import { RefreshIcon } from 'components/shared/CustomIcon'; const DEFAULT_FILTER_VALUE: FilterValue = { searchedBranch: '', @@ -73,12 +73,19 @@ const DeploymentsTabPanel = () => { // TODO: match status field types (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 = !filterValue.updateAtRange || - (new Date(Number(deployment.createdAt)) >= - filterValue.updateAtRange!.from! && - new Date(Number(deployment.createdAt)) <= - filterValue.updateAtRange!.to!); + (new Date(Number(deployment.createdAt)) >= startDate! && + new Date(Number(deployment.createdAt)) <= endDate!); return branchMatch && statusMatch && dateMatch; }); @@ -93,12 +100,12 @@ const DeploymentsTabPanel = () => { }; return ( -
+
setFilterValue(value)} /> -
+
{Boolean(filteredDeployments.length) ? ( filteredDeployments.map((deployment, key) => { return ( @@ -113,27 +120,27 @@ const DeploymentsTabPanel = () => { ); }) ) : ( -
-
- + // TODO: Update the height based on the layout, need to re-styling the layout similar to create project layout +
+
+

No deployments found - - - Please change your search query or filters - - +

+

+ Please change your search query or filters. +

+
)}
-
+
); }; From 8a1e84386a6655f401154c4424d2670dac9f0e86 Mon Sep 17 00:00:00 2001 From: Wahyu Kurniawan Date: Tue, 5 Mar 2024 05:05:54 +0700 Subject: [PATCH 06/11] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20feat:=20create=20som?= =?UTF-8?q?e=20icons=20needed?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../shared/CustomIcon/CalendarIcon.tsx | 12 +++++------ .../CustomIcon/CheckRadioOutlineIcon.tsx | 21 +++++++++++++++++++ .../CustomIcon/CirclePlaceholderOnIcon.tsx | 20 ++++++++++++++++++ .../shared/CustomIcon/TrendingIcon.tsx | 21 +++++++++++++++++++ .../shared/CustomIcon/WarningTriangleIcon.tsx | 21 +++++++++++++++++++ .../src/components/shared/CustomIcon/index.ts | 4 ++++ 6 files changed, 93 insertions(+), 6 deletions(-) create mode 100644 packages/frontend/src/components/shared/CustomIcon/CheckRadioOutlineIcon.tsx create mode 100644 packages/frontend/src/components/shared/CustomIcon/CirclePlaceholderOnIcon.tsx create mode 100644 packages/frontend/src/components/shared/CustomIcon/TrendingIcon.tsx create mode 100644 packages/frontend/src/components/shared/CustomIcon/WarningTriangleIcon.tsx diff --git a/packages/frontend/src/components/shared/CustomIcon/CalendarIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/CalendarIcon.tsx index 6a51210a..7e841bb1 100644 --- a/packages/frontend/src/components/shared/CustomIcon/CalendarIcon.tsx +++ b/packages/frontend/src/components/shared/CustomIcon/CalendarIcon.tsx @@ -5,16 +5,16 @@ export const CalendarIcon = (props: CustomIconProps) => { return ( ); diff --git a/packages/frontend/src/components/shared/CustomIcon/CheckRadioOutlineIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/CheckRadioOutlineIcon.tsx new file mode 100644 index 00000000..79fe29b6 --- /dev/null +++ b/packages/frontend/src/components/shared/CustomIcon/CheckRadioOutlineIcon.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import { CustomIcon, CustomIconProps } from './CustomIcon'; + +export const CheckRadioOutlineIcon = (props: CustomIconProps) => { + return ( + + + + ); +}; diff --git a/packages/frontend/src/components/shared/CustomIcon/CirclePlaceholderOnIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/CirclePlaceholderOnIcon.tsx new file mode 100644 index 00000000..deb69392 --- /dev/null +++ b/packages/frontend/src/components/shared/CustomIcon/CirclePlaceholderOnIcon.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { CustomIcon, CustomIconProps } from './CustomIcon'; + +export const CirclePlaceholderOnIcon = (props: CustomIconProps) => { + return ( + + + + ); +}; diff --git a/packages/frontend/src/components/shared/CustomIcon/TrendingIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/TrendingIcon.tsx new file mode 100644 index 00000000..19e40ede --- /dev/null +++ b/packages/frontend/src/components/shared/CustomIcon/TrendingIcon.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import { CustomIcon, CustomIconProps } from './CustomIcon'; + +export const TrendingIcon = (props: CustomIconProps) => { + return ( + + + + ); +}; diff --git a/packages/frontend/src/components/shared/CustomIcon/WarningTriangleIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/WarningTriangleIcon.tsx new file mode 100644 index 00000000..d5303a60 --- /dev/null +++ b/packages/frontend/src/components/shared/CustomIcon/WarningTriangleIcon.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import { CustomIcon, CustomIconProps } from './CustomIcon'; + +export const WarningTriangleIcon = (props: CustomIconProps) => { + return ( + + + + + ); +}; diff --git a/packages/frontend/src/components/shared/CustomIcon/index.ts b/packages/frontend/src/components/shared/CustomIcon/index.ts index 9141aa17..893e45ab 100644 --- a/packages/frontend/src/components/shared/CustomIcon/index.ts +++ b/packages/frontend/src/components/shared/CustomIcon/index.ts @@ -50,6 +50,10 @@ export * from './UndoIcon'; export * from './LoaderIcon'; export * from './MinusCircleIcon'; export * from './CopyIcon'; +export * from './CirclePlaceholderOnIcon'; +export * from './WarningTriangleIcon'; +export * from './CheckRadioOutlineIcon'; +export * from './TrendingIcon'; // Templates export * from './templates'; From e9f32ff668d169dd67c9ef7a7d8cbbb8178cf93d Mon Sep 17 00:00:00 2001 From: Wahyu Kurniawan Date: Tue, 5 Mar 2024 05:06:28 +0700 Subject: [PATCH 07/11] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20make=20t?= =?UTF-8?q?he=20conditional=20logic=20to=20boolean?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/frontend/src/components/shared/Calendar/Calendar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/frontend/src/components/shared/Calendar/Calendar.tsx b/packages/frontend/src/components/shared/Calendar/Calendar.tsx index 1a67c34f..613f785f 100644 --- a/packages/frontend/src/components/shared/Calendar/Calendar.tsx +++ b/packages/frontend/src/components/shared/Calendar/Calendar.tsx @@ -289,7 +289,7 @@ export const Calendar = ({
{actions ? ( From d9bae720d74cf215774cec9358959a52d9a7b035 Mon Sep 17 00:00:00 2001 From: Wahyu Kurniawan Date: Tue, 5 Mar 2024 05:06:53 +0700 Subject: [PATCH 08/11] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20feat:=20update=20dat?= =?UTF-8?q?e=20picker=20input=20icon?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/shared/DatePicker/DatePicker.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/frontend/src/components/shared/DatePicker/DatePicker.tsx b/packages/frontend/src/components/shared/DatePicker/DatePicker.tsx index bae4502a..464b9b74 100644 --- a/packages/frontend/src/components/shared/DatePicker/DatePicker.tsx +++ b/packages/frontend/src/components/shared/DatePicker/DatePicker.tsx @@ -3,7 +3,10 @@ import { Input, InputProps } from 'components/shared/Input'; import * as Popover from '@radix-ui/react-popover'; import { datePickerTheme } from './DatePicker.theme'; import { Calendar, CalendarProps } from 'components/shared/Calendar'; -import { CalendarIcon } from 'components/shared/CustomIcon'; +import { + CalendarIcon, + ChevronGrabberHorizontal, +} from 'components/shared/CustomIcon'; import { Value } from 'react-calendar/dist/cjs/shared/types'; import { format } from 'date-fns'; @@ -64,7 +67,7 @@ export const DatePicker = ({ } return format(value, 'dd/MM/yyyy'); }, [value, onReset]); - console.log(renderValue); + /** * Handles the selection of a date from the calendar. */ @@ -86,7 +89,8 @@ export const DatePicker = ({ setOpen(true)} />} + leftIcon={ setOpen(true)} />} + rightIcon={} readOnly placeholder="Select a date..." value={renderValue} From 18dde52c9a4a9071e3fe11b3dd4fc71bf0c2212b Mon Sep 17 00:00:00 2001 From: Wahyu Kurniawan Date: Tue, 5 Mar 2024 05:07:21 +0700 Subject: [PATCH 09/11] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20feat:=20update=20sel?= =?UTF-8?q?ect=20input=20default=20icon=20and=20options=20icon?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../project/deployments/FilterForm.tsx | 25 ++++++++++++++++++- .../src/components/shared/Select/Select.tsx | 15 +++++++---- 2 files changed, 34 insertions(+), 6 deletions(-) diff --git a/packages/frontend/src/components/projects/project/deployments/FilterForm.tsx b/packages/frontend/src/components/projects/project/deployments/FilterForm.tsx index 5cf4c200..78324eff 100644 --- a/packages/frontend/src/components/projects/project/deployments/FilterForm.tsx +++ b/packages/frontend/src/components/projects/project/deployments/FilterForm.tsx @@ -1,7 +1,14 @@ import React, { useEffect, useState } from 'react'; import { Input } from 'components/shared/Input'; -import { CrossCircleIcon, SearchIcon } from 'components/shared/CustomIcon'; +import { + CheckRadioOutlineIcon, + CrossCircleIcon, + LoaderIcon, + SearchIcon, + TrendingIcon, + WarningTriangleIcon, +} from 'components/shared/CustomIcon'; import { DatePicker } from 'components/shared/DatePicker'; import { Value } from 'react-calendar/dist/cjs/shared/types'; import { Select, SelectOption } from 'components/shared/Select'; @@ -43,10 +50,25 @@ const FilterForm = ({ value, onChange }: FilterFormProps) => { setDateRange(value.updateAtRange); }, [value]); + const getOptionIcon = (status: StatusOptions) => { + switch (status) { + case StatusOptions.BUILDING: + return ; + case StatusOptions.READY: + return ; + case StatusOptions.ERROR: + return ; + case StatusOptions.ALL_STATUS: + default: + return ; + } + }; + const statusOptions = Object.values(StatusOptions) .map((status) => ({ label: status, value: status, + leftIcon: getOptionIcon(status), })) .filter((status) => status.value !== StatusOptions.ALL_STATUS); @@ -78,6 +100,7 @@ const FilterForm = ({ value, onChange }: FilterFormProps) => {