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.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,203 @@
+import { VPC } from '@linode/api-v4/lib/vpcs/types';
+import { Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import useTheme from '@mui/styles/useTheme';
 import * as React from 'react';
 import { useParams } from 'react-router-dom';
 
+import { Box } from 'src/components/Box';
+import { Button } from 'src/components/Button/Button';
+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 { Paper } from 'src/components/Paper';
+import { useRegionsQuery } from 'src/queries/regions';
+import { useVPCQuery } from 'src/queries/vpcs';
 
-const VPCDetails = () => {
+import { VPCDeleteDialog } from '../VPCLanding/VPCDeleteDialog';
+import { VPCEditDrawer } from '../VPCLanding/VPCEditDrawer';
+
+const VPCDetail = () => {
   const { vpcId } = useParams<{ vpcId: string }>();
+  const theme = useTheme();
+  const { data: vpc, error, isLoading } = useVPCQuery(+vpcId);
+
+  const { data: regions } = useRegionsQuery();
+  const regionLabel = regions?.find((r) => r.id === vpc?.region)?.label ?? '';
+
+  const [selectedVPC, setSelectedVPC] = React.useState<VPC | undefined>();
+
+  const [editVPCDrawerOpen, setEditVPCDrawerOpen] = React.useState(false);
+  const [deleteVPCDialogOpen, setDeleteVPCDialogOpen] = React.useState(false);
+
+  const handleEditVPC = (vpc: VPC) => {
+    setSelectedVPC(vpc);
+    setEditVPCDrawerOpen(true);
+  };
+
+  const handleDeleteVPC = (vpc: VPC) => {
+    setSelectedVPC(vpc);
+    setDeleteVPCDialogOpen(true);
+  };
+
+  if (isLoading) {
+    return <CircleProgress />;
+  }
+
+  if (error) {
+    return (
+      <ErrorState errorText="There was a problem retrieving your VPC. Please try again." />
+    );
+  }
+
+  const numLinodes = vpc?.subnets.reduce(
+    (acc, subnet) => acc + subnet.linodes.length,
+    0
+  );
+
+  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={{
+              color: theme.textColors.headlineStatic,
+              fontFamily: theme.font.bold,
+              fontSize: '1rem',
+              padding: '6px 16px',
+            }}
+          >
+            Summary
+          </Typography>
+        </Box>
+        <Box display="flex" justifyContent="end">
+          <StyledActionButton onClick={() => handleEditVPC(vpc!)}>
+            Edit
+          </StyledActionButton>
+          <StyledActionButton onClick={() => handleDeleteVPC(vpc!)}>
+            Delete
+          </StyledActionButton>
+        </Box>
+      </EntityHeader>
+      <StyledPaper>
+        <Box display="flex" flex={1}>
+          {summaryData.map((col) => {
+            return (
+              <Box key={col[0].label}>
+                <StyledTypography sx={{ paddingBottom: 2 }}>
+                  <strong>{col[0].label}</strong> {col[0].value}
+                </StyledTypography>
+                <StyledTypography>
+                  <strong>{col[1].label}</strong> {col[1].value}
+                </StyledTypography>
+              </Box>
+            );
+          })}
+        </Box>
+        {vpc?.description && vpc.description.length > 0 && (
+          <Box display="flex" flex={1}>
+            <strong style={{ paddingRight: 8 }}>Description</strong>{' '}
+            <Typography>{vpc?.description}</Typography>
+          </Box>
+        )}
+      </StyledPaper>
+      <VPCDeleteDialog
+        id={selectedVPC?.id}
+        label={selectedVPC?.label}
+        onClose={() => setDeleteVPCDialogOpen(false)}
+        open={deleteVPCDialogOpen}
       />
-      TODO: VPC M3-6736 Create VPC Detail page with Summary Section
+      <VPCEditDrawer
+        onClose={() => setEditVPCDrawerOpen(false)}
+        open={editVPCDrawerOpen}
+        vpc={selectedVPC}
+      />
+      <Box paddingTop={2}>Subnets Placeholder</Box>
     </>
   );
 };
 
-export default VPCDetails;
+export default VPCDetail;
+
+const StyledActionButton = styled(Button)(({ 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',
+}));
+
+const StyledTypography = styled(Typography)(({ theme }) => ({
+  '& strong': {
+    paddingRight: theme.spacing(1),
+  },
+  paddingRight: theme.spacing(6),
+}));
+
+const StyledPaper = styled(Paper)(({ theme }) => ({
+  borderTop: `1px solid ${theme.borderColors.borderTable}`,
+  display: 'flex',
+  padding: theme.spacing(2),
+  [theme.breakpoints.down('md')]: {
+    '& div': {
+      paddingBottom: theme.spacing(),
+    },
+    flexDirection: 'column',
+    padding: theme.spacing(2),
+  },
+}));

packages/manager/src/mocks/serverHandlers.ts

@@ -389,6 +389,17 @@ const vpc = [
       )
     );
   }),
+  rest.get('*/vpcs/:vpcId', (req, res, ctx) => {
+    return res(
+      ctx.json(
+        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...`,
+          subnets: subnetFactory.buildList(Math.floor(Math.random() * 10) + 1),
+        })
+      )
+    );
+  }),
   rest.delete('*/vpcs/:vpcId', (req, res, ctx) => {
     return res(ctx.json({}));
   }),