feat: [M3-6736] - VPC detail summary

packages/manager/.changeset/pr-9549-upcoming-features-1692196983630.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+VPC detail summary ([#9549](https://github.com/linode/manager/pull/9549))

packages/manager/src/features/VPC/VPCDetail/VPCDetail.styles.ts

@@ -0,0 +1,67 @@
+import { Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+import { Box } from 'src/components/Box';
+import { Button } from 'src/components/Button/Button';
+import { Paper } from 'src/components/Paper';
+
+export const StyledActionButton = styled(Button, {
+  label: 'StyledActionButton',
+})(({ theme }) => ({
+  '&:hover': {
+    backgroundColor: theme.color.blueDTwhite,
+    color: theme.color.white,
+  },
+  color: theme.textColors.linkActiveLight,
+  fontFamily: theme.font.normal,
+  fontSize: '0.875rem',
+  height: theme.spacing(5),
+  minWidth: 'auto',
+}));
+
+export const StyledDescriptionBox = styled(Box, {
+  label: 'StyledDescriptionBox',
+})(({ theme }) => ({
+  [theme.breakpoints.down('lg')]: {
+    display: 'flex',
+    flexDirection: 'column',
+    paddingTop: theme.spacing(3),
+  },
+  [theme.breakpoints.down('sm')]: {
+    paddingTop: theme.spacing(1),
+  },
+}));
+
+export const StyledSummaryBox = styled(Box, {
+  label: 'StyledSummaryBox',
+})(({ theme }) => ({
+  [theme.breakpoints.down('sm')]: {
+    flexDirection: 'column',
+  },
+}));
+
+export const StyledSummaryTextTypography = styled(Typography, {
+  label: 'StyledSummaryTextTypography',
+})(({ theme }) => ({
+  '& strong': {
+    paddingRight: theme.spacing(1),
+  },
+  '&:first-of-type': {
+    paddingBottom: theme.spacing(2),
+  },
+  [theme.breakpoints.down('sm')]: {
+    paddingBottom: theme.spacing(2),
+  },
+  whiteSpace: 'nowrap',
+}));
+
+export const StyledPaper = styled(Paper, {
+  label: 'StyledPaper',
+})(({ theme }) => ({
+  borderTop: `1px solid ${theme.borderColors.borderTable}`,
+  display: 'flex',
+  padding: theme.spacing(2),
+  [theme.breakpoints.down('lg')]: {
+    flexDirection: 'column',
+  },
+}));

packages/manager/src/features/VPC/VPCDetail/VPCDetail.test.tsx

@@ -0,0 +1,91 @@
+import { waitForElementToBeRemoved } from '@testing-library/react';
+import * as React from 'react';
+import { QueryClient } from 'react-query';
+
+import { vpcFactory } from 'src/factories/vpcs';
+import { rest, server } from 'src/mocks/testServer';
+import { mockMatchMedia, renderWithTheme } from 'src/utilities/testHelpers';
+
+import VPCDetail from './VPCDetail';
+
+const queryClient = new QueryClient();
+
+beforeAll(() => mockMatchMedia());
+afterEach(() => {
+  queryClient.clear();
+});
+
+const loadingTestId = 'circle-progress';
+
+describe('VPC Detail Summary section', () => {
+  it('should display number of subnets and linodes, region, id, creation and update dates', async () => {
+    const vpcFactory1 = vpcFactory.build({ id: 100 });
+    server.use(
+      rest.get('*/vpcs/:vpcId', (req, res, ctx) => {
+        return res(ctx.json(vpcFactory1));
+      })
+    );
+
+    const { getAllByText, getByTestId } = renderWithTheme(<VPCDetail />, {
+      queryClient,
+    });
+
+    // Loading state should render
+    expect(getByTestId(loadingTestId)).toBeInTheDocument();
+
+    await waitForElementToBeRemoved(getByTestId(loadingTestId));
+
+    getAllByText('Subnets');
+    getAllByText('Linodes');
+    getAllByText('0');
+
+    getAllByText('Region');
+    getAllByText('Newark, NJ');
+
+    getAllByText('VPC ID');
+    getAllByText(vpcFactory1.id);
+
+    getAllByText('Created');
+    getAllByText(vpcFactory1.created);
+
+    getAllByText('Updated');
+    getAllByText(vpcFactory1.updated);
+  });
+
+  it('should display description if one is provided', async () => {
+    const vpcFactory1 = vpcFactory.build({
+      description: `VPC for webserver and database. VPC for webserver and database. VPC for webserver and database. VPC for webserver and database. VPC for webserver...`,
+      id: 101,
+    });
+    server.use(
+      rest.get('*/vpcs/:vpcId', (req, res, ctx) => {
+        return res(ctx.json(vpcFactory1));
+      })
+    );
+
+    const { getByTestId, getByText } = renderWithTheme(<VPCDetail />, {
+      queryClient,
+    });
+
+    await waitForElementToBeRemoved(getByTestId(loadingTestId));
+
+    getByText('Description');
+    getByText(vpcFactory1.description);
+  });
+
+  it('should hide description if none is provided', async () => {
+    server.use(
+      rest.get('*/vpcs/:vpcId', (req, res, ctx) => {
+        return res(ctx.json(vpcFactory.build()));
+      })
+    );
+
+    const { getByTestId, queryByText } = renderWithTheme(<VPCDetail />, {
+      queryClient,
+    });
+
+    await waitForElementToBeRemoved(getByTestId(loadingTestId));
+
+    expect(queryByText('Description')).not.toBeInTheDocument();
+  });
+});

packages/manager/src/features/VPC/VPCDetail/VPCDetail.tsx

@@ -1,31 +1,179 @@
+import { Typography } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
 import * as React from 'react';
 import { useParams } from 'react-router-dom';
 
+import { Box } from 'src/components/Box';
+import { CircleProgress } from 'src/components/CircleProgress/CircleProgress';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
+import { EntityHeader } from 'src/components/EntityHeader/EntityHeader';
+import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { LandingHeader } from 'src/components/LandingHeader';
+import { useRegionsQuery } from 'src/queries/regions';
+import { useVPCQuery } from 'src/queries/vpcs';
+import { truncate } from 'src/utilities/truncate';
 
-const VPCDetails = () => {
+import { VPCDeleteDialog } from '../VPCLanding/VPCDeleteDialog';
+import { VPCEditDrawer } from '../VPCLanding/VPCEditDrawer';
+import { getUniqueLinodesFromSubnets } from '../utils';
+import {
+  StyledActionButton,
+  StyledDescriptionBox,
+  StyledPaper,
+  StyledSummaryBox,
+  StyledSummaryTextTypography,
+} from './VPCDetail.styles';
+
+const VPCDetail = () => {
   const { vpcId } = useParams<{ vpcId: string }>();
+  const theme = useTheme();
+
+  const { data: vpc, error, isLoading } = useVPCQuery(+vpcId);
+  const { data: regions } = useRegionsQuery();
+
+  const [editVPCDrawerOpen, setEditVPCDrawerOpen] = React.useState(false);
+  const [deleteVPCDialogOpen, setDeleteVPCDialogOpen] = React.useState(false);
+  const [showFullDescription, setShowFullDescription] = React.useState(false);
+
+  if (isLoading) {
+    return <CircleProgress />;
+  }
+
+  if (!vpc || error) {
+    return (
+      <ErrorState errorText="There was a problem retrieving your VPC. Please try again." />
+    );
+  }
+
+  const description =
+    vpc.description.length < 150 || showFullDescription
+      ? vpc.description
+      : truncate(vpc.description, 150);
+
+  const regionLabel =
+    regions?.find((r) => r.id === vpc.region)?.label ?? vpc.region;
+
+  const numLinodes = getUniqueLinodesFromSubnets(vpc.subnets);
+
+  const summaryData = [
+    [
+      {
+        label: 'Subnets',
+        value: vpc.subnets.length,
+      },
+      {
+        label: 'Linodes',
+        value: numLinodes,
+      },
+    ],
+    [
+      {
+        label: 'Region',
+        value: regionLabel,
+      },
+      {
+        label: 'VPC ID',
+        value: vpc.id,
+      },
+    ],
+    [
+      {
+        label: 'Created',
+        value: vpc.created,
+      },
+
+      {
+        label: 'Updated',
+        value: vpc.updated,
+      },
+    ],
+  ];
+
   return (
     <>
       <DocumentTitleSegment segment="VPC" />
       <LandingHeader
         breadcrumbProps={{
           crumbOverrides: [
             {
-              label: 'VPC',
+              label: 'Virtual Private Cloud (VPC)',
               position: 1,
             },
           ],
           labelOptions: { noCap: true },
-          pathname: `/vpc/${vpcId}`, // TODO: VPC - use vpc label, not id
+          pathname: `/vpc/${vpc.label}`,
         }}
         docsLabel="Docs"
-        docsLink="" // TODO: VPC - Add docs link
+        docsLink="#" // TODO: VPC - Add docs link
+      />
+      <EntityHeader>
+        <Box>
+          <Typography
+            sx={(theme) => ({
+              color: theme.textColors.headlineStatic,
+              fontFamily: theme.font.bold,
+              fontSize: '1rem',
+              padding: '6px 16px',
+            })}
+          >
+            Summary
+          </Typography>
+        </Box>
+        <Box display="flex" justifyContent="end">
+          <StyledActionButton onClick={() => setEditVPCDrawerOpen(true)}>
+            Edit
+          </StyledActionButton>
+          <StyledActionButton onClick={() => setDeleteVPCDialogOpen(true)}>
+            Delete
+          </StyledActionButton>
+        </Box>
+      </EntityHeader>
+      <StyledPaper>
+        <StyledSummaryBox display="flex" flex={1}>
+          {summaryData.map((col) => {
+            return (
+              <Box key={col[0].label} paddingRight={6}>
+                <StyledSummaryTextTypography>
+                  <strong>{col[0].label}</strong> {col[0].value}
+                </StyledSummaryTextTypography>
+                <StyledSummaryTextTypography>
+                  <strong>{col[1].label}</strong> {col[1].value}
+                </StyledSummaryTextTypography>
+              </Box>
+            );
+          })}
+        </StyledSummaryBox>
+        {vpc.description.length > 0 && (
+          <StyledDescriptionBox display="flex" flex={1}>
+            <Typography>
+              <strong style={{ paddingRight: 8 }}>Description</strong>{' '}
+            </Typography>
+            <Typography>
+              {description}{' '}
+              <button
+                onClick={() => setShowFullDescription((show) => !show)}
+                style={{ ...theme.applyLinkStyles, fontSize: '0.875rem' }}
+              >
+                Read {showFullDescription ? 'Less' : 'More'}
+              </button>
+            </Typography>
+          </StyledDescriptionBox>
+        )}
+      </StyledPaper>
+      <VPCDeleteDialog
+        id={vpc.id}
+        label={vpc.label}
+        onClose={() => setDeleteVPCDialogOpen(false)}
+        open={deleteVPCDialogOpen}
+      />
+      <VPCEditDrawer
+        onClose={() => setEditVPCDrawerOpen(false)}
+        open={editVPCDrawerOpen}
+        vpc={vpc}
       />
-      TODO: VPC M3-6736 Create VPC Detail page with Summary Section
+      <Box paddingTop={2}>Subnets Placeholder</Box>
     </>
   );
 };
 
-export default VPCDetails;
+export default VPCDetail;

packages/manager/src/features/VPC/VPCLanding/VPCDeleteDialog.tsx

@@ -1,5 +1,6 @@
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
+import { useHistory } from 'react-router-dom';
 
 import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog';
 import { useDeleteVPCMutation } from 'src/queries/vpcs';
@@ -17,13 +18,17 @@ export const VPCDeleteDialog = (props: Props) => {
   const { error, isLoading, mutateAsync: deleteVPC } = useDeleteVPCMutation(
     id ?? -1
   );
+  const history = useHistory();
 
   const onDeleteVPC = () => {
     deleteVPC().then(() => {
       enqueueSnackbar('VPC deleted successfully.', {
         variant: 'success',
       });
       onClose();
+      if (history.location.pathname !== '/vpc') {
+        history.push('/vpc');
+      }
     });
   };
 

packages/manager/src/features/VPC/utils.test.ts

@@ -0,0 +1,22 @@
+import { subnetFactory } from 'src/factories/subnets';
+
+import { getUniqueLinodesFromSubnets } from './utils';
+
+describe('getUniqueLinodesFromSubnets', () => {
+  it(`returns the number of unique linodes within a VPC's subnets`, () => {
+    const subnets0 = [subnetFactory.build({ linodes: [] })];
+    const subnets1 = [subnetFactory.build({ linodes: [1, 2, 3] })];
+    const subnets2 = [subnetFactory.build({ linodes: [1, 1, 3, 3] })];
+    const subnets3 = [
+      subnetFactory.build({ linodes: [1, 2, 3] }),
+      subnetFactory.build({ linodes: [] }),
+      subnetFactory.build({ linodes: [3] }),
+      subnetFactory.build({ linodes: [6, 7, 8, 9, 1] }),
+    ];
+
+    expect(getUniqueLinodesFromSubnets(subnets0)).toBe(0);
+    expect(getUniqueLinodesFromSubnets(subnets1)).toBe(3);
+    expect(getUniqueLinodesFromSubnets(subnets2)).toBe(2);
+    expect(getUniqueLinodesFromSubnets(subnets3)).toBe(7);
+  });
+});