Merge branch 'develop' into M3-7028

packages/api-v4/.changeset/pr-9824-upcoming-features-1697827003419.md

@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Upcoming Features
+---
+
+Update the `Subnet` and `Interface` interfaces to match new API spec ([#9824](https://github.com/linode/manager/pull/9824))

packages/api-v4/src/linodes/types.ts

@@ -165,14 +165,15 @@ export interface Interface {
   purpose: InterfacePurpose;
   ipam_address: string | null;
   primary?: boolean;
+  active: boolean;
   subnet_id?: number | null;
   vpc_id?: number | null;
   ipv4?: ConfigInterfaceIPv4;
   ipv6?: ConfigInterfaceIPv6;
   ip_ranges?: string[];
 }
 
-export type InterfacePayload = Omit<Interface, 'id'>;
+export type InterfacePayload = Omit<Interface, 'id' | 'active'>;
 
 export interface ConfigInterfaceOrderPayload {
   ids: number[];

packages/api-v4/src/vpcs/types.ts

@@ -1,3 +1,5 @@
+import { Interface } from 'src/linodes';
+
 export interface VPC {
   id: number;
   label: string;
@@ -28,11 +30,18 @@ export interface CreateSubnetPayload {
 
 export interface Subnet extends CreateSubnetPayload {
   id: number;
-  linodes: number[];
+  linodes: SubnetAssignedLinodeData[];
   created: string;
   updated: string;
 }
 
 export interface ModifySubnetPayload {
   label: string;
 }
+
+export type SubnetLinodeInterfaceData = Pick<Interface, 'active' | 'id'>;
+
+export interface SubnetAssignedLinodeData {
+  id: number;
+  interfaces: SubnetLinodeInterfaceData[];
+}

packages/manager/.changeset/pr-9823-fixed-1697820563300.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Footer styles on small viewports ([#9823](https://github.com/linode/manager/pull/9823))

packages/manager/.changeset/pr-9824-upcoming-features-1697827056392.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Properly support new shapes of `Subnet` and `Interface` return objects ([#9824](https://github.com/linode/manager/pull/9824))

packages/manager/cypress/e2e/core/vpc/vpc-details-page.spec.ts

@@ -128,6 +128,7 @@ describe('VPC details page', () => {
     const mockSubnet = subnetFactory.build({
       id: randomNumber(),
       label: randomLabel(),
+      linodes: [],
     });
     const mockVPC = vpcFactory.build({
       id: randomNumber(),

packages/manager/src/MainContent.tsx

@@ -18,7 +18,7 @@ import withGlobalErrors, {
   Props as GlobalErrorProps,
 } from 'src/containers/globalErrors.container';
 import { useDialogContext } from 'src/context/useDialogContext';
-import { Footer } from 'src/features/Footer/Footer';
+import { Footer } from 'src/features/Footer';
 import { GlobalNotifications } from 'src/features/GlobalNotifications/GlobalNotifications';
 import {
   notificationContext,

packages/manager/src/components/SideMenu.tsx

@@ -7,6 +7,7 @@ import { Hidden } from 'src/components/Hidden';
 import PrimaryNav from './PrimaryNav/PrimaryNav';
 
 export const SIDEBAR_WIDTH = 190;
+export const SIDEBAR_COLLAPSED_WIDTH = 52;
 
 export interface Props {
   closeMenu: () => void;
@@ -70,7 +71,7 @@ const StyledDrawer = styled(Drawer, {
         [theme.breakpoints.up('sm')]: {
           overflowY: 'hidden',
         },
-        width: '52px',
+        width: `${SIDEBAR_COLLAPSED_WIDTH}px`,
       },
       '&.MuiDrawer-docked': {
         height: '100%',

packages/manager/src/constants.ts

@@ -255,3 +255,7 @@ export const ACCESS_LEVELS = {
 
 // Linode Community URL accessible from the TopMenu Community icon
 export const LINODE_COMMUNITY_URL = 'https://linode.com/community';
+
+export const FEEDBACK_LINK = 'https://www.linode.com/feedback/';
+
+export const DEVELOPERS_LINK = 'https://developers.linode.com';

packages/manager/src/factories/linodeConfigInterfaceFactory.ts

@@ -3,6 +3,7 @@ import * as Factory from 'factory.ts';
 
 export const LinodeConfigInterfaceFactory = Factory.Sync.makeFactory<Interface>(
   {
+    active: false,
     id: Factory.each((i) => i),
     ipam_address: '10.0.0.1/24',
     label: Factory.each((i) => `interface-${i}`),
@@ -12,19 +13,20 @@ export const LinodeConfigInterfaceFactory = Factory.Sync.makeFactory<Interface>(
 
 export const LinodeConfigInterfaceFactoryWithVPC = Factory.Sync.makeFactory<Interface>(
   {
+    active: false,
     id: Factory.each((i) => i),
+    ip_ranges: ['192.0.2.0/24'],
     ipam_address: '10.0.0.1/24',
-    label: Factory.each((i) => `interface-${i}`),
-    purpose: 'vpc',
     ipv4: {
-      vpc: '10.0.0.0',
       nat_1_1: 'some nat',
+      vpc: '10.0.0.0',
     },
     ipv6: {
       vpc: '2001:0db8:85a3:0000:0000:8a2e:0370:7334',
     },
-    ip_ranges: ['192.0.2.0/24'],
-    vpc_id: Factory.each((i) => i + 1),
+    label: Factory.each((i) => `interface-${i}`),
+    purpose: 'vpc',
     subnet_id: Factory.each((i) => i),
+    vpc_id: Factory.each((i) => i + 1),
   }
 );

packages/manager/src/factories/subnets.ts

@@ -1,13 +1,31 @@
-import { Subnet } from '@linode/api-v4/lib/vpcs/types';
+import {
+  Subnet,
+  SubnetAssignedLinodeData,
+} from '@linode/api-v4/lib/vpcs/types';
 import * as Factory from 'factory.ts';
 
+// NOTE: Changing to fixed array length for the interfaces and linodes fields of the
+// subnetAssignedLinodeDataFactory and subnetFactory respectively -- see [M3-7227] for more details
+
+export const subnetAssignedLinodeDataFactory = Factory.Sync.makeFactory<SubnetAssignedLinodeData>(
+  {
+    id: Factory.each((i) => i),
+    interfaces: Array.from({ length: 5 }, () => ({
+      active: false,
+      id: Math.floor(Math.random() * 100),
+    })),
+  }
+);
+
 export const subnetFactory = Factory.Sync.makeFactory<Subnet>({
   created: '2023-07-12T16:08:53',
   id: Factory.each((i) => i),
   ipv4: '0.0.0.0/0',
   label: Factory.each((i) => `subnet-${i}`),
-  linodes: Factory.each((i) =>
-    Array.from({ length: i }, () => Math.floor(Math.random() * 100))
+  linodes: Array.from({ length: 5 }, () =>
+    subnetAssignedLinodeDataFactory.build({
+      id: Math.floor(Math.random() * 100),
+    })
   ),
   updated: '2023-07-12T16:08:53',
 });

packages/manager/src/features/Footer.tsx

@@ -0,0 +1,53 @@
+import Stack from '@mui/material/Stack';
+import * as React from 'react';
+
+import { Link } from 'src/components/Link';
+import {
+  SIDEBAR_COLLAPSED_WIDTH,
+  SIDEBAR_WIDTH,
+} from 'src/components/SideMenu';
+import { DEVELOPERS_LINK, FEEDBACK_LINK } from 'src/constants';
+
+import packageJson from '../../package.json';
+
+interface Props {
+  desktopMenuIsOpen: boolean;
+}
+
+export const Footer = React.memo((props: Props) => {
+  const { desktopMenuIsOpen } = props;
+
+  return (
+    <footer role="contentinfo">
+      <Stack
+        sx={(theme) => ({
+          backgroundColor: theme.bg.main,
+          paddingLeft: {
+            md: desktopMenuIsOpen
+              ? `${SIDEBAR_COLLAPSED_WIDTH + 16}px`
+              : `${SIDEBAR_WIDTH + 16}px`,
+            sm: 2,
+            xs: 2,
+          },
+          paddingY: theme.spacing(2.5),
+          transition: 'padding-left .1s linear', // match the sidebar transition speed
+        })}
+        direction={{ sm: 'row', xs: 'column' }}
+        spacing={{ sm: 4, xs: 1 }}
+      >
+        <Link
+          forceCopyColor
+          to={`https://github.com/linode/manager/releases/tag/linode-manager@v${packageJson.version}`}
+        >
+          v{packageJson.version}
+        </Link>
+        <Link forceCopyColor to={DEVELOPERS_LINK}>
+          API Reference
+        </Link>
+        <Link forceCopyColor to={FEEDBACK_LINK}>
+          Provide Feedback
+        </Link>
+      </Stack>
+    </footer>
+  );
+});

packages/manager/src/features/Linodes/LinodeEntityDetail.test.tsx

@@ -5,6 +5,7 @@ import * as React from 'react';
 import {
   accountFactory,
   linodeFactory,
+  subnetAssignedLinodeDataFactory,
   subnetFactory,
   vpcFactory,
 } from 'src/factories';
@@ -40,7 +41,7 @@ describe('Linode Entity Detail', () => {
 
     const subnet = subnetFactory.build({
       id: 2,
-      linodes: [5],
+      linodes: [subnetAssignedLinodeDataFactory.build({ id: 5 })],
     });
 
     const vpc = vpcFactory.build({
@@ -81,7 +82,7 @@ describe('Linode Entity Detail', () => {
 
     const subnet = subnetFactory.build({
       id: 4,
-      linodes: [85],
+      linodes: [subnetAssignedLinodeDataFactory.build({ id: 85 })],
     });
 
     const vpc = vpcFactory.build({
@@ -116,7 +117,7 @@ describe('Linode Entity Detail', () => {
     const subnet = subnetFactory.build({
       id: 4,
       label: '1st-subnet',
-      linodes: [linode.id],
+      linodes: [subnetAssignedLinodeDataFactory.build({ id: linode.id })],
     });
 
     const _vpcs = vpcFactory.buildList(3);