feat: [UIE-10535] - IAM: MaskableText component

packages/manager/src/components/ImageSelect/ImageSelectTable.tsx

@@ -17,15 +17,15 @@
   useTheme,
 } from '@linode/ui';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { Pagination } from 'akamai-cds-react-components/Pagination';
+import { Pagination } from '@akamai/cds-components/react/Pagination';
 import {
   Table,
   TableBody,
   TableCell,
   TableHead,
   TableHeaderCell,
   TableRow,
-} from 'akamai-cds-react-components/Table';
+} from '@akamai/cds-components/react/Table';
 import React, { useState } from 'react';
 
 import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField';

packages/manager/src/components/ImageSelect/ImageSelectTableRow.tsx

@@ -7,7 +7,7 @@
 } from '@linode/ui';
 import { convertStorageUnit, pluralize } from '@linode/utilities';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { TableCell, TableRow } from 'akamai-cds-react-components/Table';
+import { TableCell, TableRow } from '@akamai/cds-components/react/Table';
 import React from 'react';
 
 import CloudInitIcon from 'src/assets/icons/cloud-init.svg';

packages/manager/src/features/Account/SwitchAccounts/ChildAccountsTable.tsx

@@ -1,11 +1,11 @@
 import { Box, CircleProgress, LinkButton, useTheme } from '@linode/ui';
-import { Pagination } from 'akamai-cds-react-components/Pagination';
+import { Pagination } from '@akamai/cds-components/react/Pagination';
 import {
   Table,
   TableBody,
   TableCell,
   TableRow,
-} from 'akamai-cds-react-components/Table';
+} from '@akamai/cds-components/react/Table';
 import React from 'react';
 
 import { MIN_PAGE_SIZE } from 'src/components/PaginationFooter/PaginationFooter.constants';

packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.style.ts

@@ -1,6 +1,6 @@
 import { Box, TextField, Typography } from '@linode/ui';
 import { Grid, styled } from '@mui/material';
-import { Button } from 'akamai-cds-react-components';
+import { Button } from '@akamai/cds-components/react/Button';
 
 import { PlansPanel } from 'src/features/components/PlansPanel/PlansPanel';
 

packages/manager/src/features/Databases/DatabaseDetail/AccessControls.tsx

@@ -1,6 +1,6 @@
 import { useDatabaseMutation } from '@linode/queries';
 import { ActionsPanel, Notice, Typography } from '@linode/ui';
-import { Button } from 'akamai-cds-react-components';
+import { Button } from '@akamai/cds-components/react/Button';
 import * as React from 'react';
 import type { JSX } from 'react';
 import { makeStyles } from 'tss-react/mui';

packages/manager/src/features/Databases/DatabaseDetail/DatabaseAdvancedConfiguration/DatabaseAdvancedConfiguration.tsx

@@ -1,7 +1,7 @@
 import { Box, Paper, Typography } from '@linode/ui';
 import Grid from '@mui/material/Grid';
 import { useNavigate } from '@tanstack/react-router';
-import { Button } from 'akamai-cds-react-components';
+import { Button } from '@akamai/cds-components/react/Button';
 import React from 'react';
 
 import { Link } from 'src/components/Link';

packages/manager/src/features/Databases/DatabaseDetail/DatabaseAdvancedConfiguration/DatabaseAdvancedConfigurationDrawer.tsx

@@ -12,7 +12,7 @@
 import { scrollErrorIntoViewV2 } from '@linode/utilities';
 import { createDynamicAdvancedConfigSchema } from '@linode/validation';
 import Grid from '@mui/material/Grid';
-import { Button } from 'akamai-cds-react-components';
+import { Button } from '@akamai/cds-components/react/Button';
 import { enqueueSnackbar } from 'notistack';
 import React, { useEffect, useMemo, useState } from 'react';
 import { Controller, get, useFieldArray, useForm } from 'react-hook-form';

packages/manager/src/features/Databases/DatabaseDetail/DatabaseAdvancedConfiguration/DatabaseConfigurationItem.tsx

@@ -6,7 +6,7 @@
   Toggle,
   Typography,
 } from '@linode/ui';
-import { Button } from 'akamai-cds-react-components';
+import { Button } from '@akamai/cds-components/react/Button';
 import React from 'react';
 
 import {

packages/manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPoolRow.tsx

@@ -1,5 +1,5 @@
 import { Hidden } from '@linode/ui';
-import { TableCell, TableRow } from 'akamai-cds-react-components/Table';
+import { TableCell, TableRow } from '@akamai/cds-components/react/Table';
 import * as React from 'react';
 
 import { ActionMenu } from 'src/components/ActionMenu/ActionMenu';

packages/manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPools.tsx

@@ -9,15 +9,15 @@
 } from '@linode/ui';
 import Grid from '@mui/material/Grid';
 import { useTheme } from '@mui/material/styles';
-import { Pagination } from 'akamai-cds-react-components/Pagination';
+import { Pagination } from '@akamai/cds-components/react/Pagination';
 import {
   Table,
   TableBody,
   TableCell,
   TableHead,
   TableHeaderCell,
   TableRow,
-} from 'akamai-cds-react-components/Table';
+} from '@akamai/cds-components/react/Table';
 import React from 'react';
 
 import { Link } from 'src/components/Link';

packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.style.ts

@@ -1,6 +1,6 @@
 import Grid from '@mui/material/Grid';
 import { styled } from '@mui/material/styles';
-import { Button } from 'akamai-cds-react-components';
+import { Button } from '@akamai/cds-components/react/Button';
 
 import { PlansPanel } from 'src/features/components/PlansPanel/PlansPanel';
 

packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsMaintenance.tsx

@@ -1,7 +1,7 @@
 import { useDatabaseEnginesQuery } from '@linode/queries';
 import { TooltipIcon, Typography } from '@linode/ui';
 import { GridLegacy, styled } from '@mui/material';
-import { Button } from 'akamai-cds-react-components';
+import { Button } from '@akamai/cds-components/react/Button';
 import * as React from 'react';
 
 import {

packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsMenuItem.tsx

@@ -1,5 +1,5 @@
 import { Typography } from '@linode/ui';
-import { Button } from 'akamai-cds-react-components';
+import { Button } from '@akamai/cds-components/react/Button';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 

packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx

@@ -15,7 +15,8 @@ import {
 } from '@linode/ui';
 import { updateMaintenanceSchema } from '@linode/validation';
 import { styled } from '@mui/material/styles';
-import { Button, Select } from 'akamai-cds-react-components';
+import { Button } from '@akamai/cds-components/react/Button';
+import { Select } from '@akamai/cds-components/react/Select';
 import { DateTime } from 'luxon';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';

packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseCaCert.tsx

@@ -2,7 +2,7 @@ import { getSSLFields } from '@linode/api-v4/lib/databases/databases';
 import { TooltipIcon } from '@linode/ui';
 import { downloadFile } from '@linode/utilities';
 import { styled } from '@mui/material/styles';
-import { Button } from 'akamai-cds-react-components';
+import { Button } from '@akamai/cds-components/react/Button';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 

packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.tsx

@@ -1,6 +1,6 @@
 import { useDatabaseCredentialsQuery } from '@linode/queries';
 import { Box, CircleProgress, TooltipIcon, Typography } from '@linode/ui';
-import { Button } from 'akamai-cds-react-components';
+import { Button } from '@akamai/cds-components/react/Button';
 import { enqueueSnackbar } from 'notistack';
 import * as React from 'react';
 

packages/manager/src/features/Databases/DatabaseLanding/DatabaseLandingTable.tsx

@@ -1,13 +1,13 @@
 import { Hidden } from '@linode/ui';
 import { useTheme } from '@mui/material/styles';
-import { Pagination } from 'akamai-cds-react-components/Pagination';
+import { Pagination } from '@akamai/cds-components/react/Pagination';
 import {
   Table,
   TableBody,
   TableHead,
   TableHeaderCell,
   TableRow,
-} from 'akamai-cds-react-components/Table';
+} from '@akamai/cds-components/react/Table';
 import React from 'react';
 
 import { MIN_PAGE_SIZE } from 'src/components/PaginationFooter/PaginationFooter.constants';

packages/manager/src/features/Databases/DatabaseLanding/DatabaseRow.tsx

@@ -5,7 +5,7 @@ import {
 } from '@linode/queries';
 import { Chip, Hidden } from '@linode/ui';
 import { formatStorageUnits } from '@linode/utilities';
-import { TableCell, TableRow } from 'akamai-cds-react-components/Table';
+import { TableCell, TableRow } from '@akamai/cds-components/react/Table';
 import * as React from 'react';
 
 import { Link } from 'src/components/Link';

packages/manager/src/features/Databases/shared.styles.ts

@@ -1,5 +1,5 @@
 import { styled } from '@linode/ui';
-import { TableCell } from 'akamai-cds-react-components/Table';
+import { TableCell } from '@akamai/cds-components/react/Table';
 import { makeStyles } from 'tss-react/mui';
 
 import type { Theme } from '@mui/material';

packages/manager/src/features/IAM/Roles/RolesTable/RolesTable.tsx

@@ -4,7 +4,7 @@ import { useTheme } from '@mui/material';
 import Grid from '@mui/material/Grid';
 import Paper from '@mui/material/Paper';
 import { useLocation, useNavigate, useSearch } from '@tanstack/react-router';
-import { Pagination } from 'akamai-cds-react-components/Pagination';
+import { Pagination } from '@akamai/cds-components/react/Pagination';
 import {
   sortRows,
   Table,
@@ -14,7 +14,7 @@ import {
   TableHeaderCell,
   TableRow,
   TableRowExpanded,
-} from 'akamai-cds-react-components/Table';
+} from '@akamai/cds-components/react/Table';
 import React, { useState } from 'react';
 
 import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField';
@@ -38,7 +38,7 @@ import {
 
 import type { RoleView } from '../../Shared/types';
 import type { SelectOption } from '@linode/ui';
-import type { Order } from 'akamai-cds-react-components/Table';
+import type { Order } from '@akamai/cds-components/react/Table';
 
 const ALL_ROLES_OPTION: SelectOption = {
   label: 'All Roles',

packages/manager/src/features/IAM/Shared/MaskableText/MaskableText.styles.ts

@@ -0,0 +1,32 @@
+import { Button } from '@akamai/cds-components/react/Button';
+import { Icon } from '@akamai/cds-components/react/Icon';
+import { styled } from '@mui/material/styles';
+
+export const StyledWrapper = styled('div', {
+  label: 'StyledWrapper',
+})(() => ({
+  alignItems: 'center',
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'flex-start',
+  height: '20px',
+}));
+
+export const StyledToggleButton = styled(Button, {
+  label: 'StyledToggleButton',
+})(({ theme }) => ({
+  marginLeft: theme.tokens.spacing.S8,
+  minHeight: 'auto',
+  minWidth: 'auto',
+  padding: 0,
+  display: 'flex',
+}));
+
+export const StyledIcon = styled(Icon, {
+  label: 'StyledIcon',
+})(({ theme }) => ({
+  color: theme.palette.grey[500],
+  '&:hover': {
+    color: theme.palette.primary.main,
+  },
+}));

packages/manager/src/features/IAM/Shared/MaskableText/MaskableText.test.tsx

@@ -0,0 +1,105 @@
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { MaskableText } from './MaskableText';
+
+const SECRET_TEXT = 'text-to-be-masked';
+const TOGGLE_TEST_ID = 'maskable-text-toggle';
+
+const queryMocks = vi.hoisted(() => ({
+  usePreferences: vi.fn(),
+}));
+
+vi.mock('@linode/queries', async () => {
+  const actual = await vi.importActual('@linode/queries');
+  return { ...actual, usePreferences: queryMocks.usePreferences };
+});
+
+describe('MaskableText', () => {
+  describe('when masking is disabled', () => {
+    beforeEach(() => {
+      queryMocks.usePreferences.mockReturnValue({ data: false });
+    });
+
+    it('renders the plain text unmasked', () => {
+      renderWithTheme(<MaskableText text={SECRET_TEXT} />);
+      expect(screen.getByText(SECRET_TEXT)).toBeVisible();
+    });
+
+    it('renders children instead of text when provided', () => {
+      renderWithTheme(
+        <MaskableText text={SECRET_TEXT}>
+          <span>custom child</span>
+        </MaskableText>
+      );
+      expect(screen.getByText('custom child')).toBeVisible();
+      expect(screen.queryByText(SECRET_TEXT)).not.toBeInTheDocument();
+    });
+
+    it('renders nothing when text is empty', () => {
+      const { container } = renderWithTheme(<MaskableText text="" />);
+      expect(container).toBeEmptyDOMElement();
+    });
+
+    it('does not render the toggle button', () => {
+      renderWithTheme(<MaskableText isToggleable text={SECRET_TEXT} />);
+      expect(screen.queryByTestId(TOGGLE_TEST_ID)).not.toBeInTheDocument();
+    });
+  });
+
+  describe('when masking is enabled', () => {
+    beforeEach(() => {
+      queryMocks.usePreferences.mockReturnValue({ data: true });
+    });
+
+    it('renders masked dots instead of plain text by default', () => {
+      renderWithTheme(<MaskableText text="secret-value" />);
+      expect(screen.queryByText('secret-value')).not.toBeInTheDocument();
+      expect(screen.getByText('•'.repeat(12))).toBeVisible();
+    });
+
+    it('renders masked dots with custom length', () => {
+      renderWithTheme(<MaskableText length={6} text="secret-value" />);
+      expect(screen.getByText('•'.repeat(6))).toBeVisible();
+    });
+
+    it('renders nothing when text is empty', () => {
+      const { container } = renderWithTheme(<MaskableText text="" />);
+      expect(container).toBeEmptyDOMElement();
+    });
+
+    describe('toggle behavior', () => {
+      it('does not render toggle button when isToggleable is false', () => {
+        renderWithTheme(<MaskableText text={SECRET_TEXT} />);
+        expect(screen.queryByTestId(TOGGLE_TEST_ID)).not.toBeInTheDocument();
+      });
+
+      it('renders toggle button when isToggleable is true', () => {
+        renderWithTheme(<MaskableText isToggleable text={SECRET_TEXT} />);
+        screen.getByTestId(TOGGLE_TEST_ID);
+      });
+
+      it('reveals text when toggle button is clicked', async () => {
+        renderWithTheme(<MaskableText isToggleable text={SECRET_TEXT} />);
+        expect(screen.queryByText(SECRET_TEXT)).not.toBeInTheDocument();
+
+        await userEvent.click(screen.getByTestId(TOGGLE_TEST_ID));
+
+        expect(screen.getByText(SECRET_TEXT)).toBeVisible();
+      });
+
+      it('masks text again when toggle button is clicked twice', async () => {
+        renderWithTheme(<MaskableText isToggleable text={SECRET_TEXT} />);
+
+        await userEvent.click(screen.getByTestId(TOGGLE_TEST_ID));
+        await userEvent.click(screen.getByTestId(TOGGLE_TEST_ID));
+
+        expect(screen.queryByText(SECRET_TEXT)).not.toBeInTheDocument();
+        expect(screen.getByText('•'.repeat(12))).toBeVisible();
+      });
+    });
+  });
+});