remove compliance and lint ProvisionerSettings and Dashboard.tsx (#4216)

dashboard/src/components/ProvisionerSettings.tsx

@@ -18,6 +18,7 @@ import {
 } from "@porter-dev/api-contracts";
 import { withRouter, type RouteComponentProps } from "react-router";
 import styled from "styled-components";
+import { Integer } from "type-fest";
 
 import Heading from "components/form-components/Heading";
 import SelectRow from "components/form-components/SelectRow";
@@ -27,25 +28,24 @@ import { useIntercom } from "lib/hooks/useIntercom";
 import api from "shared/api";
 import { Context } from "shared/Context";
 import { pushFiltered } from "shared/routing";
-import { type ClusterType, type ClusterState } from "shared/types";
+import { type ClusterState, type ClusterType } from "shared/types";
 import { PREFLIGHT_TO_ENUM } from "shared/util";
 import info from "assets/info-outlined.svg";
 import healthy from "assets/status-healthy.png";
 
+import GPUProvisionSettings from "./GPUProvisionSettings";
 import Loading from "./Loading";
 import Button from "./porter/Button";
 import Checkbox from "./porter/Checkbox";
 import Icon from "./porter/Icon";
 import Input from "./porter/Input";
+import InputSlider from "./porter/InputSlider";
 import Select from "./porter/Select";
 import Spacer from "./porter/Spacer";
 import Text from "./porter/Text";
 import Tooltip from "./porter/Tooltip";
 import VerticalSteps from "./porter/VerticalSteps";
 import PreflightChecks from "./PreflightChecks";
-import { Integer } from "type-fest";
-import InputSlider from "./porter/InputSlider";
-import GPUProvisionSettings from "./GPUProvisionSettings";
 
 const regionOptions = [
   { value: "us-east-1", label: "US East (N. Virginia) us-east-1" },
@@ -217,7 +217,7 @@ const ProvisionerSettings: React.FC<Props> = (props) => {
           project_id: currentProject ? currentProject.id : 0,
         }
       );
-    } catch (err) { }
+    } catch (err) {}
   };
 
   const getStatus = (): React.ReactNode => {
@@ -294,17 +294,19 @@ const ProvisionerSettings: React.FC<Props> = (props) => {
     }
 
     // Split the input string by comma, then reduce the resulting array to an object
-    const tags = tagString.split(",").reduce<Record<string, string>>((obj, item) => {
-      // Split each item by "=", and trim whitespace from both key and value
-      const [key, value] = item.split("=").map(part => part.trim());
-
-      // Only add the key-value pair to the object if both key and value are present
-      if (key && value) {
-        obj[key] = value;
-      }
+    const tags = tagString
+      .split(",")
+      .reduce<Record<string, string>>((obj, item) => {
+        // Split each item by "=", and trim whitespace from both key and value
+        const [key, value] = item.split("=").map((part) => part.trim());
+
+        // Only add the key-value pair to the object if both key and value are present
+        if (key && value) {
+          obj[key] = value;
+        }
 
-      return obj;
-    }, {});
+        return obj;
+      }, {});
 
     return tags;
   }
@@ -344,7 +346,6 @@ const ProvisionerSettings: React.FC<Props> = (props) => {
       }
     }
 
-
     const nodeGroups = [
       new EKSNodeGroup({
         instanceType: "t3.medium",
@@ -374,17 +375,18 @@ const ProvisionerSettings: React.FC<Props> = (props) => {
 
     // Conditionally add the last EKSNodeGroup if gpuModal is enabled
     if (props.gpuModal) {
-      nodeGroups.push(new EKSNodeGroup({
-        instanceType: clusterState.gpuInstanceType,
-        minInstances: clusterState.gpuMinInstances || 0,
-        maxInstances: clusterState.gpuMaxInstances || 5,
-        nodeGroupType: NodeGroupType.CUSTOM,
-        isStateful: false,
-        additionalPolicies: clusterState.additionalNodePolicies,
-      }));
+      nodeGroups.push(
+        new EKSNodeGroup({
+          instanceType: clusterState.gpuInstanceType,
+          minInstances: clusterState.gpuMinInstances || 0,
+          maxInstances: clusterState.gpuMaxInstances || 5,
+          nodeGroupType: NodeGroupType.CUSTOM,
+          isStateful: false,
+          additionalPolicies: clusterState.additionalNodePolicies,
+        })
+      );
     }
 
-
     const data = new Contract({
       cluster: new Cluster({
         projectId: currentProject.id,
@@ -395,7 +397,8 @@ const ProvisionerSettings: React.FC<Props> = (props) => {
           case: "eksKind",
           value: new EKS({
             clusterName: clusterState.clusterName,
-            clusterVersion: clusterState.clusterVersion || defaultClusterVersion,
+            clusterVersion:
+              clusterState.clusterVersion || defaultClusterVersion,
             cidrRange: clusterState.cidrRangeVPC || defaultCidrVpc, // deprecated in favour of network.cidrRangeVPC: can be removed after december 2023
             region: clusterState.awsRegion,
             loadBalancer: loadBalancerObj,
@@ -405,7 +408,8 @@ const ProvisionerSettings: React.FC<Props> = (props) => {
             enableEcrScanning: clusterState.ecrScanningEnabled,
             network: new AWSClusterNetwork({
               vpcCidr: clusterState.cidrRangeVPC || defaultCidrVpc,
-              serviceCidr: clusterState.cidrRangeServices || defaultCidrServices,
+              serviceCidr:
+                clusterState.cidrRangeServices || defaultCidrServices,
             }),
             nodeGroups,
           }),
@@ -452,15 +456,13 @@ const ProvisionerSettings: React.FC<Props> = (props) => {
                 pushFiltered(props, "/cluster-dashboard", ["project_id"], {
                   cluster: cluster.name,
                 });
-              }
-              else {
+              } else {
                 if (props.closeModal) {
                   props.closeModal();
                 }
               }
             }
           });
-
         })
         .catch((err) => {
           if (err) {
@@ -491,8 +493,8 @@ const ProvisionerSettings: React.FC<Props> = (props) => {
   useEffect(() => {
     setIsReadOnly(
       props.clusterId &&
-      (currentCluster.status === "UPDATING" ||
-        currentCluster.status === "UPDATING_UNAVAILABLE")
+        (currentCluster.status === "UPDATING" ||
+          currentCluster.status === "UPDATING_UNAVAILABLE")
     );
     handleClusterStateChange(
       "clusterName",
@@ -553,8 +555,8 @@ const ProvisionerSettings: React.FC<Props> = (props) => {
 
         const awsTags = eksValues.loadBalancer.tags
           ? Object.entries(eksValues.loadBalancer.tags)
-            .map(([key, value]) => `${key}=${value}`)
-            .join(",")
+              .map(([key, value]) => `${key}=${value}`)
+              .join(",")
           : "";
         handleClusterStateChange("awsTags", awsTags);
 
@@ -610,7 +612,6 @@ const ProvisionerSettings: React.FC<Props> = (props) => {
             setStep(0);
           }
         }
-
       }
     }
   }, [clusterState]);
@@ -1102,11 +1103,11 @@ const ProvisionerSettings: React.FC<Props> = (props) => {
 
                         {(clusterState.wafV2ARN === undefined ||
                           clusterState.wafV2ARN?.length === 0) && (
-                            <ErrorInLine>
-                              <i className="material-icons">error</i>
-                              {"Required if WafV2 is enabled"}
-                            </ErrorInLine>
-                          )}
+                          <ErrorInLine>
+                            <i className="material-icons">error</i>
+                            {"Required if WafV2 is enabled"}
+                          </ErrorInLine>
+                        )}
                       </>
                     )}
                     <Spacer y={1} />
@@ -1215,10 +1216,9 @@ const ProvisionerSettings: React.FC<Props> = (props) => {
     setShowHelpMessage(false);
     try {
       await preflightChecks();
-    } catch (err) { }
+    } catch (err) {}
   };
 
-
   const renderForm = (): JSX.Element => {
     // Render simplified form if initial create
     if (!props.clusterId) {
@@ -1266,8 +1266,8 @@ const ProvisionerSettings: React.FC<Props> = (props) => {
                         </Text>
                       </CheckItemTop>
                     </CheckItemContainer>
-
-                  </>) :
+                  </>
+                ) : (
                   <>
                     <PreflightChecks
                       provider="AWS"
@@ -1277,67 +1277,94 @@ const ProvisionerSettings: React.FC<Props> = (props) => {
                     <Spacer y={0.5} />
                     {preflightFailed && preflightData && (
                       <>
-                        {(showHelpMessage && currentProject?.quota_increase) ? <>
-                          <Text color="helper">
-                            Your account currently is blocked from provisioning in {clusterState.awsRegion} due to a quota limit imposed by AWS. Either change the region or request to increase quotas.
-                          </Text>
-                          <Spacer y={.5} />
-                          <Text color="helper">
-                            Porter can automatically request quota increases on your behalf and email you once the cluster is provisioned.
-                          </Text>
-                          <Spacer y={.5} />
-                          <div style={{ display: 'flex', justifyContent: 'flex-start', alignItems: 'center', gap: '15px' }}>
-                            <Button
-                              disabled={isLoading}
-                              onClick={proceedToProvision}
-
+                        {showHelpMessage && currentProject?.quota_increase ? (
+                          <>
+                            <Text color="helper">
+                              Your account currently is blocked from
+                              provisioning in {clusterState.awsRegion} due to a
+                              quota limit imposed by AWS. Either change the
+                              region or request to increase quotas.
+                            </Text>
+                            <Spacer y={0.5} />
+                            <Text color="helper">
+                              Porter can automatically request quota increases
+                              on your behalf and email you once the cluster is
+                              provisioned.
+                            </Text>
+                            <Spacer y={0.5} />
+                            <div
+                              style={{
+                                display: "flex",
+                                justifyContent: "flex-start",
+                                alignItems: "center",
+                                gap: "15px",
+                              }}
                             >
-                              Auto request increase
-                            </Button>
+                              <Button
+                                disabled={isLoading}
+                                onClick={proceedToProvision}
+                              >
+                                Auto request increase
+                              </Button>
+                              <Button
+                                disabled={isLoading}
+                                onClick={dismissPreflight}
+                                color="#313539"
+                              >
+                                I'll do it myself
+                              </Button>
+                            </div>
+                          </>
+                        ) : (
+                          <>
+                            <Text color="helper">
+                              Your account currently is blocked from
+                              provisioning in {clusterState.awsRegion} due to a
+                              quota limit imposed by AWS. Either change the
+                              region or request to increase quotas.
+                            </Text>
+                            <Spacer y={0.5} />
                             <Button
                               disabled={isLoading}
-                              onClick={dismissPreflight}
-                              color="#313539"
+                              onClick={preflightChecks}
                             >
-                              I'll do it myself
-                            </Button>
-                          </div>
-
-                        </> : (
-                          <><Text color="helper">
-                            Your account currently is blocked from provisioning in {clusterState.awsRegion} due to a quota limit imposed by AWS. Either change the region or request to increase quotas.
-                          </Text><Spacer y={.5} /><Button
-                            disabled={isLoading}
-                            onClick={preflightChecks}
-
-                          >
                               Retry checks
-                            </Button></>)}
-                      </>)}
-                  </>}
-              </>, <>
+                            </Button>
+                          </>
+                        )}
+                      </>
+                    )}
+                  </>
+                )}
+              </>,
+              <>
                 <Text size={16}>Provision your cluster</Text>
                 <Spacer y={1} />
-                {showEmailMessage && <>
-                  <Text color="helper">
-                    After your quota requests have been approved by AWS, Porter will email you when your cluster has been provisioned.
-                  </Text>
-                  <Spacer y={1} />
-                </>}
+                {showEmailMessage && (
+                  <>
+                    <Text color="helper">
+                      After your quota requests have been approved by AWS,
+                      Porter will email you when your cluster has been
+                      provisioned.
+                    </Text>
+                    <Spacer y={1} />
+                  </>
+                )}
                 <Button
                   disabled={(preflightFailed && !showEmailMessage) || isLoading}
-                  onClick={showEmailMessage ? requestQuotasAndProvision : createCluster}
+                  onClick={
+                    showEmailMessage ? requestQuotasAndProvision : createCluster
+                  }
                   status={getStatus()}
                 >
                   Provision
                 </Button>
-                <Spacer y={1} /></>
-              ,
-
+                <Spacer y={1} />
+              </>,
             ].filter((x) => x)}
           />
         </>
-      )
+      );
     }
 
     // If settings, update full form
@@ -1360,10 +1387,9 @@ const ProvisionerSettings: React.FC<Props> = (props) => {
           showEmailMessage={showEmailMessage}
           requestQuotasAndProvision={requestQuotaIncrease}
         />
-      )
+      );
     }
 
-
     return (
       <>
         <StyledForm>
@@ -1420,7 +1446,7 @@ const ExpandHeader = styled.div<{ isExpanded: boolean }>`
         margin - right: 7px;
       margin-left: -7px;
       transform: ${(props) =>
-    props.isExpanded ? "rotate(0deg)" : "rotate(-90deg)"};
+        props.isExpanded ? "rotate(0deg)" : "rotate(-90deg)"};
       transition: transform 0.1s ease;
   }
       `;

dashboard/src/main/home/cluster-dashboard/dashboard/Dashboard.tsx

@@ -18,7 +18,6 @@ import DashboardHeader from "../DashboardHeader";
 import ClusterRevisionSelector from "./ClusterRevisionSelector";
 import ClusterSettings from "./ClusterSettings";
 import ClusterSettingsModal from "./ClusterSettingsModal";
-import Compliance from "./Compliance";
 import Metrics from "./Metrics";
 import { NamespaceList } from "./NamespaceList";
 import NodeList from "./NodeList";
@@ -30,27 +29,12 @@ type TabEnum =
   | "namespaces"
   | "metrics"
   | "incidents"
-  | "compliance"
   | "configuration";
 
-var tabOptions: {
+const tabOptions: Array<{
   label: string;
   value: TabEnum;
-}[] = [{ label: "Additional settings", value: "settings" }];
-
-const COMPLIANCE_SUPPORTED_PROVIDERS = ["AWS"];
-
-const showComplianceTab = (
-  capi_provisioner_enabled: boolean,
-  soc2_controls_enabled: boolean,
-  cloud_provider: string
-): boolean => {
-  return (
-    capi_provisioner_enabled &&
-    soc2_controls_enabled &&
-    COMPLIANCE_SUPPORTED_PROVIDERS.includes(cloud_provider)
-  );
-};
+}> = [{ label: "Additional settings", value: "settings" }];
 
 export const Dashboard: React.FunctionComponent = () => {
   const [currentTab, setCurrentTab] = useState<TabEnum>("settings");
@@ -80,16 +64,6 @@ export const Dashboard: React.FunctionComponent = () => {
         return <Metrics />;
       case "namespaces":
         return <NamespaceList />;
-      case "compliance":
-        return selectedClusterVersion ? (
-          <Compliance
-            provisionerError={provisionFailureReason}
-            selectedClusterVersion={selectedClusterVersion}
-            credentialId={
-              context.currentCluster.cloud_provider_credential_identifier
-            }
-          />
-        ) : null;
       case "configuration":
         return (
           <>
@@ -132,7 +106,6 @@ export const Dashboard: React.FunctionComponent = () => {
   };
 
   useEffect(() => {
-    ``;
     if (
       context.currentCluster.status !== "UPDATING_UNAVAILABLE" &&
       !tabOptions.find((tab) => tab.value === "nodes")
@@ -144,17 +117,6 @@ export const Dashboard: React.FunctionComponent = () => {
       }
     }
 
-    if (
-      showComplianceTab(
-        context.currentProject?.capi_provisioner_enabled,
-        context.currentProject?.soc2_controls_enabled,
-        context.currentCluster.cloud_provider
-      ) &&
-      !tabOptions.find((tab) => tab.value === "compliance")
-    ) {
-      tabOptions.unshift({ value: "compliance", label: "Compliance" });
-    }
-
     if (
       context.currentProject?.capi_provisioner_enabled &&
       !tabOptions.find((tab) => tab.value === "configuration")
@@ -240,7 +202,9 @@ export const Dashboard: React.FunctionComponent = () => {
           <TabSelector
             options={currentTabOptions}
             currentTab={currentTab}
-            setCurrentTab={(value: TabEnum) => setCurrentTab(value)}
+            setCurrentTab={(value: TabEnum) => {
+              setCurrentTab(value);
+            }}
           />
           {renderTab()}
         </>
@@ -251,7 +215,9 @@ export const Dashboard: React.FunctionComponent = () => {
           <TabSelector
             options={currentTabOptions}
             currentTab={currentTab}
-            setCurrentTab={(value: TabEnum) => setCurrentTab(value)}
+            setCurrentTab={(value: TabEnum) => {
+              setCurrentTab(value);
+            }}
           />
           {renderTab()}
         </>