properly show oneleet checks from the fe (#4272)

api/server/handlers/cluster/compliance_checks.go

@@ -63,6 +63,8 @@ func (c *ListComplianceChecksHandler) ServeHTTP(w http.ResponseWriter, r *http.R
 		switch request.Vendor {
 		case compliance.Vendor_Vanta:
 			vendor = porterv1.EnumComplianceVendor_ENUM_COMPLIANCE_VENDOR_VANTA
+		case compliance.Vendor_OneLeet:
+			vendor = porterv1.EnumComplianceVendor_ENUM_COMPLIANCE_VENDOR_ONE_LEET
 		default:
 			err := telemetry.Error(ctx, span, nil, "invalid vendor")
 			c.HandleAPIError(w, r, apierrors.NewErrPassThroughToClient(err, http.StatusBadRequest))

dashboard/package.json

@@ -102,7 +102,7 @@
     "@babel/preset-typescript": "^7.15.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.1.1",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
-    "@porter-dev/api-contracts": "^0.2.98",
+    "@porter-dev/api-contracts": "^0.2.103",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",

dashboard/src/components/porter/Select.tsx

@@ -4,7 +4,6 @@ import styled from "styled-components";
 import arrow from "assets/arrow-down.svg";
 
 import Container from "./Container";
-import Spacer from "./Spacer";
 
 type Props = {
   options: Array<{

dashboard/src/lib/hooks/useCluster.ts

@@ -135,7 +135,9 @@ export const useLatestClusterContract = ({
 
       const res = await api.getContracts(
         "<token>",
-        {},
+        {
+          latest: true,
+        },
         { project_id: currentProject.id }
       );
 

dashboard/src/main/home/compliance-dashboard/ActionBanner.tsx

@@ -22,6 +22,7 @@ export const ActionBanner: React.FC<ActionBannerProps> = ({
   const history = useHistory();
   const {
     profile,
+    vendor,
     updateInProgress,
     latestContractDB,
     latestContractProto,
@@ -87,6 +88,16 @@ export const ActionBanner: React.FC<ActionBannerProps> = ({
     complianceEnabled,
   ]);
 
+  const isHipaaForOneleet = profile === "hipaa" && vendor === "oneleet";
+
+  if (isHipaaForOneleet) {
+    return (
+      <Banner type="warning">
+        HIPAA controls are not yet available for OneLeet
+      </Banner>
+    );
+  }
+
   if (isInfraPending) {
     return (
       <Banner

dashboard/src/main/home/compliance-dashboard/ComplianceContext.tsx

@@ -28,6 +28,7 @@ import {
 } from "./types";
 
 type ComplianceProfileType = "soc2" | "hipaa";
+type ComplianceVendorType = "vanta" | "oneleet";
 
 type ProjectComplianceContextType = {
   projectId: number;
@@ -41,6 +42,8 @@ type ProjectComplianceContextType = {
   updateInProgress: boolean;
   profile: ComplianceProfileType;
   setProfile: Dispatch<SetStateAction<ComplianceProfileType>>;
+  vendor: ComplianceVendorType;
+  setVendor: Dispatch<SetStateAction<ComplianceVendorType>>;
   updateContractWithProfile: () => Promise<void>;
 };
 
@@ -69,6 +72,7 @@ export const ProjectComplianceProvider: React.FC<
   const queryClient = useQueryClient();
   const [updateInProgress, setUpdateInProgress] = useState(false);
   const [profile, setProfile] = useState<ComplianceProfileType>("soc2");
+  const [vendor, setVendor] = useState<ComplianceVendorType>("vanta");
 
   const {
     contractDB: latestContractDB,
@@ -86,13 +90,14 @@ export const ProjectComplianceProvider: React.FC<
         clusterId,
         condition: latestContractDB?.condition ?? "",
         profile,
+        vendor,
         name: "getComplianceChecks",
       },
     ],
     async () => {
       const res = await api.getComplianceChecks(
         "<token>",
-        { vendor: "vanta", profile },
+        { vendor, profile },
         { projectId, clusterId }
       );
 
@@ -181,6 +186,8 @@ export const ProjectComplianceProvider: React.FC<
         updateInProgress,
         profile,
         setProfile,
+        vendor,
+        setVendor,
         updateContractWithProfile,
       }}
     >

dashboard/src/main/home/compliance-dashboard/ConfigSelectors.tsx

@@ -7,14 +7,15 @@ import Spacer from "components/porter/Spacer";
 
 import aws from "assets/aws.png";
 import framework from "assets/framework.svg";
+import oneleet from "assets/oneleet.svg";
 import provider from "assets/provider.svg";
 import typeSvg from "assets/type.svg";
 import vanta from "assets/vanta.svg";
 
 import { useCompliance } from "./ComplianceContext";
 
 export const ConfigSelectors: React.FC = () => {
-  const { profile, setProfile } = useCompliance();
+  const { profile, setProfile, vendor, setVendor } = useCompliance();
   return (
     <Container row>
       <Select
@@ -25,7 +26,6 @@ export const ConfigSelectors: React.FC = () => {
             label: "HIPAA",
           },
         ]}
-        width="200px"
         value={profile}
         setValue={(value) => {
           if (value === "soc2") {
@@ -58,7 +58,6 @@ export const ConfigSelectors: React.FC = () => {
             disabled: true,
           },
         ]}
-        width="180px"
         value={"aws"}
         setValue={() => {}}
         prefix={
@@ -74,19 +73,25 @@ export const ConfigSelectors: React.FC = () => {
         options={[
           { value: "vanta", label: "Vanta", icon: vanta },
           {
-            value: "drata",
-            label: "Drata (coming soon)",
-            disabled: true,
+            value: "oneleet",
+            label: "Oneleet",
+            icon: oneleet,
           },
           {
-            value: "oneleet",
-            label: "Oneleet (coming soon)",
+            value: "drata",
+            label: "Drata (coming soon)",
             disabled: true,
           },
         ]}
-        width="200px"
-        value={"vanta"}
-        setValue={() => {}}
+        value={vendor}
+        setValue={(value) => {
+          if (value === "vanta") {
+            setVendor("vanta");
+            return;
+          }
+
+          setVendor("oneleet");
+        }}
         prefix={
           <Container row>
             <Image src={provider} size={15} opacity={0.6} />

dashboard/src/main/home/compliance-dashboard/ProfileHeader.tsx

@@ -7,44 +7,61 @@ import Spacer from "components/porter/Spacer";
 import Text from "components/porter/Text";
 
 import linkExternal from "assets/link-external.svg";
+import oneleet from "assets/oneleet.svg";
 import vanta from "assets/vanta.svg";
 
 import { useCompliance } from "./ComplianceContext";
 
 export const ProfileHeader: React.FC = () => {
-  const { profile } = useCompliance();
+  const { profile, vendor } = useCompliance();
 
   const header = useMemo(() => {
-    return match(profile)
-      .with("soc2", () => ({
+    return match({ profile, vendor })
+      .with({ profile: "soc2", vendor: "vanta" }, () => ({
         text: "AWS SOC 2 Controls (Vanta)",
         link: "https://app.vanta.com/tests?framework=soc2&service=aws&taskType=TEST",
+        logo: vanta,
       }))
-      .with("hipaa", () => ({
+      .with({ profile: "hipaa", vendor: "vanta" }, () => ({
         text: "AWS HIPAA Controls (Vanta)",
         link: "https://app.vanta.com/tests?framework=hipaa&service=aws&taskType=TEST",
+        logo: vanta,
+      }))
+      .with({ profile: "soc2", vendor: "oneleet" }, () => ({
+        text: "AWS SOC 2 Controls (OneLeet)",
+        link: "https://app.oneleet.io/controls?framework=soc2&service=aws",
+        logo: oneleet,
+      }))
+      .with({ profile: "hipaa", vendor: "oneleet" }, () => ({
+        text: "AWS HIPAA Controls (OneLeet)",
+        link: "https://app.oneleet.io/controls?framework=hipaa&service=aws",
+        logo: oneleet,
       }))
       .exhaustive();
-  }, [profile]);
+  }, [profile, vendor]);
 
   return (
     <Container row>
-      <Image src={vanta} size={25} />
+      <Image src={header.logo} size={25} />
       <Spacer inline x={1} />
       <Text
         size={21}
         additionalStyles=":hover { text-decoration: underline } cursor: pointer;"
         onClick={() => {
-          window.open(header.link, "_blank");
+          if (vendor === "vanta") {
+            window.open(header.link, "_blank");
+          }
         }}
       >
         {header.text}
         <Spacer inline x={0.5} />
-        <Image
-          src={linkExternal}
-          size={16}
-          additionalStyles="margin-bottom: -2px"
-        />
+        {vendor === "vanta" && (
+          <Image
+            src={linkExternal}
+            size={16}
+            additionalStyles="margin-bottom: -2px"
+          />
+        )}
       </Text>
     </Container>
   );

dashboard/src/main/home/compliance-dashboard/VendorChecksList.tsx

@@ -20,7 +20,8 @@ import { type VendorCheck } from "./types";
 type Filter = "all" | "passing" | "action-required" | "not-applicable";
 
 export const VendorChecksList: React.FC = () => {
-  const { profile, vendorChecks, latestContractProto } = useCompliance();
+  const { profile, vendor, vendorChecks, latestContractProto } =
+    useCompliance();
   const { showIntercomWithMessage } = useIntercom();
 
   const [statusFilter, setStatusFilter] = useState<Filter>("all");
@@ -213,20 +214,24 @@ export const VendorChecksList: React.FC = () => {
                 }}
                 additionalStyles=":hover { text-decoration: underline }"
                 onClick={() => {
-                  window.open(
-                    `https://app.vanta.com/tests/${check.vendor_check_id}`,
-                    "_blank"
-                  );
+                  if (vendor === "vanta") {
+                    window.open(
+                      `https://app.vanta.com/tests/${check.vendor_check_id}`,
+                      "_blank"
+                    );
+                  }
                 }}
               >
                 {check.check}
                 <Spacer inline x={0.5} />
-                <Image
-                  src={linkExternal}
-                  opacity={check.status === "not_applicable" ? 0.25 : 1}
-                  size={12}
-                  additionalStyles="margin-bottom: -2px"
-                />
+                {vendor === "vanta" && (
+                  <Image
+                    src={linkExternal}
+                    opacity={check.status === "not_applicable" ? 0.25 : 1}
+                    size={12}
+                    additionalStyles="margin-bottom: -2px"
+                  />
+                )}
               </Text>
             </Container>
             <Spacer y={1} />

dashboard/src/shared/api.tsx

@@ -1529,7 +1529,7 @@ const createContract = baseApi<Contract, { project_id: number }>(
   }
 );
 
-const getContracts = baseApi<{ cluster_id?: number }, { project_id: number }>(
+const getContracts = baseApi<{ cluster_id?: number, latest?: boolean }, { project_id: number }>(
   "GET",
   ({ project_id }) => {
     return `/api/projects/${project_id}/contracts`;
@@ -1551,7 +1551,7 @@ const getClusterState = baseApi<{}, { project_id: number; cluster_id: number }>(
 );
 
 const getComplianceChecks = baseApi<
-  { vendor: "vanta"; profile: "soc2" | "hipaa" },
+  { vendor: "vanta" | "oneleet"; profile: "soc2" | "hipaa" },
   { projectId: number; clusterId: number }
 >("GET", ({ projectId, clusterId }) => {
   return `/api/projects/${projectId}/clusters/${clusterId}/compliance/checks`;

go.mod

@@ -83,7 +83,7 @@ require (
 	github.com/matryer/is v1.4.0
 	github.com/nats-io/nats.go v1.24.0
 	github.com/open-policy-agent/opa v0.44.0
-	github.com/porter-dev/api-contracts v0.2.103
+	github.com/porter-dev/api-contracts v0.2.104
 	github.com/riandyrn/otelchi v0.5.1
 	github.com/santhosh-tekuri/jsonschema/v5 v5.0.1
 	github.com/stefanmcshane/helm v0.0.0-20221213002717-88a4a2c6e77d