feat: [M3-6722] – VPC endpoints, validation, & React Query queries

packages/api-v4/src/index.ts

@@ -1,7 +1,11 @@
 export * from './account';
 
+export * from './databases';
+
 export * from './domains';
 
+export * from './entity-transfers';
+
 export * from './firewalls';
 
 export * from './images';
@@ -16,6 +20,8 @@ export * from './managed';
 
 export * from './networking';
 
+export * from './nodebalancers';
+
 export * from './object-storage';
 
 export * from './profile';
@@ -34,11 +40,7 @@ export * from './vlans';
 
 export * from './volumes';
 
-export * from './nodebalancers';
-
-export * from './databases';
-
-export * from './entity-transfers';
+export * from './vpcs';
 
 export {
   baseRequest,

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

@@ -0,0 +1,3 @@
+export * from './vpcs';
+
+export * from './types';

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

@@ -0,0 +1,34 @@
+export interface VPC {
+  id: number;
+  label: string;
+  description: string;
+  region: string;
+  subnets: Subnet[];
+  created: string;
+  updated: string;
+}
+
+export interface CreateVPCPayload {
+  label: string;
+  description?: string;
+  region: string;
+  subnets?: SubnetPostObject[];
+}
+
+export interface UpdateVPCPayload {
+  label?: string;
+  description?: string;
+}
+
+export interface SubnetPostObject {
+  label: string;
+  ipv4: string;
+  ipv6: string;
+}
+
+export interface Subnet extends SubnetPostObject {
+  id: number;
+  linodes: number[];
+  created: string;
+  updated: string;
+}

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

@@ -0,0 +1,81 @@
+import {
+  createVPCSchema,
+  updateVPCSchema,
+} from '@linode/validation/lib/vpcs.schema';
+import { BETA_API_ROOT as API_ROOT } from '../constants';
+import Request, {
+  setData,
+  setMethod,
+  setParams,
+  setURL,
+  setXFilter,
+} from '../request';
+import { Filter, ResourcePage as Page, Params } from '../types';
+import { CreateVPCPayload, UpdateVPCPayload, VPC } from './types';
+
+// VPC methods
+/**
+ * getVPCs
+ *
+ * Return a paginated list of VPCs on this account.
+ *
+ */
+export const getVPCs = (params?: Params, filter?: Filter) =>
+  Request<Page<VPC>>(
+    setURL(`${API_ROOT}/vpcs`),
+    setMethod('GET'),
+    setParams(params),
+    setXFilter(filter)
+  );
+
+/**
+ * getVPC
+ *
+ * Return details for a single specified VPC.
+ *
+ */
+export const getVPC = (vpcID: number) =>
+  Request<VPC>(
+    setURL(`${API_ROOT}/vpcs/${encodeURIComponent(vpcID)}`),
+    setMethod('GET')
+  );
+
+/**
+ * createVPC
+ *
+ * Create a new VPC in the specified region.
+ *
+ */
+export const createVPC = (data: CreateVPCPayload) =>
+  Request<VPC>(
+    setURL(`${API_ROOT}/vpcs`),
+    setMethod('POST'),
+    setData(data, createVPCSchema)
+  );
+
+/**
+ * updateVPC
+ *
+ * Update a VPC.
+ *
+ */
+export const updateVPC = (vpcID: number, data: UpdateVPCPayload) =>
+  Request<VPC>(
+    setURL(`${API_ROOT}/vpcs/${encodeURIComponent(vpcID)}`),
+    setMethod('PUT'),
+    setData(data, updateVPCSchema)
+  );
+
+/**
+ * deleteVPC
+ *
+ * Delete a single specified VPC.
+ *
+ */
+export const deleteVPC = (vpcID: number) =>
+  Request<{}>(
+    setURL(`${API_ROOT}/vpcs/${encodeURIComponent(vpcID)}`),
+    setMethod('DELETE')
+  );
+
+// Subnet methods

packages/manager/src/App.tsx

@@ -39,6 +39,7 @@ import {
   diskEventHandler,
   linodeEventsHandler,
 } from './queries/linodes/events';
+import { useVPCsQuery } from './queries/vpcs';
 
 // Ensure component's display name is 'App'
 export const App = () => <BaseApp />;
@@ -50,6 +51,8 @@ const BaseApp = withFeatureFlagProvider(
     const { data: preferences } = usePreferences();
     const { mutateAsync: updateUserPreferences } = useMutatePreferences();
 
+    const { data: vpcData } = useVPCsQuery({}, {});
+
     const { featureFlagsLoading } = useFeatureFlagsLoad();
     const appIsLoading = useSelector(
       (state: ApplicationState) => state.initialLoad.appIsLoading

packages/manager/src/queries/vpcs.ts

@@ -0,0 +1,64 @@
+import {
+  CreateVPCPayload,
+  UpdateVPCPayload,
+  VPC,
+  createVPC,
+  deleteVPC,
+  getVPC,
+  getVPCs,
+  updateVPC,
+} from '@linode/api-v4';
+import {
+  APIError,
+  Filter,
+  Params,
+  ResourcePage,
+} from '@linode/api-v4/lib/types';
+import { useMutation, useQuery, useQueryClient } from 'react-query';
+
+export const queryKey = 'vpcs';
+
+export const useVPCsQuery = (params: Params, filter: Filter) => {
+  return useQuery<ResourcePage<VPC>, APIError[]>(
+    [queryKey, 'paginated', params, filter],
+    () => getVPCs(params, filter),
+    { keepPreviousData: true }
+  );
+};
+
+export const useVPCQuery = (id: number) => {
+  return useQuery<VPC, APIError[]>([queryKey, 'vpc', id], () => getVPC(id));
+};
+
+export const useCreateVPCMutation = () => {
+  const queryClient = useQueryClient();
+  return useMutation<VPC, APIError[], CreateVPCPayload>(createVPC, {
+    onSuccess: (VPC) => {
+      queryClient.invalidateQueries([queryKey, 'paginated']);
+      queryClient.setQueryData([queryKey, 'vpc', VPC.id], VPC);
+    },
+  });
+};
+
+export const useUpdateVPCMutation = (id: number) => {
+  const queryClient = useQueryClient();
+  return useMutation<VPC, APIError[], UpdateVPCPayload>(
+    (data) => updateVPC(id, data),
+    {
+      onSuccess: (VPC) => {
+        queryClient.invalidateQueries([queryKey, 'paginated']);
+        queryClient.setQueryData<VPC>([queryKey, 'vpc', VPC.id], VPC);
+      },
+    }
+  );
+};
+
+export const useDeleteVPCMutation = (id: number) => {
+  const queryClient = useQueryClient();
+  return useMutation<{}, APIError[]>(() => deleteVPC(id), {
+    onSuccess: () => {
+      queryClient.invalidateQueries([queryKey, 'paginated']);
+      queryClient.removeQueries([queryKey, 'vpc', id]);
+    },
+  });
+};

packages/validation/src/index.ts

@@ -18,3 +18,4 @@ export * from './support.schema';
 export * from './transfers.schema';
 export * from './twofactor.schema';
 export * from './volumes.schema';
+export * from './vpcs.schema';

packages/validation/src/vpcs.schema.ts

@@ -0,0 +1,22 @@
+import { array, object, string } from 'yup';
+
+const LABEL_MESSAGE = 'VPC label must be between 1 and 64 characters.';
+
+export const createVPCSchema = object({
+  label: string()
+    .required('Label is required')
+    .min(1, LABEL_MESSAGE)
+    .max(64, LABEL_MESSAGE)
+    .matches(
+      /[a-zA-Z0-9-]+/,
+      'Must include only ASCII letters, numbers, and dashes'
+    ),
+  description: string(),
+  region: string().required('Region is required'),
+  subnets: array().of(object()),
+});
+
+export const updateVPCSchema = object({
+  label: string().notRequired().min(3, LABEL_MESSAGE).max(32, LABEL_MESSAGE),
+  description: string().notRequired(),
+});