From 8bffec15965d4a2912073858170ea916eb54f9ae Mon Sep 17 00:00:00 2001 From: Arun Devtron Date: Fri, 27 Sep 2024 15:30:31 +0530 Subject: [PATCH 01/43] feat: add support for state based collapsible list --- .../CollapsibleList.component.tsx | 99 ++++++++++++------- .../CollapsibleList/CollapsibleList.types.ts | 38 +++++-- .../DeploymentConfigDiff.types.ts | 4 +- .../DeploymentConfigDiffNavigation.tsx | 5 +- 4 files changed, 99 insertions(+), 47 deletions(-) diff --git a/src/Shared/Components/CollapsibleList/CollapsibleList.component.tsx b/src/Shared/Components/CollapsibleList/CollapsibleList.component.tsx index 8b2569c3e..d3111c619 100644 --- a/src/Shared/Components/CollapsibleList/CollapsibleList.component.tsx +++ b/src/Shared/Components/CollapsibleList/CollapsibleList.component.tsx @@ -6,7 +6,7 @@ import { ConditionalWrap } from '@Common/Helper' import { ReactComponent as ICExpand } from '@Icons/ic-expand.svg' import { Collapse } from '../Collapse' -import { CollapsibleListProps } from './CollapsibleList.types' +import { CollapsibleListItem, CollapsibleListProps } from './CollapsibleList.types' import './CollapsibleList.scss' const renderWithTippy = (tippyProps: TippyProps) => (children: React.ReactElement) => ( @@ -18,6 +18,68 @@ const renderWithTippy = (tippyProps: TippyProps) => (children: React.ReactElemen export const CollapsibleList = ({ config, onCollapseBtnClick }: CollapsibleListProps) => { const { pathname } = useLocation() + const getTabContent = (item: CollapsibleListItem) => { + const { title, subtitle, iconConfig } = item + return ( + <> +
+ {title} + {subtitle && {subtitle}} +
+ {iconConfig && ( + + + + )} + + ) + } + + const getTabItem = (item: CollapsibleListItem) => { + const { title, href, isActive, onClick, tabType } = item + if (tabType === 'navLink') { + return ( + { + // Prevent navigation to the same page + if (href === pathname) { + e.preventDefault() + } + onClick?.(e) + }} + > + {getTabContent(item)} + + ) + } + // Since is active is boolean we need to explicitly handle for null + return ( + + ) + } + return (
{config.map(({ id, header, headerIconConfig, items, noItemsText, isExpanded }) => ( @@ -61,40 +123,7 @@ export const CollapsibleList = ({ config, onCollapseBtnClick }: CollapsibleListP
) : ( - items.map(({ title, href, iconConfig, subtitle, onClick }) => ( - { - // Prevent navigation to the same page - if (href === pathname) { - e.preventDefault() - } - onClick?.(e) - }} - > -
- - {title} - - {subtitle && ( - {subtitle} - )} -
- {iconConfig && ( - - - - )} - - )) + items.map((item) => getTabItem(item)) )} diff --git a/src/Shared/Components/CollapsibleList/CollapsibleList.types.ts b/src/Shared/Components/CollapsibleList/CollapsibleList.types.ts index be4944f82..f8668399d 100644 --- a/src/Shared/Components/CollapsibleList/CollapsibleList.types.ts +++ b/src/Shared/Components/CollapsibleList/CollapsibleList.types.ts @@ -1,7 +1,35 @@ import React from 'react' import { TippyProps } from '@tippyjs/react' -export interface CollapsibleListItem { +interface ButtonTab { + tabType: 'button' + /** + * Is tab active ( for button tab ) + */ + isActive: boolean + /** + * The callback function to handle click events on the button. + */ + onClick?: (e: React.MouseEvent) => void + href?: never +} + +interface NavLinkTab { + tabType: 'navLink' + /** + * The URL of the nav link. + */ + href: string + /** + * The callback function to handle click events on the nav link. + */ + onClick?: (e: React.MouseEvent) => void + isActive?: never +} + +type ConditionalTabType = ButtonTab | NavLinkTab + +export type CollapsibleListItem = ConditionalTabType & { /** * The title of the list item. */ @@ -27,14 +55,6 @@ export interface CollapsibleListItem { */ tooltipProps?: TippyProps } - /** - * The URL of the nav link. - */ - href?: string - /** - * The callback function to handle click events on the nav link. - */ - onClick?: (e: React.MouseEvent) => void } export interface CollapsibleListConfig { diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts index 9064785a4..0d4e32808 100644 --- a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts +++ b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts @@ -41,8 +41,10 @@ export type DeploymentConfigDiffSelectPickerProps = selectPickerProps: SelectPickerProps } -export interface DeploymentConfigDiffNavigationItem extends Pick { +export interface DeploymentConfigDiffNavigationItem extends Pick { hasDiff?: boolean + href: string + onClick: (e: React.MouseEvent) => void } export interface DeploymentConfigDiffNavigationCollapsibleItem diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx index b8f2d8307..c1aeaeaa1 100644 --- a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx +++ b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx @@ -7,7 +7,7 @@ import { ReactComponent as ICInfoOutlined } from '@Icons/ic-info-outlined.svg' import { ReactComponent as ICDiffFileUpdated } from '@Icons/ic-diff-file-updated.svg' import { StyledRadioGroup } from '@Common/index' -import { CollapsibleList } from '../CollapsibleList' +import { CollapsibleList, CollapsibleListConfig } from '../CollapsibleList' import { DeploymentConfigDiffNavigationProps } from './DeploymentConfigDiff.types' // LOADING SHIMMER @@ -34,10 +34,11 @@ export const DeploymentConfigDiffNavigation = ({ }, [collapsibleNavList]) /** Collapsible List Config. */ - const collapsibleListConfig = collapsibleNavList.map(({ items, ...resListItem }) => ({ + const collapsibleListConfig: CollapsibleListConfig[] = collapsibleNavList.map(({ items, ...resListItem }) => ({ ...resListItem, isExpanded: expandedIds[resListItem.id], items: items.map(({ hasDiff, ...resItem }) => ({ + tabType: 'navLink', ...resItem, ...(hasDiff ? { From da3edaaecf4863347eea42c003160e2cde39ba85 Mon Sep 17 00:00:00 2001 From: Arun Devtron Date: Tue, 8 Oct 2024 19:32:52 +0530 Subject: [PATCH 02/43] feat: add key for drift in Node --- src/Shared/types.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Shared/types.ts b/src/Shared/types.ts index 513ec54da..01adbefbd 100644 --- a/src/Shared/types.ts +++ b/src/Shared/types.ts @@ -140,6 +140,7 @@ export interface Node { port: number canBeHibernated: boolean isHibernated: boolean + hasDrift?: boolean } // eslint-disable-next-line no-use-before-define From 02b55426e0128424006a1d071dcc7640feda5bbf Mon Sep 17 00:00:00 2001 From: Arun Devtron Date: Wed, 9 Oct 2024 12:07:25 +0530 Subject: [PATCH 03/43] feat: add filter for drifted nodes in status filter button --- src/Common/Constants.ts | 1 + .../CICDHistory/AppStatusDetailsChart.tsx | 40 +++++++++++++++++-- .../StatusFilterButtonComponent.tsx | 12 ++++-- src/Shared/Components/CICDHistory/types.tsx | 6 +++ src/Shared/Store/IndexStore.tsx | 5 +++ 5 files changed, 58 insertions(+), 6 deletions(-) diff --git a/src/Common/Constants.ts b/src/Common/Constants.ts index ebb957440..68f80f5c7 100644 --- a/src/Common/Constants.ts +++ b/src/Common/Constants.ts @@ -65,6 +65,7 @@ export const URLS = { GLOBAL_CONFIG_SCOPED_VARIABLES: '/global-config/scoped-variables', GLOBAL_CONFIG_DEPLOYMENT_CHARTS_LIST: '/global-config/deployment-charts', NETWORK_STATUS_INTERFACE: '/network-status-interface', + CONFIG_DRIFT: 'config-drift', } export const ROUTES = { diff --git a/src/Shared/Components/CICDHistory/AppStatusDetailsChart.tsx b/src/Shared/Components/CICDHistory/AppStatusDetailsChart.tsx index b704befad..6df226e19 100644 --- a/src/Shared/Components/CICDHistory/AppStatusDetailsChart.tsx +++ b/src/Shared/Components/CICDHistory/AppStatusDetailsChart.tsx @@ -16,18 +16,34 @@ import { useMemo, useState } from 'react' import Tippy from '@tippyjs/react' +import { useHistory } from 'react-router' +import { URLS } from '@Common/Constants' import { ReactComponent as InfoIcon } from '../../../Assets/Icon/ic-info-filled.svg' import { ReactComponent as Chat } from '../../../Assets/Icon/ic-chat-circle-dots.svg' import { AppStatusDetailsChartType, AggregatedNodes, STATUS_SORTING_ORDER } from './types' import { StatusFilterButtonComponent } from './StatusFilterButtonComponent' -import { DEPLOYMENT_STATUS, APP_STATUS_HEADERS } from '../../constants' +import { DEPLOYMENT_STATUS, APP_STATUS_HEADERS, ComponentSizeType } from '../../constants' import { IndexStore } from '../../Store' import { aggregateNodes } from '../../Helpers' +import { Button, ButtonStyleType, ButtonVariantType } from '../Button' -const AppStatusDetailsChart = ({ filterRemoveHealth = false, showFooter }: AppStatusDetailsChartType) => { +const AppStatusDetailsChart = ({ + filterRemoveHealth = false, + showFooter, + showConfigDriftInfo = false, + onClose, +}: AppStatusDetailsChartType) => { + const history = useHistory() const _appDetails = IndexStore.getAppDetails() const [currentFilter, setCurrentFilter] = useState('') + const { appId, environmentId: envId } = _appDetails + + const handleCompareDesiredManifest = () => { + onClose() + history.push(`${URLS.APP}/${appId}${URLS.DETAILS}/${envId}/${URLS.APP_DETAILS_K8}/${URLS.CONFIG_DRIFT}`) + } + const nodes: AggregatedNodes = useMemo( () => aggregateNodes(_appDetails.resourceTree?.nodes || [], _appDetails.resourceTree?.podMetadata || []), [_appDetails], @@ -100,6 +116,7 @@ const AppStatusDetailsChart = ({ filterRemoveHealth = false, showFooter }: AppSt .filter( (nodeDetails) => currentFilter === 'all' || + (currentFilter === 'drifted' && nodeDetails.hasDrift) || nodeDetails.health.status?.toLowerCase() === currentFilter, ) .map((nodeDetails) => ( @@ -123,7 +140,24 @@ const AppStatusDetailsChart = ({ filterRemoveHealth = false, showFooter }: AppSt > {nodeDetails.status ? nodeDetails.status : nodeDetails.health.status} -
{getNodeMessage(nodeDetails.kind, nodeDetails.name)}
+
+ {showConfigDriftInfo && nodeDetails.hasDrift && ( +
+ Config drift detected + {onClose && appId && envId && ( +
+ )} +
{getNodeMessage(nodeDetails.kind, nodeDetails.name)}
+
)) ) : ( diff --git a/src/Shared/Components/CICDHistory/StatusFilterButtonComponent.tsx b/src/Shared/Components/CICDHistory/StatusFilterButtonComponent.tsx index 0ece827ea..126122070 100644 --- a/src/Shared/Components/CICDHistory/StatusFilterButtonComponent.tsx +++ b/src/Shared/Components/CICDHistory/StatusFilterButtonComponent.tsx @@ -18,9 +18,8 @@ import { useEffect, useState } from 'react' import { ReactComponent as ICCaretDown } from '@Icons/ic-caret-down.svg' import { PopupMenu, StyledRadioGroup as RadioGroup } from '../../../Common' -import { NodeStatus, StatusFilterButtonType } from './types' +import { NodeFilters, NodeStatus, StatusFilterButtonType } from './types' import { IndexStore } from '../../Store' - import './StatusFilterButtonComponent.scss' export const StatusFilterButtonComponent = ({ nodes, handleFilterClick }: StatusFilterButtonType) => { @@ -32,10 +31,15 @@ export const StatusFilterButtonComponent = ({ nodes, handleFilterClick }: Status let progressingNodeCount: number = 0 let failedNodeCount: number = 0 let missingNodeCount: number = 0 + let driftedNodeCount: number = 0 nodes?.forEach((_node) => { const _nodeHealth = _node.health?.status + if (_node.hasDrift) { + driftedNodeCount += 1 + } + if (_nodeHealth?.toLowerCase() === NodeStatus.Healthy) { healthyNodeCount += 1 } else if (_nodeHealth?.toLowerCase() === NodeStatus.Degraded) { @@ -58,6 +62,7 @@ export const StatusFilterButtonComponent = ({ nodes, handleFilterClick }: Status isSelected: NodeStatus.Progressing == selectedTab, }, { status: NodeStatus.Healthy, count: healthyNodeCount, isSelected: NodeStatus.Healthy == selectedTab }, + { status: NodeFilters.Drifted, count: driftedNodeCount, isSelected: selectedTab === NodeFilters.Drifted }, ] const validFilterOptions = filterOptions.filter(({ count }) => count > 0) const displayedInlineFilters = validFilterOptions.slice( @@ -72,7 +77,8 @@ export const StatusFilterButtonComponent = ({ nodes, handleFilterClick }: Status (selectedTab === NodeStatus.Healthy && healthyNodeCount === 0) || (selectedTab === NodeStatus.Degraded && failedNodeCount === 0) || (selectedTab === NodeStatus.Progressing && progressingNodeCount === 0) || - (selectedTab === NodeStatus.Missing && missingNodeCount === 0) + (selectedTab === NodeStatus.Missing && missingNodeCount === 0) || + (selectedTab === NodeFilters.Drifted && driftedNodeCount === 0) ) { setSelectedTab('all') } else if (handleFilterClick) { diff --git a/src/Shared/Components/CICDHistory/types.tsx b/src/Shared/Components/CICDHistory/types.tsx index 4ef8ce948..bdbf9000e 100644 --- a/src/Shared/Components/CICDHistory/types.tsx +++ b/src/Shared/Components/CICDHistory/types.tsx @@ -517,6 +517,8 @@ export interface DeploymentHistorySidebarType { export interface AppStatusDetailsChartType { filterRemoveHealth?: boolean showFooter: boolean + showConfigDriftInfo?: boolean + onClose?: () => void } export interface StatusFilterButtonType { @@ -533,6 +535,10 @@ export enum NodeStatus { Unknown = 'unknown', } +export enum NodeFilters { + Drifted = 'drifted', +} + type NodesMap = { [key in NodeType]?: Map } diff --git a/src/Shared/Store/IndexStore.tsx b/src/Shared/Store/IndexStore.tsx index 8a46e59a9..5a42342df 100644 --- a/src/Shared/Store/IndexStore.tsx +++ b/src/Shared/Store/IndexStore.tsx @@ -17,6 +17,7 @@ /* eslint-disable eqeqeq */ /* eslint-disable array-callback-return */ import { BehaviorSubject } from 'rxjs' +import { NodeFilters } from '@Shared/Components' import { AppDetails, AppType, EnvDetails, EnvType, Node, Nodes, PodMetaData, iNode } from '../types' const _appDetailsSubject: BehaviorSubject = new BehaviorSubject({} as AppDetails) @@ -43,6 +44,10 @@ const publishFilteredNodes = () => { return true } + if (_nodeFilter.filterType.toLowerCase() === NodeFilters.Drifted && _node.hasDrift) { + return true + } + return false }) From df994f699272256866751e11adfbff6ff9b8a41c Mon Sep 17 00:00:00 2001 From: Arun Devtron Date: Wed, 9 Oct 2024 12:33:01 +0530 Subject: [PATCH 04/43] chore: use enum for drifted node --- src/Shared/Components/CICDHistory/AppStatusDetailsChart.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Shared/Components/CICDHistory/AppStatusDetailsChart.tsx b/src/Shared/Components/CICDHistory/AppStatusDetailsChart.tsx index 6df226e19..e966d6df4 100644 --- a/src/Shared/Components/CICDHistory/AppStatusDetailsChart.tsx +++ b/src/Shared/Components/CICDHistory/AppStatusDetailsChart.tsx @@ -20,7 +20,7 @@ import { useHistory } from 'react-router' import { URLS } from '@Common/Constants' import { ReactComponent as InfoIcon } from '../../../Assets/Icon/ic-info-filled.svg' import { ReactComponent as Chat } from '../../../Assets/Icon/ic-chat-circle-dots.svg' -import { AppStatusDetailsChartType, AggregatedNodes, STATUS_SORTING_ORDER } from './types' +import { AppStatusDetailsChartType, AggregatedNodes, STATUS_SORTING_ORDER, NodeFilters } from './types' import { StatusFilterButtonComponent } from './StatusFilterButtonComponent' import { DEPLOYMENT_STATUS, APP_STATUS_HEADERS, ComponentSizeType } from '../../constants' import { IndexStore } from '../../Store' @@ -116,7 +116,7 @@ const AppStatusDetailsChart = ({ .filter( (nodeDetails) => currentFilter === 'all' || - (currentFilter === 'drifted' && nodeDetails.hasDrift) || + (currentFilter === NodeFilters.Drifted && nodeDetails.hasDrift) || nodeDetails.health.status?.toLowerCase() === currentFilter, ) .map((nodeDetails) => ( From 9551c44ccbe551da85dc5ec6b7cffd3232ce88ef Mon Sep 17 00:00:00 2001 From: Arun Devtron Date: Wed, 9 Oct 2024 13:01:49 +0530 Subject: [PATCH 05/43] chore: version bump --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 04f57b8a4..d6bf241fb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "4.0.2", + "version": "0.4.5-beta-1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "4.0.2", + "version": "0.4.5-beta-1", "license": "ISC", "dependencies": { "@types/react-dates": "^21.8.6", diff --git a/package.json b/package.json index 74d4e34cd..e2df83f6d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "4.0.2", + "version": "0.4.5-beta-1", "description": "Supporting common component library", "type": "module", "main": "dist/index.js", From 711526232129e15d66314a216851e71ad1763c42 Mon Sep 17 00:00:00 2001 From: Arun Devtron Date: Wed, 9 Oct 2024 14:57:04 +0530 Subject: [PATCH 06/43] chore: edit typing for collapsible list --- .../CollapsibleList.component.tsx | 59 +++++++++++-------- .../CollapsibleList/CollapsibleList.types.ts | 20 ++++--- .../DeploymentConfigDiff.types.ts | 4 +- .../DeploymentConfigDiffNavigation.tsx | 41 +++++++------ 4 files changed, 71 insertions(+), 53 deletions(-) diff --git a/src/Shared/Components/CollapsibleList/CollapsibleList.component.tsx b/src/Shared/Components/CollapsibleList/CollapsibleList.component.tsx index c539ef38f..1fe3274f1 100644 --- a/src/Shared/Components/CollapsibleList/CollapsibleList.component.tsx +++ b/src/Shared/Components/CollapsibleList/CollapsibleList.component.tsx @@ -5,7 +5,7 @@ import { ConditionalWrap } from '@Common/Helper' import { ReactComponent as ICExpand } from '@Icons/ic-expand.svg' import { Collapse } from '../Collapse' -import { CollapsibleListItem, CollapsibleListProps } from './CollapsibleList.types' +import { CollapsibleListItem, CollapsibleListProps, TabOptions } from './CollapsibleList.types' import './CollapsibleList.scss' const renderWithTippy = (tippyProps: TippyProps) => (children: React.ReactElement) => ( @@ -14,10 +14,14 @@ const renderWithTippy = (tippyProps: TippyProps) => (children: React.ReactElemen ) -export const CollapsibleList = ({ config, onCollapseBtnClick }: CollapsibleListProps) => { +export const CollapsibleList = ({ + config, + tabType, + onCollapseBtnClick, +}: CollapsibleListProps) => { const { pathname } = useLocation() - const getTabContent = (item: CollapsibleListItem) => { + const getTabContent = (item: CollapsibleListItem) => { const { title, subtitle, iconConfig } = item return ( <> @@ -40,27 +44,8 @@ export const CollapsibleList = ({ config, onCollapseBtnClick }: CollapsibleListP ) } - const getTabItem = (item: CollapsibleListItem) => { - const { title, href, isActive, onClick, tabType } = item - if (tabType === 'navLink') { - return ( - { - // Prevent navigation to the same page - if (href === pathname) { - e.preventDefault() - } - onClick?.(e) - }} - > - {getTabContent(item)} - - ) - } - // Since is active is boolean we need to explicitly handle for null + const getButtonTabItem = (item: CollapsibleListItem<'button'>) => { + const { title, isActive, onClick } = item return ( + size={ComponentSizeType.small} + fullWidth + /> ) } diff --git a/src/Shared/Components/SelectPicker/type.ts b/src/Shared/Components/SelectPicker/type.ts index 38eef3603..8506813c3 100644 --- a/src/Shared/Components/SelectPicker/type.ts +++ b/src/Shared/Components/SelectPicker/type.ts @@ -266,6 +266,7 @@ export interface FilterSelectPickerProps | 'shouldMenuAlignRight' | 'optionListError' | 'reloadOptionList' + | 'isOptionDisabled' > { appliedFilterOptions: SelectPickerOptionType[] handleApplyFilter: (filtersToApply: SelectPickerOptionType[]) => void From 489cfafe92249ce1511114bf4ebf6be1068995b2 Mon Sep 17 00:00:00 2001 From: Arun Jain Date: Fri, 25 Oct 2024 12:20:07 +0530 Subject: [PATCH 20/43] chore: version bump --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2f27139fb..2f214055c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.5.8-beta-6", + "version": "0.5.8-beta-7", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.5.8-beta-6", + "version": "0.5.8-beta-7", "license": "ISC", "dependencies": { "@types/react-dates": "^21.8.6", diff --git a/package.json b/package.json index 564b1039d..4a3195750 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.5.8-beta-6", + "version": "0.5.8-beta-7", "description": "Supporting common component library", "type": "module", "main": "dist/index.js", From 361b449fecc7317c93346ae92e3107026eda9f7f Mon Sep 17 00:00:00 2001 From: Arun Jain Date: Mon, 28 Oct 2024 12:44:09 +0530 Subject: [PATCH 21/43] chore: version bump --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index b89cd440e..ffce84fa2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.6.0", + "version": "0.6.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.6.0", + "version": "0.6.1", "license": "ISC", "dependencies": { "@types/react-dates": "^21.8.6", diff --git a/package.json b/package.json index 82c949628..540626213 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.6.0", + "version": "0.6.1", "description": "Supporting common component library", "type": "module", "main": "dist/index.js", From 017ea72026729de51f646c000832393ef02afcfd Mon Sep 17 00:00:00 2001 From: Arun Jain Date: Mon, 28 Oct 2024 13:35:12 +0530 Subject: [PATCH 22/43] feat: update full screen key to shift + f --- src/Shared/Components/CICDHistory/History.components.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Shared/Components/CICDHistory/History.components.tsx b/src/Shared/Components/CICDHistory/History.components.tsx index 5fa8b4e81..282be6114 100644 --- a/src/Shared/Components/CICDHistory/History.components.tsx +++ b/src/Shared/Components/CICDHistory/History.components.tsx @@ -34,7 +34,7 @@ import { ReactComponent as ZoomOut } from '../../../Assets/Icon/ic-exit-fullscre import './cicdHistory.scss' export const LogResizeButton = ({ - shortcutCombo = ['F'], + shortcutCombo = ['Shift', 'F'], showOnlyWhenPathIncludesLogs = true, fullScreenView, setFullScreenView, From cf3d29940cc6ac20dd40b2e113d9741e94ae319b Mon Sep 17 00:00:00 2001 From: Arun Jain Date: Mon, 28 Oct 2024 15:37:16 +0530 Subject: [PATCH 23/43] chore: version bump --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index ffce84fa2..620eb518e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.6.1", + "version": "0.6.1-beta-3", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.6.1", + "version": "0.6.1-beta-3", "license": "ISC", "dependencies": { "@types/react-dates": "^21.8.6", diff --git a/package.json b/package.json index 540626213..849bdeb27 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.6.1", + "version": "0.6.1-beta-3", "description": "Supporting common component library", "type": "module", "main": "dist/index.js", From 9cc7f98347d2dbb69a2d6635f80dff5c923643b8 Mon Sep 17 00:00:00 2001 From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com> Date: Tue, 29 Oct 2024 12:36:40 +0530 Subject: [PATCH 24/43] feat: add support for resizable table config --- .../SortableTableHeaderCell.tsx | 46 +++++++++++-- src/Common/SortableTableHeaderCell/index.ts | 1 + src/Common/SortableTableHeaderCell/types.ts | 25 ++++++- .../useResizableTableConfig.tsx | 66 +++++++++++++++++++ 4 files changed, 132 insertions(+), 6 deletions(-) create mode 100644 src/Common/SortableTableHeaderCell/useResizableTableConfig.tsx diff --git a/src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx b/src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx index 622dcd945..89c468549 100644 --- a/src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx +++ b/src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx @@ -15,6 +15,7 @@ */ import { Tooltip } from '@Common/Tooltip' +import Draggable, { DraggableProps } from 'react-draggable' import { ReactComponent as SortIcon } from '../../Assets/Icon/ic-arrow-up-down.svg' import { ReactComponent as SortArrowDown } from '../../Assets/Icon/ic-sort-arrow-down.svg' import { SortingOrder } from '../Constants' @@ -43,6 +44,8 @@ const SortableTableHeaderCell = ({ disabled, isSortable = true, showTippyOnTruncate = false, + id, + handleResize, }: SortableTableHeaderCellProps) => { const renderSortIcon = () => { if (!isSortable) { @@ -60,17 +63,50 @@ const SortableTableHeaderCell = ({ return } + const handleDrag: DraggableProps['onDrag'] = (_, data) => { + if (id && handleResize) { + handleResize(id, data.deltaX) + } + } + return ( ) } diff --git a/src/Common/SortableTableHeaderCell/index.ts b/src/Common/SortableTableHeaderCell/index.ts index fecef0781..807ff93b2 100644 --- a/src/Common/SortableTableHeaderCell/index.ts +++ b/src/Common/SortableTableHeaderCell/index.ts @@ -15,4 +15,5 @@ */ export { default as SortableTableHeaderCell } from './SortableTableHeaderCell' +export { default as useResizableTableConfig } from './useResizableTableConfig' export type { SortableTableHeaderCellProps } from './types' diff --git a/src/Common/SortableTableHeaderCell/types.ts b/src/Common/SortableTableHeaderCell/types.ts index 05a52a0c0..4b0bd9782 100644 --- a/src/Common/SortableTableHeaderCell/types.ts +++ b/src/Common/SortableTableHeaderCell/types.ts @@ -16,7 +16,7 @@ import { SortingOrder } from '../Constants' -export interface SortableTableHeaderCellProps { +export type SortableTableHeaderCellProps = { /** * If true, the cell is sorted */ @@ -49,4 +49,27 @@ export interface SortableTableHeaderCellProps { * @default false */ showTippyOnTruncate?: boolean +} & ( + | { + /** + * Unique identifier for the column + */ + id: string | number + /** + * Resize handler for the table + */ + handleResize: (id: string | number, deltaChange: number) => void + } + | { + id?: never + handleResize?: never + } +) + +export interface UseResizableTableConfigProps { + headersConfig: (Pick & { + width: number | string + maxWidth?: number + minWidth?: number + })[] } diff --git a/src/Common/SortableTableHeaderCell/useResizableTableConfig.tsx b/src/Common/SortableTableHeaderCell/useResizableTableConfig.tsx new file mode 100644 index 000000000..ed7efc9d4 --- /dev/null +++ b/src/Common/SortableTableHeaderCell/useResizableTableConfig.tsx @@ -0,0 +1,66 @@ +import { useEffect, useState } from 'react' +import { UseResizableTableConfigProps } from './types' + +const useResizableTableConfig = ({ headersConfig }: UseResizableTableConfigProps) => { + const [headerDimensionsConfig, setHeaderDimensionsConfig] = useState< + UseResizableTableConfigProps['headersConfig'][number]['width'][] + >([]) + + useEffect(() => { + setHeaderDimensionsConfig(headersConfig.map((config) => config.width)) + }, [JSON.stringify(headersConfig)]) + + const handleResize = ( + headerCellId: UseResizableTableConfigProps['headersConfig'][number]['id'], + deltaChange: number, + ) => { + const headerCellIndexInConfig = headersConfig.findIndex((config) => config.id === headerCellId) + + if (headerCellIndexInConfig < 0) { + return + } + + setHeaderDimensionsConfig((prev) => { + const updatedHeaderDimensionsConfig = structuredClone(prev) + // Only numbers are supported for v1 + if (typeof updatedHeaderDimensionsConfig[headerCellIndexInConfig] !== 'number') { + return prev + } + + const updatedCellDimension = updatedHeaderDimensionsConfig[headerCellIndexInConfig] + deltaChange + const currentHeaderCellConfig = headersConfig[headerCellIndexInConfig] + + if ( + updatedCellDimension < (currentHeaderCellConfig.minWidth ?? 70) || + updatedCellDimension > (currentHeaderCellConfig.maxWidth ?? 600) + ) { + return prev + } + + updatedHeaderDimensionsConfig[headerCellIndexInConfig] = updatedCellDimension + return updatedHeaderDimensionsConfig + }) + } + + const register = (headerCellId: UseResizableTableConfigProps['headersConfig'][number]['id']) => { + const sortableTableHeaderCellConfig = headersConfig.find((config) => config.id === headerCellId) + + if (!sortableTableHeaderCellConfig) { + return null + } + + return { + id: sortableTableHeaderCellConfig.id, + } + } + + return { + gridTemplateColumns: headerDimensionsConfig + .map((config) => (typeof config === 'number' ? `${config}px` : config)) + .join(' '), + handleResize, + register, + } +} + +export default useResizableTableConfig From be4b1b6f91c103999a8670c046a47e52f19cfb79 Mon Sep 17 00:00:00 2001 From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com> Date: Tue, 29 Oct 2024 13:10:28 +0530 Subject: [PATCH 25/43] fix: drag behaviour --- src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx b/src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx index 89c468549..b67313d71 100644 --- a/src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx +++ b/src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx @@ -88,7 +88,7 @@ const SortableTableHeaderCell = ({ x: 0, y: 0, }} - axis="x" + axis="none" onDrag={handleDrag} bounds={{ top: 0, From 5c289b85ee834b4e52cfc1a0fd85268afb6e9a03 Mon Sep 17 00:00:00 2001 From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com> Date: Tue, 29 Oct 2024 13:15:07 +0530 Subject: [PATCH 26/43] fix: clickable part --- .../SortableTableHeaderCell.tsx | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx b/src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx index b67313d71..c7fd747f2 100644 --- a/src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx +++ b/src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx @@ -16,8 +16,8 @@ import { Tooltip } from '@Common/Tooltip' import Draggable, { DraggableProps } from 'react-draggable' -import { ReactComponent as SortIcon } from '../../Assets/Icon/ic-arrow-up-down.svg' -import { ReactComponent as SortArrowDown } from '../../Assets/Icon/ic-sort-arrow-down.svg' +import { ReactComponent as SortIcon } from '@Icons/ic-arrow-up-down.svg' +import { ReactComponent as SortArrowDown } from '@Icons/ic-sort-arrow-down.svg' import { SortingOrder } from '../Constants' import { noop } from '../Helper' import { SortableTableHeaderCellProps } from './types' @@ -70,18 +70,18 @@ const SortableTableHeaderCell = ({ } return ( - - + ) } From 004e73f30e12bf82027f32f95b03fa85075a7ae4 Mon Sep 17 00:00:00 2001 From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com> Date: Tue, 29 Oct 2024 13:32:00 +0530 Subject: [PATCH 27/43] fix: improve typing and styling for sortable table header cell --- .../SortableTableHeaderCell.tsx | 4 +- src/Common/SortableTableHeaderCell/types.ts | 59 +++++++++++-------- 2 files changed, 37 insertions(+), 26 deletions(-) diff --git a/src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx b/src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx index c7fd747f2..7cff7e234 100644 --- a/src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx +++ b/src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx @@ -70,7 +70,7 @@ const SortableTableHeaderCell = ({ } return ( -
+
- -
-
-
- +
+
+
+ + )}
) } From ca8d45d2bf78d1617ba0be6675eafb5cff2752d0 Mon Sep 17 00:00:00 2001 From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com> Date: Tue, 29 Oct 2024 13:39:58 +0530 Subject: [PATCH 29/43] chore: bump version --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index ffce84fa2..cb03863e3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.6.1", + "version": "0.6.1-beta-4", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.6.1", + "version": "0.6.1-beta-4", "license": "ISC", "dependencies": { "@types/react-dates": "^21.8.6", diff --git a/package.json b/package.json index 540626213..49fa178e7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.6.1", + "version": "0.6.1-beta-4", "description": "Supporting common component library", "type": "module", "main": "dist/index.js", From 75013e2a53c7c59dcbd6c7c055b7ff47c77612c1 Mon Sep 17 00:00:00 2001 From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com> Date: Tue, 29 Oct 2024 14:04:41 +0530 Subject: [PATCH 30/43] feat: add prop for isResizable --- package-lock.json | 4 ++-- package.json | 2 +- .../SortableTableHeaderCell/SortableTableHeaderCell.tsx | 3 ++- src/Common/SortableTableHeaderCell/types.ts | 7 +++++++ 4 files changed, 12 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index cb03863e3..5843aba62 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.6.1-beta-4", + "version": "0.6.1-beta-5", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.6.1-beta-4", + "version": "0.6.1-beta-5", "license": "ISC", "dependencies": { "@types/react-dates": "^21.8.6", diff --git a/package.json b/package.json index 49fa178e7..5fd2b07b6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.6.1-beta-4", + "version": "0.6.1-beta-5", "description": "Supporting common component library", "type": "module", "main": "dist/index.js", diff --git a/src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx b/src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx index 20b557cfa..05cb4faf7 100644 --- a/src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx +++ b/src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx @@ -62,8 +62,9 @@ const SortableTableHeaderCell = ({ showTippyOnTruncate = false, id, handleResize, + isResizable, }: SortableTableHeaderCellProps) => { - const isCellResizable = !!(id && handleResize) + const isCellResizable = !!(isResizable && id && handleResize) const renderSortIcon = () => { if (!isSortable) { diff --git a/src/Common/SortableTableHeaderCell/types.ts b/src/Common/SortableTableHeaderCell/types.ts index f403de60a..15f3f058f 100644 --- a/src/Common/SortableTableHeaderCell/types.ts +++ b/src/Common/SortableTableHeaderCell/types.ts @@ -32,6 +32,12 @@ export type SortableTableHeaderCellProps = { * Unique identifier for the column */ id: string | number + /** + * If true, the cell is resizable + * + * @default false + */ + isResizable: true | boolean /** * Resize handler for the table */ @@ -39,6 +45,7 @@ export type SortableTableHeaderCellProps = { } | { id?: never + isResizable?: false | undefined handleResize?: never } ) & From 5a1902afb8f6ac7858583f8a1e970fc2076e6675 Mon Sep 17 00:00:00 2001 From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com> Date: Tue, 29 Oct 2024 14:41:59 +0530 Subject: [PATCH 31/43] refactor: styling --- .../SortableTableHeaderCell/SortableTableHeaderCell.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx b/src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx index 05cb4faf7..6485f1e83 100644 --- a/src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx +++ b/src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx @@ -116,11 +116,9 @@ const SortableTableHeaderCell = ({ }} >
From 457ed64799e4858ccc86446f5bd37ec67479215d Mon Sep 17 00:00:00 2001 From: Arun Jain Date: Tue, 29 Oct 2024 16:28:47 +0530 Subject: [PATCH 32/43] fix: not to update url from local storage in case of primary params --- src/Common/Hooks/useUrlFilters/types.ts | 2 +- .../Hooks/useUrlFilters/useUrlFilters.ts | 20 ++++++++++++++++--- src/Common/Hooks/useUrlFilters/utils.tsx | 5 +++++ 3 files changed, 23 insertions(+), 4 deletions(-) create mode 100644 src/Common/Hooks/useUrlFilters/utils.tsx diff --git a/src/Common/Hooks/useUrlFilters/types.ts b/src/Common/Hooks/useUrlFilters/types.ts index 349240541..5dc12d8c8 100644 --- a/src/Common/Hooks/useUrlFilters/types.ts +++ b/src/Common/Hooks/useUrlFilters/types.ts @@ -25,7 +25,7 @@ export interface UseUrlFiltersProps { * Callback function for parsing the search params */ parseSearchParams?: (searchParams: URLSearchParams) => K - localStorageKey?: string + localStorageKey?: `${string}__${string}` } export type UseUrlFiltersReturnType = K & { diff --git a/src/Common/Hooks/useUrlFilters/useUrlFilters.ts b/src/Common/Hooks/useUrlFilters/useUrlFilters.ts index 5af2fdc96..2905bed24 100644 --- a/src/Common/Hooks/useUrlFilters/useUrlFilters.ts +++ b/src/Common/Hooks/useUrlFilters/useUrlFilters.ts @@ -19,6 +19,7 @@ import { useHistory, useLocation } from 'react-router-dom' import { DEFAULT_BASE_PAGE_SIZE, EXCLUDED_FALSY_VALUES, SortingOrder } from '../../Constants' import { DEFAULT_PAGE_NUMBER, URL_FILTER_KEYS } from './constants' import { UseUrlFiltersProps, UseUrlFiltersReturnType } from './types' +import { setItemInLocalStorageIfKeyExists } from './utils' const { PAGE_SIZE, PAGE_NUMBER, SEARCH_KEY, SORT_BY, SORT_ORDER } = URL_FILTER_KEYS @@ -127,7 +128,7 @@ const useUrlFilters = ({ const clearFilters = () => { history.replace({ search: '' }) - localStorage.setItem(localStorageKey, '') + setItemInLocalStorageIfKeyExists(localStorageKey, '') } const updateSearchParams = (paramsToSerialize: Partial) => { @@ -145,13 +146,26 @@ const useUrlFilters = ({ searchParams.delete(key) } }) - localStorage.setItem(localStorageKey, JSON.stringify(parseSearchParams(searchParams))) + // Skipping primary params => pageSize, pageNumber, searchKey, sortBy, sortOrder + setItemInLocalStorageIfKeyExists(localStorageKey, JSON.stringify(parseSearchParams(searchParams))) // Not replacing the params as it is being done by _resetPageNumber _resetPageNumber() } useEffect(() => { - if (!localStorageKey) { + // If we have pageSize || pageNumber || searchKey || sortBy || sortOrder in params, no need to change other filters + const paramsSortByKey = searchParams.get(SORT_BY) || '' + const paramsSortByOrder = searchParams.get(SORT_ORDER) || '' + const paramsPageNumber = searchParams.get(PAGE_NUMBER) || 0 + const paramsPageSize = searchParams.get(PAGE_SIZE) || 0 + if ( + !localStorageKey || + !!paramsPageSize || + !!paramsPageNumber || + !!searchKey || + !!paramsSortByKey || + !!paramsSortByOrder + ) { return } if ( diff --git a/src/Common/Hooks/useUrlFilters/utils.tsx b/src/Common/Hooks/useUrlFilters/utils.tsx new file mode 100644 index 000000000..e587cb113 --- /dev/null +++ b/src/Common/Hooks/useUrlFilters/utils.tsx @@ -0,0 +1,5 @@ +export const setItemInLocalStorageIfKeyExists = (localStorageKey: string, value: string) => { + if (localStorageKey) { + localStorage.setItem(localStorageKey, value) + } +} From ddf378ea7002e990097f99eb80ae6f11db2cafbd Mon Sep 17 00:00:00 2001 From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com> Date: Tue, 29 Oct 2024 17:18:49 +0530 Subject: [PATCH 33/43] fix: hover and dragging states --- package-lock.json | 4 ++-- package.json | 2 +- .../SortableTableHeaderCell.tsx | 14 +++++--------- .../sortableTableHeaderCell.scss | 10 ++++++++++ 4 files changed, 18 insertions(+), 12 deletions(-) create mode 100644 src/Common/SortableTableHeaderCell/sortableTableHeaderCell.scss diff --git a/package-lock.json b/package-lock.json index 5843aba62..f9e3620ea 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.6.1-beta-5", + "version": "0.6.1-beta-6", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.6.1-beta-5", + "version": "0.6.1-beta-6", "license": "ISC", "dependencies": { "@types/react-dates": "^21.8.6", diff --git a/package.json b/package.json index 5fd2b07b6..8acb2fbcd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.6.1-beta-5", + "version": "0.6.1-beta-6", "description": "Supporting common component library", "type": "module", "main": "dist/index.js", diff --git a/src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx b/src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx index 6485f1e83..acac25ea1 100644 --- a/src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx +++ b/src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx @@ -21,6 +21,7 @@ import { ReactComponent as SortArrowDown } from '@Icons/ic-sort-arrow-down.svg' import { SortingOrder } from '../Constants' import { noop } from '../Helper' import { SortableTableHeaderCellProps } from './types' +import './sortableTableHeaderCell.scss' /** * Reusable component for the table header cell with support for sorting icons @@ -103,7 +104,8 @@ const SortableTableHeaderCell = ({ {isCellResizable && ( -
-
+
+
)} diff --git a/src/Common/SortableTableHeaderCell/sortableTableHeaderCell.scss b/src/Common/SortableTableHeaderCell/sortableTableHeaderCell.scss new file mode 100644 index 000000000..325ab2310 --- /dev/null +++ b/src/Common/SortableTableHeaderCell/sortableTableHeaderCell.scss @@ -0,0 +1,10 @@ +.sortable-table-header { + &__resize-btn { + &:hover, &--dragging { + > div { + height: 100% !important; + background-color: var(--B500); + } + } + } +} From 58dd157cf792be12d68f6a61c3c07ac55f705f67 Mon Sep 17 00:00:00 2001 From: Arun Jain Date: Tue, 29 Oct 2024 17:49:02 +0530 Subject: [PATCH 34/43] feat: update local storage acc to search string --- package-lock.json | 4 +-- package.json | 2 +- .../Hooks/useUrlFilters/useUrlFilters.ts | 32 ++++--------------- 3 files changed, 9 insertions(+), 29 deletions(-) diff --git a/package-lock.json b/package-lock.json index 90430aa3b..12dbd759a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.6.1-beta-1", + "version": "0.6.1-beta-7", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.6.1-beta-1", + "version": "0.6.1-beta-7", "license": "ISC", "dependencies": { "@types/react-dates": "^21.8.6", diff --git a/package.json b/package.json index fb7634513..c1d283e6b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.6.1-beta-1", + "version": "0.6.1-beta-7", "description": "Supporting common component library", "type": "module", "main": "dist/index.js", diff --git a/src/Common/Hooks/useUrlFilters/useUrlFilters.ts b/src/Common/Hooks/useUrlFilters/useUrlFilters.ts index 2905bed24..b824a2f1f 100644 --- a/src/Common/Hooks/useUrlFilters/useUrlFilters.ts +++ b/src/Common/Hooks/useUrlFilters/useUrlFilters.ts @@ -153,34 +153,14 @@ const useUrlFilters = ({ } useEffect(() => { - // If we have pageSize || pageNumber || searchKey || sortBy || sortOrder in params, no need to change other filters - const paramsSortByKey = searchParams.get(SORT_BY) || '' - const paramsSortByOrder = searchParams.get(SORT_ORDER) || '' - const paramsPageNumber = searchParams.get(PAGE_NUMBER) || 0 - const paramsPageSize = searchParams.get(PAGE_SIZE) || 0 - if ( - !localStorageKey || - !!paramsPageSize || - !!paramsPageNumber || - !!searchKey || - !!paramsSortByKey || - !!paramsSortByOrder - ) { + // if we have search string, set secondary params in local storage accordingly + if (location.search) { + localStorage.setItem(localStorageKey, JSON.stringify(parsedParams)) return } - if ( - Object.keys(parsedParams).some( - (key) => - (Array.isArray(parsedParams[key]) && parsedParams[key].length) || - (typeof parsedParams[key] === 'string' && !!parsedParams[key]), - ) - ) { - localStorage.setItem(localStorageKey, JSON.stringify(parsedParams)) - } else { - const localStorageValue = localStorage.getItem(localStorageKey) - if (localStorageValue) { - updateSearchParams(JSON.parse(localStorageValue)) - } + const localStorageValue = localStorage.getItem(localStorageKey) + if (localStorageValue) { + updateSearchParams(JSON.parse(localStorageValue)) } }, []) From 4c2b2af3ad7d86e6359920f71520cd456db4f60b Mon Sep 17 00:00:00 2001 From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com> Date: Tue, 29 Oct 2024 18:00:07 +0530 Subject: [PATCH 35/43] feat: add transition on drag hover --- .../SortableTableHeaderCell/sortableTableHeaderCell.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/Common/SortableTableHeaderCell/sortableTableHeaderCell.scss b/src/Common/SortableTableHeaderCell/sortableTableHeaderCell.scss index 325ab2310..a2a852f58 100644 --- a/src/Common/SortableTableHeaderCell/sortableTableHeaderCell.scss +++ b/src/Common/SortableTableHeaderCell/sortableTableHeaderCell.scss @@ -1,5 +1,9 @@ .sortable-table-header { &__resize-btn { + > div { + transition: all 0.1s ease-out; + } + &:hover, &--dragging { > div { height: 100% !important; From b2a78b305b6d87c835420574aa2760a62421bb4e Mon Sep 17 00:00:00 2001 From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com> Date: Tue, 29 Oct 2024 18:15:32 +0530 Subject: [PATCH 36/43] refactor: code clean up --- .../SortableTableHeaderCell/constants.ts | 3 +++ .../useResizableTableConfig.tsx | 18 +++--------------- 2 files changed, 6 insertions(+), 15 deletions(-) create mode 100644 src/Common/SortableTableHeaderCell/constants.ts diff --git a/src/Common/SortableTableHeaderCell/constants.ts b/src/Common/SortableTableHeaderCell/constants.ts new file mode 100644 index 000000000..76cc77447 --- /dev/null +++ b/src/Common/SortableTableHeaderCell/constants.ts @@ -0,0 +1,3 @@ +export const DEFAULT_MINIMUM_HEADER_WIDTH = 70 + +export const DEFAULT_MAXIMUM_HEADER_WIDTH = 600 diff --git a/src/Common/SortableTableHeaderCell/useResizableTableConfig.tsx b/src/Common/SortableTableHeaderCell/useResizableTableConfig.tsx index ed7efc9d4..183f9fe3a 100644 --- a/src/Common/SortableTableHeaderCell/useResizableTableConfig.tsx +++ b/src/Common/SortableTableHeaderCell/useResizableTableConfig.tsx @@ -1,5 +1,6 @@ import { useEffect, useState } from 'react' import { UseResizableTableConfigProps } from './types' +import { DEFAULT_MAXIMUM_HEADER_WIDTH, DEFAULT_MINIMUM_HEADER_WIDTH } from './constants' const useResizableTableConfig = ({ headersConfig }: UseResizableTableConfigProps) => { const [headerDimensionsConfig, setHeaderDimensionsConfig] = useState< @@ -31,8 +32,8 @@ const useResizableTableConfig = ({ headersConfig }: UseResizableTableConfigProps const currentHeaderCellConfig = headersConfig[headerCellIndexInConfig] if ( - updatedCellDimension < (currentHeaderCellConfig.minWidth ?? 70) || - updatedCellDimension > (currentHeaderCellConfig.maxWidth ?? 600) + updatedCellDimension < (currentHeaderCellConfig.minWidth ?? DEFAULT_MINIMUM_HEADER_WIDTH) || + updatedCellDimension > (currentHeaderCellConfig.maxWidth ?? DEFAULT_MAXIMUM_HEADER_WIDTH) ) { return prev } @@ -42,24 +43,11 @@ const useResizableTableConfig = ({ headersConfig }: UseResizableTableConfigProps }) } - const register = (headerCellId: UseResizableTableConfigProps['headersConfig'][number]['id']) => { - const sortableTableHeaderCellConfig = headersConfig.find((config) => config.id === headerCellId) - - if (!sortableTableHeaderCellConfig) { - return null - } - - return { - id: sortableTableHeaderCellConfig.id, - } - } - return { gridTemplateColumns: headerDimensionsConfig .map((config) => (typeof config === 'number' ? `${config}px` : config)) .join(' '), handleResize, - register, } } From f55d4ed0dd8c2f9fdcde2ca26da22841367263e4 Mon Sep 17 00:00:00 2001 From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com> Date: Mon, 4 Nov 2024 11:45:03 +0530 Subject: [PATCH 37/43] doc: update the ts doc --- src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx b/src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx index acac25ea1..8d2f34600 100644 --- a/src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx +++ b/src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx @@ -45,10 +45,11 @@ import './sortableTableHeaderCell.scss' * /> * ``` * - * * @example Resizable cell + * * @example Resizable cell (Layout to be controlled externally using useResizableTableConfig) * ```tsx * * ``` From 746148b641186cd42c5a4be41739ef0fb05eaf7b Mon Sep 17 00:00:00 2001 From: Arun Jain Date: Mon, 4 Nov 2024 13:40:08 +0530 Subject: [PATCH 38/43] chore: version bump --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 300334ee6..b368ff2a1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.6.2", + "version": "0.6.3", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.6.2", + "version": "0.6.3", "license": "ISC", "dependencies": { "@types/react-dates": "^21.8.6", diff --git a/package.json b/package.json index 5c464dacb..0939abd83 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.6.2", + "version": "0.6.3", "description": "Supporting common component library", "type": "module", "main": "dist/index.js", From ed19bfd762b2f148291161491da08b59c393006a Mon Sep 17 00:00:00 2001 From: Arun Jain Date: Mon, 4 Nov 2024 13:58:30 +0530 Subject: [PATCH 39/43] chore: version bump --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index b368ff2a1..95bd7f1a2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.6.3", + "version": "0.6.4", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.6.3", + "version": "0.6.4", "license": "ISC", "dependencies": { "@types/react-dates": "^21.8.6", diff --git a/package.json b/package.json index 0939abd83..e6f238dfb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.6.3", + "version": "0.6.4", "description": "Supporting common component library", "type": "module", "main": "dist/index.js", From 55fa6ff2cfc16b08ea99aa7c5223373a880cf1c7 Mon Sep 17 00:00:00 2001 From: Arun Jain Date: Mon, 4 Nov 2024 14:23:55 +0530 Subject: [PATCH 40/43] chore: version bump --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 95bd7f1a2..780424963 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.6.4", + "version": "0.6.4-beta-1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.6.4", + "version": "0.6.4-beta-1", "license": "ISC", "dependencies": { "@types/react-dates": "^21.8.6", diff --git a/package.json b/package.json index e6f238dfb..c49f1fe1b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.6.4", + "version": "0.6.4-beta-1", "description": "Supporting common component library", "type": "module", "main": "dist/index.js", From a3d478be7bceae8335c398260dc788ec453d3daf Mon Sep 17 00:00:00 2001 From: Arun Jain Date: Tue, 5 Nov 2024 12:13:38 +0530 Subject: [PATCH 41/43] chore: version bump --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 780424963..4995bef46 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.6.4-beta-1", + "version": "0.6.5", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.6.4-beta-1", + "version": "0.6.5", "license": "ISC", "dependencies": { "@types/react-dates": "^21.8.6", diff --git a/package.json b/package.json index c49f1fe1b..8b3b3cf5e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.6.4-beta-1", + "version": "0.6.5", "description": "Supporting common component library", "type": "module", "main": "dist/index.js", From 9eeb2f3dfd85736b2465f47cd9c65b83a836a57e Mon Sep 17 00:00:00 2001 From: Arun Jain Date: Tue, 5 Nov 2024 12:29:55 +0530 Subject: [PATCH 42/43] fix: add check for parseSearchParams --- package-lock.json | 4 ++-- package.json | 2 +- src/Common/Hooks/useUrlFilters/useUrlFilters.ts | 12 ++++++++++-- 3 files changed, 13 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4995bef46..d910cde10 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.6.5", + "version": "0.6.4-beta-5", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.6.5", + "version": "0.6.4-beta-5", "license": "ISC", "dependencies": { "@types/react-dates": "^21.8.6", diff --git a/package.json b/package.json index 8b3b3cf5e..3cb8bae8b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.6.5", + "version": "0.6.4-beta-5", "description": "Supporting common component library", "type": "module", "main": "dist/index.js", diff --git a/src/Common/Hooks/useUrlFilters/useUrlFilters.ts b/src/Common/Hooks/useUrlFilters/useUrlFilters.ts index b824a2f1f..6abb0a39e 100644 --- a/src/Common/Hooks/useUrlFilters/useUrlFilters.ts +++ b/src/Common/Hooks/useUrlFilters/useUrlFilters.ts @@ -49,6 +49,14 @@ const useUrlFilters = ({ const history = useHistory() const searchParams = new URLSearchParams(location.search) + const getParsedSearchParams: UseUrlFiltersProps['parseSearchParams'] = (searchParamsToParse) => { + if (parseSearchParams) { + return parseSearchParams(searchParamsToParse) + } + + return {} as K + } + const { pageSize, pageNumber, searchKey, sortBy, sortOrder, parsedParams } = useMemo(() => { const _pageSize = searchParams.get(PAGE_SIZE) const _pageNumber = searchParams.get(PAGE_NUMBER) @@ -60,7 +68,7 @@ const useUrlFilters = ({ // Fallback to ascending order const sortByOrder = Object.values(SortingOrder).includes(_sortOrder) ? _sortOrder : SortingOrder.ASC - const _parsedParams = parseSearchParams ? parseSearchParams(searchParams) : ({} as K) + const _parsedParams = getParsedSearchParams(searchParams) return { pageSize: Number(_pageSize) || DEFAULT_BASE_PAGE_SIZE, @@ -147,7 +155,7 @@ const useUrlFilters = ({ } }) // Skipping primary params => pageSize, pageNumber, searchKey, sortBy, sortOrder - setItemInLocalStorageIfKeyExists(localStorageKey, JSON.stringify(parseSearchParams(searchParams))) + setItemInLocalStorageIfKeyExists(localStorageKey, JSON.stringify(getParsedSearchParams(searchParams))) // Not replacing the params as it is being done by _resetPageNumber _resetPageNumber() } From 41d024c59765f87427fcb32375f9c0fe3145cf34 Mon Sep 17 00:00:00 2001 From: Arun Jain Date: Tue, 5 Nov 2024 13:45:52 +0530 Subject: [PATCH 43/43] chore: version bump --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index d910cde10..4995bef46 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.6.4-beta-5", + "version": "0.6.5", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.6.4-beta-5", + "version": "0.6.5", "license": "ISC", "dependencies": { "@types/react-dates": "^21.8.6", diff --git a/package.json b/package.json index 3cb8bae8b..8b3b3cf5e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.6.4-beta-5", + "version": "0.6.5", "description": "Supporting common component library", "type": "module", "main": "dist/index.js",