Fix merge conflicts

frontend/src/pages/api/secret-scanning/getRisksByOrganization.ts

@@ -1,7 +1,7 @@
 import SecurityClient from "@app/components/utilities/SecurityClient";
 
 export type GitRisks = {
-  id: string;
+  _id: string;
   description: string;
   startLine: string;
   endLine: string;
@@ -20,6 +20,7 @@ export type GitRisks = {
   tags: string[];
   ruleID: string;
   fingerprint: string;
+  status: string;
 
   isFalsePositive: boolean; // New field for marking risks as false positives
   isResolved: boolean; // New field for marking risks as resolved

frontend/src/pages/api/secret-scanning/linkGitAppInstallationWithOrganization.ts

@@ -16,7 +16,7 @@ const linkGitAppInstallationWithOrganization = (installationId: string, sessionI
     })
   }).then(async (res) => {
     if (res && res.status === 200) {
-      return res.json();
+      return true
     }
     console.log("Failed to link installation to organization");
     return undefined;

frontend/src/pages/integrations/codefresh/authorize.tsx

@@ -0,0 +1,64 @@
+import { useState } from "react";
+import { useRouter } from "next/router";
+
+import { Button, Card, CardTitle, FormControl, Input } from "../../../components/v2";
+import saveIntegrationAccessToken from "../../api/integrations/saveIntegrationAccessToken";
+
+export default function CodefreshCreateIntegrationPage() {
+  const router = useRouter();
+  const [apiKey, setApiKey] = useState("");
+  const [apiKeyErrorText, setApiKeyErrorText] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleButtonClick = async () => {
+    try {
+      setApiKeyErrorText("");
+      if (apiKey.length === 0) {
+        setApiKeyErrorText("API Key cannot be blank");
+        return;
+      }
+
+      setIsLoading(true);
+
+      const integrationAuth = await saveIntegrationAccessToken({
+        workspaceId: localStorage.getItem("projectData.id"),
+        integration: "codefresh",
+        accessId: null,
+        accessToken: apiKey,
+        url: null,
+        namespace: null
+      });
+
+      setIsLoading(false);
+
+      router.push(`/integrations/codefresh/create?integrationAuthId=${integrationAuth._id}`);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <Card className="max-w-md rounded-md p-8">
+        <CardTitle className="text-center">Codefresh Integration</CardTitle>
+        <FormControl
+          label="Codefresh API Key"
+          errorText={apiKeyErrorText}
+          isError={apiKeyErrorText !== "" ?? false}
+        >
+          <Input placeholder="" value={apiKey} onChange={(e) => setApiKey(e.target.value)} />
+        </FormControl>
+        <Button
+          onClick={handleButtonClick}
+          color="mineshaft"
+          className="mt-4"
+          isLoading={isLoading}
+        >
+          Connect to Codefresh
+        </Button>
+      </Card>
+    </div>
+  );
+}
+
+CodefreshCreateIntegrationPage.requireAuth = true;

frontend/src/pages/integrations/codefresh/create.tsx

@@ -0,0 +1,155 @@
+import { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import queryString from "query-string";
+
+import {
+  Button,
+  Card,
+  CardTitle,
+  FormControl,
+  Input,
+  Select,
+  SelectItem
+} from "../../../components/v2";
+import {
+  useGetIntegrationAuthApps,
+  useGetIntegrationAuthById
+} from "../../../hooks/api/integrationAuth";
+import { useGetWorkspaceById } from "../../../hooks/api/workspace";
+import createIntegration from "../../api/integrations/createIntegration";
+
+export default function CodefreshCreateIntegrationPage() {
+  const router = useRouter();
+
+  const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
+
+  const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? "");
+  const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
+  const { data: integrationAuthApps } = useGetIntegrationAuthApps({
+    integrationAuthId: (integrationAuthId as string) ?? ""
+  });
+
+  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState("");
+  const [targetApp, setTargetApp] = useState("");
+  const [secretPath, setSecretPath] = useState("/");
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    if (workspace) {
+      setSelectedSourceEnvironment(workspace.environments[0].slug);
+    }
+  }, [workspace]);
+
+  useEffect(() => {
+    if (integrationAuthApps) {
+      if (integrationAuthApps.length > 0) {
+        setTargetApp(integrationAuthApps[0].name);
+      } else {
+        setTargetApp("none");
+      }
+    }
+  }, [integrationAuthApps]);
+
+  const handleButtonClick = async () => {
+    try {
+      if (!integrationAuth?._id) return;
+
+      setIsLoading(true);
+
+      await createIntegration({
+        integrationAuthId: integrationAuth?._id,
+        isActive: true,
+        app: targetApp,
+        appId:
+          integrationAuthApps?.find((integrationAuthApp) => integrationAuthApp.name === targetApp)
+            ?.appId ?? null,
+        sourceEnvironment: selectedSourceEnvironment,
+        targetEnvironment: null,
+        targetEnvironmentId: null,
+        targetService: null,
+        targetServiceId: null,
+        owner: null,
+        path: null,
+        region: null,
+        secretPath
+      });
+
+      setIsLoading(false);
+
+      router.push(`/integrations/${localStorage.getItem("projectData.id")}`);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  return integrationAuth &&
+    workspace &&
+    selectedSourceEnvironment &&
+    integrationAuthApps &&
+    targetApp ? (
+    <div className="flex h-full w-full items-center justify-center">
+      <Card className="max-w-md rounded-md p-8">
+        <CardTitle className="text-center">Codefresh Integration</CardTitle>
+        <FormControl label="Project Environment" className="mt-4">
+          <Select
+            value={selectedSourceEnvironment}
+            onValueChange={(val) => setSelectedSourceEnvironment(val)}
+            className="w-full border border-mineshaft-500"
+          >
+            {workspace?.environments.map((sourceEnvironment) => (
+              <SelectItem
+                value={sourceEnvironment.slug}
+                key={`source-environment-${sourceEnvironment.slug}`}
+              >
+                {sourceEnvironment.name}
+              </SelectItem>
+            ))}
+          </Select>
+        </FormControl>
+        <FormControl label="Secrets Path">
+          <Input
+            value={secretPath}
+            onChange={(evt) => setSecretPath(evt.target.value)}
+            placeholder="Provide a path, default is /"
+          />
+        </FormControl>
+        <FormControl label="Codefresh Service" className="mt-4">
+          <Select
+            value={targetApp}
+            onValueChange={(val) => setTargetApp(val)}
+            className="w-full border border-mineshaft-500"
+            isDisabled={integrationAuthApps.length === 0}
+          >
+            {integrationAuthApps.length > 0 ? (
+              integrationAuthApps.map((integrationAuthApp) => (
+                <SelectItem
+                  value={integrationAuthApp.name}
+                  key={`target-app-${integrationAuthApp.name}`}
+                >
+                  {integrationAuthApp.name}
+                </SelectItem>
+              ))
+            ) : (
+              <SelectItem value="none" key="target-app-none">
+                No services found
+              </SelectItem>
+            )}
+          </Select>
+        </FormControl>
+        <Button
+          onClick={handleButtonClick}
+          color="mineshaft"
+          className="mt-4"
+          isLoading={isLoading}
+          isDisabled={integrationAuthApps.length === 0}
+        >
+          Create Integration
+        </Button>
+      </Card>
+    </div>
+  ) : (
+    <div />
+  );
+}
+
+CodefreshCreateIntegrationPage.requireAuth = true;

frontend/src/pages/org/[id]/billing/index.tsx

@@ -11,6 +11,7 @@ export default function SettingsBilling() {
       <Head>
         <title>{t("common.head-title", { title: t("billing.title") })}</title>
         <link rel="icon" href="/infisical.ico" />
+        <meta property="og:image" content="/images/message.png" />
       </Head>
       <BillingSettingsPage />
     </div>

frontend/src/pages/org/[id]/secret-scanning/index.tsx

@@ -0,0 +1,89 @@
+import { useEffect, useState } from "react";
+import Head from "next/head";
+import { useRouter } from "next/router"
+
+import { Button } from "@app/components/v2";
+import { SecretScanningLogsTable } from "@app/views/SecretScanning/components";
+
+import createNewIntegrationSession from "../../../api/secret-scanning/createSecretScanningSession";
+import getInstallationStatus from "../../../api/secret-scanning/getInstallationStatus";
+import linkGitAppInstallationWithOrganization from "../../../api/secret-scanning/linkGitAppInstallationWithOrganization";
+
+export default function SecretScanning() {
+  const router = useRouter()
+  const queryParams = router.query
+  const [integrationEnabled, setIntegrationStatus] = useState(false)
+
+  useEffect(()=>{
+    const linkInstallation = async () => {
+      if (typeof queryParams.state === "string" && typeof queryParams.installation_id === "string"){
+        try {
+          const isLinked = await linkGitAppInstallationWithOrganization(queryParams.installation_id as string, queryParams.state as string)
+          if (isLinked){
+            router.reload()
+          }
+          
+          console.log("installation verification complete")
+        }catch (e){
+          console.log("app installation is stale, start new session", e)
+        }
+      }
+    }
+
+    const fetchInstallationStatus = async () => {
+      const status = await getInstallationStatus(String(localStorage.getItem("orgData.id")))
+      setIntegrationStatus(status)
+    }
+
+    fetchInstallationStatus()
+    linkInstallation()
+  },[queryParams.state, queryParams.installation_id])
+
+  const generateNewIntegrationSession = async () => {
+    const session = await createNewIntegrationSession(String(localStorage.getItem("orgData.id")))
+    router.push(`https://github.com/apps/infisical-radar/installations/new?state=${session.sessionId}`)
+  }
+
+  return (
+    <div>
+      <Head>
+        <title>Secret scanning</title>
+        <link rel="icon" href="/infisical.ico" />
+        <meta property="og:image" content="/images/message.png" />
+      </Head>
+      <div className="flex justify-center bg-bunker-800 text-white w-full h-full">
+        <div className="max-w-7xl px-6 w-full">
+          <div className="mt-6 text-3xl font-semibold text-gray-200">Secret Scanning</div>      
+          <div className="mb-6 text-lg text-mineshaft-300">Automatically monitor your GitHub activity and prevent secret leaks</div>    
+          <div className="relative flex justify-between bg-mineshaft-800 border border-mineshaft-600 rounded-md p-6 mb-6">
+            <div className="flex flex-col items-start">
+              <div className="flex flex-row mb-1">Secret Scanning Status: {integrationEnabled ? <p className="text-green ml-1.5 font-semibold">Enabled</p> : <p className="text-red ml-1.5 font-semibold">Not enabled</p>}</div>
+              <div>{integrationEnabled ? <p className="text-mineshaft-300">Your GitHub organization is connected to Infisical, and is being continuously monitored for secret leaks.</p> : <p className="text-mineshaft-300">Connect your GitHub organization to Infisical.</p>}</div>
+            </div>
+            {integrationEnabled ? (
+              <div>
+                <div className="absolute right-[2.5rem] top-[2.5rem] animate-ping rounded-full h-6 w-6 bg-green flex items-center justify-center"/>
+                <div className="absolute right-[2.63rem] top-[2.63rem] animate-ping rounded-full h-5 w-5 bg-green flex items-center justify-center"/>
+                <div className="absolute right-[2.82rem] top-[2.82rem] animate-ping rounded-full h-3.5 w-3.5 bg-green flex items-center justify-center"/>
+              </div>
+            ) : (
+              <div className="flex items-center h-[3.25rem]">
+                <Button
+                  variant="solid"
+                  colorSchema="primary"
+                  onClick={generateNewIntegrationSession}
+                  className="py-2 h-min"
+                >
+                  Integrate with GitHub
+                </Button>
+              </div>
+            )}
+          </div>
+          <SecretScanningLogsTable />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+SecretScanning.requireAuth = true;

frontend/src/pages/secret-scanning.tsx

@@ -0,0 +1,15 @@
+import { useEffect } from "react";
+import { useRouter } from "next/router"
+
+export default function SecretScanning() {
+  const router = useRouter();
+
+  useEffect(()=>{
+    router.push(`${router.asPath.split("secret-scanning")[0]}/org/${localStorage.getItem("orgData.id")}/secret-scanning${router.asPath.split("secret-scanning")[1]}`)
+  }, [])
+
+
+  return <div/>;
+}
+
+SecretScanning.requireAuth = true;

frontend/src/pages/secret-scanning/index.tsx

@@ -1,156 +0,0 @@
-import { useEffect, useState } from "react";
-import Head from "next/head";
-import { useRouter } from "next/router"
-
-import createNewIntegrationSession from "../api/secret-scanning/createSecretScanningSession";
-import getInstallationStatus from "../api/secret-scanning/getInstallationStatus";
-import getRisksByOrganization, { GitRisks } from "../api/secret-scanning/getRisksByOrganization";
-import linkGitAppInstallationWithOrganization from "../api/secret-scanning/linkGitAppInstallationWithOrganization";
-import { RiskStatus } from "../api/secret-scanning/updateRiskStatus";
-
-export default function SecretScanning() {
-  const router = useRouter()
-  const { state, installationId} = router.query
-  const [integrationEnabled, setIntegrationStatus] = useState(false)
-  const [gitRisks, setGitRisks] = useState<GitRisks[]>([]);
-  const [selectedRiskStatus, setSelectedRiskStatus] = useState("");
-
-  const handleSelectRiskStatusUpdate = (event: any) => {
-    setSelectedRiskStatus(event.target.value);
-  };
-
-  console.log("selectedRiskStatus===>", selectedRiskStatus)
-
-  useEffect(()=>{
-    const fetchRisks = async () =>{
-      const risks = await getRisksByOrganization(String(localStorage.getItem("orgData.id")))
-      setGitRisks(risks)
-    }
-
-    const linkInstallation = async () => {
-      if (typeof state === "string" && typeof installationId === "string"){
-        try {
-          await linkGitAppInstallationWithOrganization(installationId as string, state as string)
-          console.log("installation verification complete")
-        }catch (e){
-          console.log("app installation is stale, start new session", e)
-        }
-      }
-    }
-
-    const fetchInstallationStatus = async () => {
-      const status = await getInstallationStatus(String(localStorage.getItem("orgData.id")))
-      setIntegrationStatus(status)
-    }
-
-    fetchInstallationStatus()
-    linkInstallation()
-    fetchRisks()
-  },[state, installationId])
-
-  const generateNewIntegrationSession = async () => {
-    const session = await createNewIntegrationSession(String(localStorage.getItem("orgData.id")))
-    router.push(`https://github.com/apps/infisical-radar/installations/new?state=${session.sessionId}`)
-  }
-
-  return (
-    <div>
-      <Head>
-        <title>Secret scanning</title>
-        <link rel="icon" href="/infisical.ico" />
-        <meta property="og:image" content="/images/message.png" />
-      </Head>
-      {/* <NavHeader pageName={"Secret scanning"} isProjectRelated={false} /> */}
-      
-      <div className="text-left">
-        {integrationEnabled ? (
-          <b className="text-green-500">Git app is linked to this organization</b>
-        ) : (
-          <button
-            type="button"
-            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
-            onClick={generateNewIntegrationSession}
-          >
-            Integrate with GitHub
-          </button>
-        )}
-      </div>
-
-      <table className="min-w-full divide-y divide-gray-200">
-  <thead>
-    <tr>
-      <th className="py-3 px-6 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-        Date
-      </th>
-      <th className="py-3 px-6 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-        Secret Type
-      </th>
-      <th className="py-3 px-6 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-        View Risk
-      </th>
-      <th className="py-3 px-6 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-        Info
-      </th>
-      <th className="py-3 px-6 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-        Status
-      </th>
-      <th className="py-3 px-6 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-        Action
-      </th>
-    </tr>
-  </thead>
-  <tbody className="bg-white divide-y divide-gray-200">
-      {gitRisks.map((risk) => {
-        return (
-          <tr key={risk.ruleID}>
-            <td className="py-4 px-6 whitespace-nowrap">{risk.createdAt}</td>
-            <td className="py-4 px-6 whitespace-nowrap">{risk.ruleID}</td>
-            <td className="py-4 px-6 whitespace-nowrap">
-              <a
-                href={`https://github.com/${risk.repositoryFullName}/blob/${risk.commit}/${risk.file}#L${risk.startLine}-L${risk.endLine}`}
-                target="_blank"
-                className="text-red-500" rel="noreferrer"
-              >
-                View Exposed Secret
-              </a>
-            </td>
-            <td className="py-4 px-6 whitespace-nowrap">
-              <div className="font-bold">
-                <a href={`https://github.com/${risk.repositoryFullName}`}>
-                  {risk.repositoryFullName}
-                </a>
-              </div>
-              <div className="text-xs">
-                <span>{risk.file}</span><br/>
-                <br/>
-                <span className="font-bold">{risk.author}</span><br/>
-                <span>{risk.email}</span>
-              </div>
-            </td>
-            <td className="py-4 px-6 whitespace-nowrap">
-              {risk.isResolved ? "Resolved" : "Needs Attention"}
-            </td>
-            <td className="py-4 px-6 whitespace-nowrap">
-              {risk.isResolved ? "Resolved" : "Needs Attention"}
-            </td>
-            <td className="py-4 px-6 whitespace-nowrap">
-              <select
-                value={selectedRiskStatus}
-                onChange={handleSelectRiskStatusUpdate}
-                className="block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
-              >
-                <option>Unresolved</option>
-                <option value={RiskStatus.RESOLVED_FALSE_POSITIVE}>This is a false positive</option>
-                <option value={RiskStatus.RESOLVED_REVOKED}>I have rotated the secret, resolve risk</option>
-                <option value={RiskStatus.RESOLVED_NOT_REVOKED}>No rotate needed, resolve</option>
-              </select>
-            </td>
-          </tr>
-        );
-      })}
-    </tbody>
-  </table>
-
-    </div>
-  );
-}