From 808b96c2e0fa78f3ce680b48dfdfe94c4abb1f69 Mon Sep 17 00:00:00 2001 From: Hana Xu Date: Tue, 3 Dec 2024 14:19:01 -0500 Subject: [PATCH 01/13] surface tags for node pools --- packages/api-v4/src/kubernetes/types.ts | 2 + .../src/factories/kubernetesCluster.ts | 1 + .../NodePoolsDisplay/NodePool.tsx | 6 ++ .../NodePoolsDisplay/NodePoolsDisplay.tsx | 4 +- .../NodePoolsDisplay/NodeTable.test.tsx | 6 +- .../NodePoolsDisplay/NodeTable.tsx | 93 +++++++++++++------ 6 files changed, 83 insertions(+), 29 deletions(-) diff --git a/packages/api-v4/src/kubernetes/types.ts b/packages/api-v4/src/kubernetes/types.ts index 262db13dfc0..6642fcec895 100644 --- a/packages/api-v4/src/kubernetes/types.ts +++ b/packages/api-v4/src/kubernetes/types.ts @@ -23,6 +23,7 @@ export interface KubeNodePoolResponse { count: number; id: number; nodes: PoolNodeResponse[]; + tags: string[]; type: string; autoscaler: AutoscaleSettings; disk_encryption?: EncryptionStatus; // @TODO LDE: remove optionality once LDE is fully rolled out @@ -42,6 +43,7 @@ export interface CreateNodePoolData { export interface UpdateNodePoolData { autoscaler: AutoscaleSettings; count: number; + tags: string[]; } export interface AutoscaleSettings { diff --git a/packages/manager/src/factories/kubernetesCluster.ts b/packages/manager/src/factories/kubernetesCluster.ts index 9680a530b95..5d5d3dcf3bd 100644 --- a/packages/manager/src/factories/kubernetesCluster.ts +++ b/packages/manager/src/factories/kubernetesCluster.ts @@ -29,6 +29,7 @@ export const nodePoolFactory = Factory.Sync.makeFactory({ disk_encryption: 'enabled', id: Factory.each((id) => id), nodes: kubeLinodeFactory.buildList(3), + tags: [], type: 'g6-standard-1', }); diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePool.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePool.tsx index 46a8512f97f..66f7e915a47 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePool.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePool.tsx @@ -21,6 +21,7 @@ import type { EncryptionStatus } from '@linode/api-v4/lib/linodes/types'; interface Props { autoscaler: AutoscaleSettings; + clusterId: number; encryptionStatus: EncryptionStatus | undefined; handleClickResize: (poolId: number) => void; isOnlyNodePool: boolean; @@ -30,12 +31,14 @@ interface Props { openRecycleAllNodesDialog: (poolId: number) => void; openRecycleNodeDialog: (nodeID: string, linodeLabel: string) => void; poolId: number; + tags: string[]; typeLabel: string; } export const NodePool = (props: Props) => { const { autoscaler, + clusterId, encryptionStatus, handleClickResize, isOnlyNodePool, @@ -45,6 +48,7 @@ export const NodePool = (props: Props) => { openRecycleAllNodesDialog, openRecycleNodeDialog, poolId, + tags, typeLabel, } = props; @@ -134,10 +138,12 @@ export const NodePool = (props: Props) => { diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePoolsDisplay.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePoolsDisplay.tsx index 89dc3d25b72..7c6bf596049 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePoolsDisplay.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePoolsDisplay.tsx @@ -104,7 +104,7 @@ export const NodePoolsDisplay = (props: Props) => { {poolsError && } {_pools?.map((thisPool) => { - const { disk_encryption, id, nodes } = thisPool; + const { disk_encryption, id, nodes, tags } = thisPool; const thisPoolType = types?.find( (thisType) => thisType.id === thisPool.type @@ -131,12 +131,14 @@ export const NodePoolsDisplay = (props: Props) => { setIsRecycleNodeOpen(true); }} autoscaler={thisPool.autoscaler} + clusterId={clusterID} encryptionStatus={disk_encryption} handleClickResize={handleOpenResizeDrawer} isOnlyNodePool={pools?.length === 1} key={id} nodes={nodes ?? []} poolId={thisPool.id} + tags={tags} typeLabel={typeLabel} /> ); diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.test.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.test.tsx index f2a3c863165..33b73495240 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.test.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.test.tsx @@ -4,17 +4,21 @@ import { kubeLinodeFactory } from 'src/factories/kubernetesCluster'; import { linodeFactory } from 'src/factories/linodes'; import { renderWithTheme } from 'src/utilities/testHelpers'; -import { NodeTable, Props, encryptionStatusTestId } from './NodeTable'; +import { NodeTable, encryptionStatusTestId } from './NodeTable'; + +import type { Props } from './NodeTable'; const mockLinodes = linodeFactory.buildList(3); const mockKubeNodes = kubeLinodeFactory.buildList(3); const props: Props = { + clusterId: 1, encryptionStatus: 'enabled', nodes: mockKubeNodes, openRecycleNodeDialog: vi.fn(), poolId: 1, + tags: [], typeLabel: 'Linode 2G', }; diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.tsx index 2bf57d29baf..77ad9a4d553 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.tsx @@ -1,4 +1,5 @@ import { Box, TooltipIcon, Typography } from '@linode/ui'; +import { enqueueSnackbar } from 'notistack'; import * as React from 'react'; import Lock from 'src/assets/icons/lock.svg'; @@ -12,11 +13,13 @@ import { Table } from 'src/components/Table'; import { TableBody } from 'src/components/TableBody'; import { TableCell } from 'src/components/TableCell'; import { TableContentWrapper } from 'src/components/TableContentWrapper/TableContentWrapper'; -import { TableFooter } from 'src/components/TableFooter'; import { TableHead } from 'src/components/TableHead'; import { TableRow } from 'src/components/TableRow'; import { TableSortCell } from 'src/components/TableSortCell'; +import { TagCell } from 'src/components/TagCell/TagCell'; +import { useUpdateNodePoolMutation } from 'src/queries/kubernetes'; import { useAllLinodesQuery } from 'src/queries/linodes/linodes'; +import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; import { NodeRow as _NodeRow } from './NodeRow'; import { StyledTypography, StyledVerticalDivider } from './NodeTable.styles'; @@ -27,10 +30,12 @@ import type { EncryptionStatus } from '@linode/api-v4/lib/linodes/types'; import type { LinodeWithMaintenance } from 'src/utilities/linodes'; export interface Props { + clusterId: number; encryptionStatus: EncryptionStatus | undefined; nodes: PoolNodeResponse[]; openRecycleNodeDialog: (nodeID: string, linodeLabel: string) => void; poolId: number; + tags: string[]; typeLabel: string; } @@ -38,10 +43,12 @@ export const encryptionStatusTestId = 'encryption-status-fragment'; export const NodeTable = React.memo((props: Props) => { const { + clusterId, encryptionStatus, nodes, openRecycleNodeDialog, poolId, + tags, typeLabel, } = props; @@ -50,6 +57,25 @@ export const NodeTable = React.memo((props: Props) => { isDiskEncryptionFeatureEnabled, } = useIsDiskEncryptionFeatureEnabled(); + const { mutateAsync: updateNodePool } = useUpdateNodePoolMutation( + clusterId, + poolId + ); + + const updateTags = React.useCallback( + (tags: string[]) => { + return updateNodePool({ tags }).catch((e) => + enqueueSnackbar( + getAPIErrorOrDefault(e, 'Error updating tags')[0].reason, + { + variant: 'error', + } + ) + ); + }, + [updateNodePool] + ); + const rowData = nodes.map((thisNode) => nodeToRow(thisNode, linodes ?? [])); return ( @@ -131,33 +157,46 @@ export const NodeTable = React.memo((props: Props) => { })} - - - - {isDiskEncryptionFeatureEnabled && - encryptionStatus !== undefined ? ( - - Pool ID {poolId} - - - - ) : ( - Pool ID {poolId} - )} - - - + ({ + background: theme.bg.bgPaper, + })} + alignItems="center" + display="flex" + justifyContent="space-between" + px={2} + > + + {isDiskEncryptionFeatureEnabled && + encryptionStatus !== undefined ? ( + <> + Pool ID {poolId} + + + + ) : ( + Pool ID {poolId} + )} + + + Date: Wed, 4 Dec 2024 13:01:09 -0500 Subject: [PATCH 02/13] wip e2e --- .../e2e/core/kubernetes/lke-update.spec.ts | 64 +++++++++++++++++++ 1 file changed, 64 insertions(+) diff --git a/packages/manager/cypress/e2e/core/kubernetes/lke-update.spec.ts b/packages/manager/cypress/e2e/core/kubernetes/lke-update.spec.ts index 4d4f89c60cb..da96de3e36c 100644 --- a/packages/manager/cypress/e2e/core/kubernetes/lke-update.spec.ts +++ b/packages/manager/cypress/e2e/core/kubernetes/lke-update.spec.ts @@ -860,6 +860,70 @@ describe('LKE cluster updates', () => { }); }); + it.only('can add and delete node pool tags', () => { + const mockCluster = kubernetesClusterFactory.build({ + k8s_version: latestKubernetesVersion, + }); + + const mockNodePoolNoTags = nodePoolFactory.build({ + id: 1, + type: 'g6-dedicated-4', + }); + + const mockNodePoolWithTags = { + ...mockNodePoolNoTags, + tags: ['test-tag'], + }; + + mockGetCluster(mockCluster).as('getCluster'); + mockGetClusterPools(mockCluster.id, [mockNodePoolNoTags]).as( + 'getNodePoolsNoTags' + ); + mockGetKubernetesVersions().as('getVersions'); + mockUpdateNodePool(mockCluster.id, mockNodePoolWithTags).as('addTag'); + mockUpdateNodePool(mockCluster.id, mockNodePoolNoTags).as('deleteTag'); + mockGetDashboardUrl(mockCluster.id); + mockGetApiEndpoints(mockCluster.id); + + cy.visitWithLogin(`/kubernetes/clusters/${mockCluster.id}`); + cy.wait(['@getCluster', '@getNodePoolsNoTags', '@getVersions']); + + cy.get('[data-qa-node-pool-id="1"]').within(() => { + ui.button.findByTitle('Add a tag').should('be.visible').click(); + + cy.findByLabelText('Create or Select a Tag') + .should('be.visible') + .type(`${mockNodePoolWithTags.tags[0]}`); + + ui.autocompletePopper + .findByTitle(`Create "${mockNodePoolWithTags.tags[0]}"`) + .scrollIntoView() + .should('be.visible') + .click(); + }); + + mockGetClusterPools(mockCluster.id, [mockNodePoolWithTags]).as( + 'getNodePoolsWithTags' + ); + + cy.wait(['@addTag', '@getNodePoolsWithTags']); + + // // Delete the newly added node pool tag. + // cy.get(`[data-qa-tag="${mockNodePoolWithTags.tags[0]}"]`) + // .should('be.visible') + // .within(() => { + // ui.button + // .findByTitle('Delete tag') + // .should('be.visible') + // .should('be.enabled') + // .click(); + // }); + + // cy.wait(['@deleteTag', '@getNodePoolsNoTags']); + // cy.get(`[data-qa-tag="${mockNodePoolWithTags.tags[0]}"]`) + // .should('not.exist') + }); + describe('LKE cluster updates for DC-specific prices', () => { /* * - Confirms node pool resize UI flow using mocked API responses. From 0a7eec4cdf17385ed897a8f16744e28f4bde3af0 Mon Sep 17 00:00:00 2001 From: Hana Xu Date: Thu, 5 Dec 2024 11:12:37 -0500 Subject: [PATCH 03/13] fix e2e --- .../e2e/core/kubernetes/lke-update.spec.ts | 32 ++++++++++--------- 1 file changed, 17 insertions(+), 15 deletions(-) diff --git a/packages/manager/cypress/e2e/core/kubernetes/lke-update.spec.ts b/packages/manager/cypress/e2e/core/kubernetes/lke-update.spec.ts index da96de3e36c..e02cc67ceb1 100644 --- a/packages/manager/cypress/e2e/core/kubernetes/lke-update.spec.ts +++ b/packages/manager/cypress/e2e/core/kubernetes/lke-update.spec.ts @@ -881,7 +881,6 @@ describe('LKE cluster updates', () => { ); mockGetKubernetesVersions().as('getVersions'); mockUpdateNodePool(mockCluster.id, mockNodePoolWithTags).as('addTag'); - mockUpdateNodePool(mockCluster.id, mockNodePoolNoTags).as('deleteTag'); mockGetDashboardUrl(mockCluster.id); mockGetApiEndpoints(mockCluster.id); @@ -908,20 +907,23 @@ describe('LKE cluster updates', () => { cy.wait(['@addTag', '@getNodePoolsWithTags']); - // // Delete the newly added node pool tag. - // cy.get(`[data-qa-tag="${mockNodePoolWithTags.tags[0]}"]`) - // .should('be.visible') - // .within(() => { - // ui.button - // .findByTitle('Delete tag') - // .should('be.visible') - // .should('be.enabled') - // .click(); - // }); - - // cy.wait(['@deleteTag', '@getNodePoolsNoTags']); - // cy.get(`[data-qa-tag="${mockNodePoolWithTags.tags[0]}"]`) - // .should('not.exist') + mockUpdateNodePool(mockCluster.id, mockNodePoolNoTags).as('deleteTag'); + mockGetClusterPools(mockCluster.id, [mockNodePoolNoTags]).as( + 'getNodePoolsNoTags' + ); + + // Delete the newly added node pool tag. + cy.get(`[data-qa-tag="${mockNodePoolWithTags.tags[0]}"]`) + .should('be.visible') + .within(() => { + cy.get('[data-qa-delete-tag="true"]').should('be.visible').click(); + }); + + cy.wait(['@deleteTag', '@getNodePoolsNoTags']); + + cy.get(`[data-qa-tag="${mockNodePoolWithTags.tags[0]}"]`).should( + 'not.exist' + ); }); describe('LKE cluster updates for DC-specific prices', () => { From bb72b611f2300b677f64da78c1a28f1103a99082 Mon Sep 17 00:00:00 2001 From: Hana Xu Date: Thu, 5 Dec 2024 11:14:39 -0500 Subject: [PATCH 04/13] Added changeset: Surface Node Pool Tags --- packages/manager/.changeset/pr-11368-added-1733415278919.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 packages/manager/.changeset/pr-11368-added-1733415278919.md diff --git a/packages/manager/.changeset/pr-11368-added-1733415278919.md b/packages/manager/.changeset/pr-11368-added-1733415278919.md new file mode 100644 index 00000000000..56e5974b69f --- /dev/null +++ b/packages/manager/.changeset/pr-11368-added-1733415278919.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Added +--- + +Surface Node Pool Tags ([#11368](https://github.com/linode/manager/pull/11368)) From 04f38e34ee1a81bd7036168b9b05ebfc24fa6014 Mon Sep 17 00:00:00 2001 From: Hana Xu Date: Thu, 5 Dec 2024 11:41:37 -0500 Subject: [PATCH 05/13] fix unit test --- .../NodePoolsDisplay/NodeTable.tsx | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.tsx index 77ad9a4d553..81576b6eeaf 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.tsx @@ -167,23 +167,21 @@ export const NodeTable = React.memo((props: Props) => { justifyContent="space-between" px={2} > - + {isDiskEncryptionFeatureEnabled && encryptionStatus !== undefined ? ( - <> + Pool ID {poolId} - + ) : ( Pool ID {poolId} )} From 2f1f2934d267d15f7ef1e2d0aabc9b64b01189f7 Mon Sep 17 00:00:00 2001 From: Hana Xu Date: Thu, 5 Dec 2024 12:43:36 -0500 Subject: [PATCH 06/13] Added changeset: tags to KubeNodePoolResponse and CreateNodePoolData --- packages/api-v4/.changeset/pr-11368-added-1733420616390.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 packages/api-v4/.changeset/pr-11368-added-1733420616390.md diff --git a/packages/api-v4/.changeset/pr-11368-added-1733420616390.md b/packages/api-v4/.changeset/pr-11368-added-1733420616390.md new file mode 100644 index 00000000000..36bab5e146b --- /dev/null +++ b/packages/api-v4/.changeset/pr-11368-added-1733420616390.md @@ -0,0 +1,5 @@ +--- +"@linode/api-v4": Added +--- + +tags to KubeNodePoolResponse and CreateNodePoolData ([#11368](https://github.com/linode/manager/pull/11368)) From c7ab1c42e7989d8e7d4217fce8c4e8335a98a6b8 Mon Sep 17 00:00:00 2001 From: Hana Xu Date: Thu, 5 Dec 2024 12:58:35 -0500 Subject: [PATCH 07/13] clean up --- .../manager/cypress/e2e/core/kubernetes/lke-update.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/manager/cypress/e2e/core/kubernetes/lke-update.spec.ts b/packages/manager/cypress/e2e/core/kubernetes/lke-update.spec.ts index e02cc67ceb1..9557c469128 100644 --- a/packages/manager/cypress/e2e/core/kubernetes/lke-update.spec.ts +++ b/packages/manager/cypress/e2e/core/kubernetes/lke-update.spec.ts @@ -860,7 +860,7 @@ describe('LKE cluster updates', () => { }); }); - it.only('can add and delete node pool tags', () => { + it('can add and delete node pool tags', () => { const mockCluster = kubernetesClusterFactory.build({ k8s_version: latestKubernetesVersion, }); @@ -887,7 +887,7 @@ describe('LKE cluster updates', () => { cy.visitWithLogin(`/kubernetes/clusters/${mockCluster.id}`); cy.wait(['@getCluster', '@getNodePoolsNoTags', '@getVersions']); - cy.get('[data-qa-node-pool-id="1"]').within(() => { + cy.get(`[data-qa-node-pool-id="${mockNodePoolNoTags.id}"]`).within(() => { ui.button.findByTitle('Add a tag').should('be.visible').click(); cy.findByLabelText('Create or Select a Tag') From d7b0b3a85cfa92709458c8e07fa914a8dc726148 Mon Sep 17 00:00:00 2001 From: Hana Xu Date: Wed, 11 Dec 2024 11:33:33 -0500 Subject: [PATCH 08/13] address feedback --- .../.changeset/pr-11368-added-1733420616390.md | 2 +- .../.changeset/pr-11368-added-1733415278919.md | 2 +- .../NodePoolsDisplay/NodeTable.tsx | 12 +++++++++--- 3 files changed, 11 insertions(+), 5 deletions(-) diff --git a/packages/api-v4/.changeset/pr-11368-added-1733420616390.md b/packages/api-v4/.changeset/pr-11368-added-1733420616390.md index 36bab5e146b..55919e94eeb 100644 --- a/packages/api-v4/.changeset/pr-11368-added-1733420616390.md +++ b/packages/api-v4/.changeset/pr-11368-added-1733420616390.md @@ -2,4 +2,4 @@ "@linode/api-v4": Added --- -tags to KubeNodePoolResponse and CreateNodePoolData ([#11368](https://github.com/linode/manager/pull/11368)) +Tags to `KubeNodePoolResponse` and `CreateNodePoolData` ([#11368](https://github.com/linode/manager/pull/11368)) diff --git a/packages/manager/.changeset/pr-11368-added-1733415278919.md b/packages/manager/.changeset/pr-11368-added-1733415278919.md index 56e5974b69f..bafa6dfcf3d 100644 --- a/packages/manager/.changeset/pr-11368-added-1733415278919.md +++ b/packages/manager/.changeset/pr-11368-added-1733415278919.md @@ -2,4 +2,4 @@ "@linode/manager": Added --- -Surface Node Pool Tags ([#11368](https://github.com/linode/manager/pull/11368)) +Node Pool Tags to LKE Cluster details page ([#11368](https://github.com/linode/manager/pull/11368)) diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.tsx index 81576b6eeaf..9b10d57d0c1 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.tsx @@ -161,6 +161,9 @@ export const NodeTable = React.memo((props: Props) => { ({ background: theme.bg.bgPaper, + [theme.breakpoints.down('sm')]: { + flexDirection: 'column', + }, })} alignItems="center" display="flex" @@ -187,9 +190,12 @@ export const NodeTable = React.memo((props: Props) => { )} ({ + [theme.breakpoints.down('sm')]: { + marginTop: 1, + }, width: '100%', - }} + })} tags={tags} updateTags={updateTags} view="inline" @@ -246,7 +252,7 @@ export const EncryptedStatus = ({ ) : encryptionStatus === 'disabled' ? ( <> - + Not Encrypted From aca837a81739d4ab73f10688a626949ad4ea2bfa Mon Sep 17 00:00:00 2001 From: Hana Xu Date: Wed, 11 Dec 2024 11:34:27 -0500 Subject: [PATCH 09/13] clean up --- .../NodePoolsDisplay/NodeTable.styles.ts | 25 ++++++++++++++- .../NodePoolsDisplay/NodeTable.tsx | 31 ++++++------------- 2 files changed, 33 insertions(+), 23 deletions(-) diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.styles.ts b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.styles.ts index 847e78b6ba2..0e359d98c2c 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.styles.ts +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.styles.ts @@ -1,8 +1,9 @@ -import { Typography } from '@linode/ui'; +import { Box, Typography } from '@linode/ui'; import { styled } from '@mui/material/styles'; import VerticalDivider from 'src/assets/icons/divider-vertical.svg'; import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip'; +import { TagCell } from 'src/components/TagCell/TagCell'; export const StyledCopyTooltip = styled(CopyTooltip, { label: 'CopyTooltip', @@ -27,3 +28,25 @@ export const StyledTypography = styled(Typography, { })(({ theme }) => ({ margin: `0 0 0 ${theme.spacing()}`, })); + +export const StyledTagCell = styled(TagCell, { + label: 'StyledTagCell', +})(({ theme }) => ({ + [theme.breakpoints.down('sm')]: { + marginTop: 1, + }, + width: '100%', +})); + +export const StyledTableFooter = styled(Box, { + label: 'StyledTableFooter', +})(({ theme }) => ({ + alignItems: 'center', + background: theme.bg.bgPaper, + display: 'flex', + justifyContent: 'space-between', + padding: `0 ${theme.spacing(2)}`, + [theme.breakpoints.down('sm')]: { + flexDirection: 'column', + }, +})); diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.tsx index 9b10d57d0c1..e5ad1cd0d62 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.tsx @@ -16,13 +16,17 @@ import { TableContentWrapper } from 'src/components/TableContentWrapper/TableCon import { TableHead } from 'src/components/TableHead'; import { TableRow } from 'src/components/TableRow'; import { TableSortCell } from 'src/components/TableSortCell'; -import { TagCell } from 'src/components/TagCell/TagCell'; import { useUpdateNodePoolMutation } from 'src/queries/kubernetes'; import { useAllLinodesQuery } from 'src/queries/linodes/linodes'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; import { NodeRow as _NodeRow } from './NodeRow'; -import { StyledTypography, StyledVerticalDivider } from './NodeTable.styles'; +import { + StyledTableFooter, + StyledTagCell, + StyledTypography, + StyledVerticalDivider, +} from './NodeTable.styles'; import type { NodeRow } from './NodeRow'; import type { PoolNodeResponse } from '@linode/api-v4/lib/kubernetes'; @@ -158,18 +162,7 @@ export const NodeTable = React.memo((props: Props) => { - ({ - background: theme.bg.bgPaper, - [theme.breakpoints.down('sm')]: { - flexDirection: 'column', - }, - })} - alignItems="center" - display="flex" - justifyContent="space-between" - px={2} - > + {isDiskEncryptionFeatureEnabled && encryptionStatus !== undefined ? ( @@ -189,18 +182,12 @@ export const NodeTable = React.memo((props: Props) => { Pool ID {poolId} )} - ({ - [theme.breakpoints.down('sm')]: { - marginTop: 1, - }, - width: '100%', - })} + - + Date: Wed, 11 Dec 2024 11:40:05 -0500 Subject: [PATCH 10/13] fix tags cutting off in mobile --- .../KubernetesClusterDetail/NodePoolsDisplay/NodeTable.styles.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.styles.ts b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.styles.ts index 0e359d98c2c..09050a1b958 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.styles.ts +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.styles.ts @@ -47,6 +47,7 @@ export const StyledTableFooter = styled(Box, { justifyContent: 'space-between', padding: `0 ${theme.spacing(2)}`, [theme.breakpoints.down('sm')]: { + display: 'block', flexDirection: 'column', }, })); From 26ecaa16e323889e88965340b0f83a768aa00422 Mon Sep 17 00:00:00 2001 From: Hana Xu Date: Wed, 11 Dec 2024 11:47:52 -0500 Subject: [PATCH 11/13] spacing --- .../NodePoolsDisplay/NodeTable.styles.ts | 13 ++++++++++--- .../NodePoolsDisplay/NodeTable.tsx | 5 +++-- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.styles.ts b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.styles.ts index 09050a1b958..0d9286ac2c8 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.styles.ts +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.styles.ts @@ -29,15 +29,22 @@ export const StyledTypography = styled(Typography, { margin: `0 0 0 ${theme.spacing()}`, })); -export const StyledTagCell = styled(TagCell, { - label: 'StyledTagCell', +export const StyledPoolInfoBox = styled(Box, { + label: 'StyledPoolInfoBox', })(({ theme }) => ({ + display: 'flex', [theme.breakpoints.down('sm')]: { - marginTop: 1, + padding: `${theme.spacing()} 0`, }, width: '100%', })); +export const StyledTagCell = styled(TagCell, { + label: 'StyledTagCell', +})(() => ({ + width: '100%', +})); + export const StyledTableFooter = styled(Box, { label: 'StyledTableFooter', })(({ theme }) => ({ diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.tsx index e5ad1cd0d62..0d3421d2f8f 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.tsx @@ -22,6 +22,7 @@ import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; import { NodeRow as _NodeRow } from './NodeRow'; import { + StyledPoolInfoBox, StyledTableFooter, StyledTagCell, StyledTypography, @@ -163,7 +164,7 @@ export const NodeTable = React.memo((props: Props) => { - + {isDiskEncryptionFeatureEnabled && encryptionStatus !== undefined ? ( { ) : ( Pool ID {poolId} )} - + Date: Wed, 11 Dec 2024 16:18:42 -0500 Subject: [PATCH 12/13] use md breakpoint instead of sm --- .../NodePoolsDisplay/NodeTable.styles.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.styles.ts b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.styles.ts index 0d9286ac2c8..d5d687c1dc1 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.styles.ts +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.styles.ts @@ -33,7 +33,7 @@ export const StyledPoolInfoBox = styled(Box, { label: 'StyledPoolInfoBox', })(({ theme }) => ({ display: 'flex', - [theme.breakpoints.down('sm')]: { + [theme.breakpoints.down('md')]: { padding: `${theme.spacing()} 0`, }, width: '100%', @@ -53,7 +53,7 @@ export const StyledTableFooter = styled(Box, { display: 'flex', justifyContent: 'space-between', padding: `0 ${theme.spacing(2)}`, - [theme.breakpoints.down('sm')]: { + [theme.breakpoints.down('md')]: { display: 'block', flexDirection: 'column', }, From 9c07d530a66be02fed1dfd86ab15f3a2e481ba5c Mon Sep 17 00:00:00 2001 From: Hana Xu Date: Thu, 12 Dec 2024 12:49:10 -0500 Subject: [PATCH 13/13] styling --- .../NodePoolsDisplay/NodeTable.styles.ts | 24 ++++++++++--------- .../NodePoolsDisplay/NodeTable.tsx | 21 ++++++++-------- 2 files changed, 23 insertions(+), 22 deletions(-) diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.styles.ts b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.styles.ts index d5d687c1dc1..62a215f48cc 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.styles.ts +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.styles.ts @@ -3,7 +3,6 @@ import { styled } from '@mui/material/styles'; import VerticalDivider from 'src/assets/icons/divider-vertical.svg'; import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip'; -import { TagCell } from 'src/components/TagCell/TagCell'; export const StyledCopyTooltip = styled(CopyTooltip, { label: 'CopyTooltip', @@ -26,23 +25,25 @@ export const StyledVerticalDivider = styled(VerticalDivider, { export const StyledTypography = styled(Typography, { label: 'StyledTypography', })(({ theme }) => ({ - margin: `0 0 0 ${theme.spacing()}`, + margin: `0 ${theme.spacing(2)} 0 ${theme.spacing()}`, + [theme.breakpoints.down('md')]: { + padding: theme.spacing(), + }, })); -export const StyledPoolInfoBox = styled(Box, { - label: 'StyledPoolInfoBox', +export const StyledNotEncryptedBox = styled(Box, { + label: 'StyledNotEncryptedBox', })(({ theme }) => ({ + alignItems: 'center', display: 'flex', - [theme.breakpoints.down('md')]: { - padding: `${theme.spacing()} 0`, - }, - width: '100%', + margin: `0 ${theme.spacing(2)} 0 ${theme.spacing()}`, })); -export const StyledTagCell = styled(TagCell, { - label: 'StyledTagCell', +export const StyledPoolInfoBox = styled(Box, { + label: 'StyledPoolInfoBox', })(() => ({ - width: '100%', + display: 'flex', + width: '50%', })); export const StyledTableFooter = styled(Box, { @@ -56,5 +57,6 @@ export const StyledTableFooter = styled(Box, { [theme.breakpoints.down('md')]: { display: 'block', flexDirection: 'column', + paddingBottom: theme.spacing(), }, })); diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.tsx index 0d3421d2f8f..e19ee92496f 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.tsx @@ -16,15 +16,16 @@ import { TableContentWrapper } from 'src/components/TableContentWrapper/TableCon import { TableHead } from 'src/components/TableHead'; import { TableRow } from 'src/components/TableRow'; import { TableSortCell } from 'src/components/TableSortCell'; +import { TagCell } from 'src/components/TagCell/TagCell'; import { useUpdateNodePoolMutation } from 'src/queries/kubernetes'; import { useAllLinodesQuery } from 'src/queries/linodes/linodes'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; import { NodeRow as _NodeRow } from './NodeRow'; import { + StyledNotEncryptedBox, StyledPoolInfoBox, StyledTableFooter, - StyledTagCell, StyledTypography, StyledVerticalDivider, } from './NodeTable.styles'; @@ -172,7 +173,9 @@ export const NodeTable = React.memo((props: Props) => { data-testid={encryptionStatusTestId} display="flex" > - Pool ID {poolId} + + Pool ID {poolId} + { Pool ID {poolId} )} - + - - Not Encrypted - - {tooltipText ? : null} + + Not Encrypted + {tooltipText ? : null} + ) : null; };