resource and service ip lists

dashboard/src/components/form-refactor/PorterForm.tsx

@@ -7,6 +7,8 @@ import {
   KeyValueArrayField,
   ArrayInputField,
   SelectField,
+  ServiceIPListField,
+  ResourceListField,
 } from "./types";
 import TabRegion, { TabOption } from "../TabRegion";
 import Heading from "../values-form/Heading";
@@ -19,6 +21,8 @@ import styled from "styled-components";
 import SaveButton from "../SaveButton";
 import ArrayInput from "./field-components/ArrayInput";
 import Select from "./field-components/Select";
+import ServiceIPList from "./field-components/ServiceIPList";
+import ResourceList from "./field-components/ResourceList";
 
 interface Props {
   leftTabOptions?: TabOption[];
@@ -59,6 +63,10 @@ const PorterForm: React.FC<Props> = (props) => {
         return <ArrayInput {...(bundledProps as ArrayInputField)} />;
       case "select":
         return <Select {...(bundledProps as SelectField)} />;
+      case "service-ip-list":
+        return <ServiceIPList {...(bundledProps as ServiceIPListField)} />;
+      case "resource-list":
+        return <ResourceList {...(bundledProps as ResourceListField)} />;
     }
     return <p>Not Implemented: {(field as any).type}</p>;
   };

dashboard/src/components/form-refactor/PorterFormContextProvider.tsx

@@ -255,7 +255,13 @@ export const PorterFormContextProvider: React.FC<Props> = (props) => {
     data.tabs.map((tab) =>
       tab.sections.map((section) =>
         section.contents.map((field) => {
-          if (field.type == "heading" || field.type == "subtitle") return;
+          if (
+            field.type == "heading" ||
+            field.type == "subtitle" ||
+            field.type == "resource-list" ||
+            field.type == "service-ip-list"
+          )
+            return;
           if (field.required) {
             requiredIds.push(field.id);
           }

dashboard/src/components/form-refactor/field-components/ResourceList.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { ResourceListField } from "../types";
+import ExpandableResource from "../../ExpandableResource";
+import styled from "styled-components";
+
+const ResourceList: React.FC<ResourceListField> = (props) => {
+  return (
+    <ResourceListWrapper>
+      {props.value?.map((resource: any, i: number) => {
+        if (resource.data) {
+          return (
+            <ExpandableResource
+              key={i}
+              resource={resource}
+              isLast={i === props.value.length - 1}
+              roundAllCorners={true}
+            />
+          );
+        }
+      })}
+    </ResourceListWrapper>
+  );
+};
+
+export default ResourceList;
+
+const ResourceListWrapper = styled.div`
+  margin-bottom: 15px;
+  margin-top: 20px;
+  border-radius: 5px;
+  overflow: hidden;
+`;

dashboard/src/components/form-refactor/field-components/ServiceIPList.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { ServiceIPListField } from "../types";
+import ServiceRow from "../../values-form/ServiceRow";
+import styled from "styled-components";
+
+const ServiceIPList: React.FC<ServiceIPListField> = (props) => {
+  return (
+    <ResourceList>
+      {props.value?.map((service: any, i: number) => {
+        return <ServiceRow service={service} key={i} />;
+      })}
+    </ResourceList>
+  );
+};
+
+export default ServiceIPList;
+
+const ResourceList = styled.div`
+  margin-bottom: 15px;
+  margin-top: 20px;
+  border-radius: 5px;
+  overflow: hidden;
+`;

dashboard/src/components/form-refactor/types.ts

@@ -25,6 +25,16 @@ export interface SubtitleField extends GenericField {
   label: string;
 }
 
+export interface ServiceIPListField extends GenericField {
+  type: "service-ip-list";
+  value: any[];
+}
+
+export interface ResourceListField extends GenericField {
+  type: "resource-list";
+  value: any[];
+}
+
 export interface InputField extends GenericInputField {
   type: "input";
   label?: string;
@@ -76,7 +86,8 @@ export interface SelectField extends GenericInputField {
   dropdownMaxHeight?: string;
 }
 
-export type FormField = HeadingField|SubtitleField|InputField|CheckboxField|KeyValueArrayField|ArrayInputField|SelectField;
+export type FormField = HeadingField|SubtitleField|InputField|CheckboxField
+  |KeyValueArrayField|ArrayInputField|SelectField|ServiceIPListField|ResourceListField;
 
 export interface ShowIfAnd {
   and: ShowIf[];