infisical/frontend/src/views/SecretApprovalPage/SecretApprovalPage.tsx

import Link from "next/link";
import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
import { useWorkspace } from "@app/context";

import { SecretApprovalPolicyList } from "./components/SecretApprovalPolicyList";
import { SecretApprovalRequest } from "./components/SecretApprovalRequest";

enum TabSection {
  ApprovalRequests = "approval-requests",
  Rules = "approval-rules"
}

export const SecretApprovalPage = () => {
  const { currentWorkspace } = useWorkspace();
  const workspaceId = currentWorkspace?.id || "";

  return (
    <div className="container mx-auto h-full w-full max-w-7xl bg-bunker-800 px-6 text-white">
      <div className="flex items-center justify-between py-6">
        <div className="flex w-full flex-col">
          <h2 className="text-3xl font-semibold text-gray-200">Secret Approval Workflows</h2>
          <p className="text-bunker-300">
            Create approval policies for any modifications to secrets in sensitive environments and
            folders.
          </p>
        </div>
        <div className="flex w-max justify-center">
          <Link href="https://infisical.com/docs/documentation/platform/pr-workflows">
            <span className="w-max cursor-pointer rounded-md border border-mineshaft-500 bg-mineshaft-600 px-4 py-2 text-mineshaft-200 duration-200 hover:border-primary/40 hover:bg-primary/10 hover:text-white">
              Documentation{" "}
              <FontAwesomeIcon
                icon={faArrowUpRightFromSquare}
                className="mb-[0.06rem] ml-1 text-xs"
              />
            </span>
          </Link>
        </div>
      </div>
      <Tabs defaultValue={TabSection.ApprovalRequests}>
        <TabList>
          <Tab value={TabSection.ApprovalRequests}>Secret PRs</Tab>
          <Tab value={TabSection.Rules}>Policies</Tab>
        </TabList>
        <TabPanel value={TabSection.ApprovalRequests}>
          <SecretApprovalRequest />
        </TabPanel>
        <TabPanel value={TabSection.Rules}>
          <SecretApprovalPolicyList workspaceId={workspaceId} />
        </TabPanel>
      </Tabs>
    </div>
  );
};