upcoming: [UIE-10432] - Implement drawer to reserve an IP address (#13541)

Author: grevanak-akamai

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

@@ -294,7 +294,7 @@ export const unReserveIP = (ipAddress: string) =>
  */
 export const getReservedIPsTypes = (params?: Params) =>
   Request<Page<PriceType>>(
-    setURL(`${API_ROOT}/networking/reserved/ips/types`),
+    setURL(`${BETA_API_ROOT}/networking/reserved/ips/types`),
     setMethod('GET'),
     setParams(params),
   );

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

@@ -1,13 +1,8 @@
-export interface AssignedEntity {
-  id: number;
-  label: string;
-  type: string;
-  url: string;
-}
+import type { Entity } from '../account/types';
 
 export interface IPAddress {
   address: string;
-  assigned_entity: AssignedEntity | null;
+  assigned_entity: Entity | null;
   gateway: null | string;
   interface_id: null | number;
   linode_id: null | number;

packages/manager/.changeset/pr-13541-upcoming-features-1774844980662.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Reserve IP - Implement drawer to reserve an IP address ([#13541](https://github.com/linode/manager/pull/13541))

packages/manager/src/components/TagsInput/TagsInput.tsx

@@ -47,6 +47,10 @@ export interface TagsInputProps {
    * Callback fired when the value changes.
    */
   onChange: (selected: TagOption[]) => void;
+  /**
+   * If true, displays "(optional)" after the label.
+   */
+  optional?: boolean;
   /**
    * An error to display beneath the input.
    */
@@ -58,8 +62,16 @@ export interface TagsInputProps {
 }
 
 export const TagsInput = (props: TagsInputProps) => {
-  const { disabled, hideLabel, label, noMarginTop, onChange, tagError, value } =
-    props;
+  const {
+    disabled,
+    hideLabel,
+    label,
+    noMarginTop,
+    onChange,
+    optional,
+    tagError,
+    value,
+  } = props;
 
   const [errors, setErrors] = React.useState<APIError[]>([]);
 
@@ -185,7 +197,7 @@ export const TagsInput = (props: TagsInputProps) => {
           />
         ));
       }}
-      textFieldProps={{ hideLabel, noMarginTop }}
+      textFieldProps={{ hideLabel, noMarginTop, optional }}
       value={value}
     />
   );

packages/manager/src/factories/types.ts

@@ -298,3 +298,20 @@ export const networkTransferPriceTypeFactory =
     ],
     transfer: 0,
   });
+
+export const reservedIPsTypeFactory = Factory.Sync.makeFactory<PriceType>({
+  id: 'reserved-ipv4',
+  label: 'Reserved IPv4 Address',
+  price: {
+    hourly: 0.007,
+    monthly: 5,
+  },
+  region_prices: [
+    {
+      hourly: 0.014,
+      id: 'pl-labkrk-2',
+      monthly: 10,
+    },
+  ],
+  transfer: 0,
+});