Draft

backend/src/ee/services/license/licence-fns.ts

@@ -33,7 +33,7 @@ export const getDefaultOnPremFeatures = (): TFeatureSet => ({
   status: null,
   trial_end: null,
   has_used_trial: true,
-  secretApproval: false,
+  secretApproval: true,
   secretRotation: true
 });
 

frontend/src/components/basic/Divider.tsx

@@ -0,0 +1,15 @@
+import { twMerge } from "tailwind-merge";
+
+interface IProps {
+  className?: string;
+}
+
+const Divider = ({ className }: IProps): JSX.Element => {
+  return (
+    <div className={twMerge("flex items-center px-2 opacity-50", className)}>
+      <div aria-hidden="true" className="h-5 w-full grow border border-t border-mineshaft-200" />
+    </div>
+  );
+};
+
+export default Divider;

frontend/src/components/permissions/PermissionDeniedBanner.tsx

@@ -3,6 +3,8 @@ import { faLock } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
 
+import { Button } from "../v2";
+
 type Props = {
   containerClassName?: string;
   className?: string;
@@ -17,24 +19,24 @@ export const PermissionDeniedBanner = ({ containerClassName, className, children
         containerClassName
       )}
     >
-      <div
+      <div className={twMerge("rounded-md bg-mineshaft-800 p-16 text-bunker-300", className)}>
-        className={twMerge(
+        <div className="flex items-end space-x-12">
-          "flex items-end space-x-12 rounded-md bg-mineshaft-800 p-16 text-bunker-300",
+          <div>
-          className
+            <FontAwesomeIcon icon={faLock} size="6x" />
-        )}
+          </div>
-      >
+          <div>
-        <div>
+            <div className="mb-2 text-4xl font-medium">Access Restricted</div>
-          <FontAwesomeIcon icon={faLock} size="6x" />
+            {children || (
-        </div>
+              <div className="text-sm">
-        <div>
+                Your role has limited permissions, please <br /> contact your administrator to gain
-          <div className="mb-2 text-4xl font-medium">Access Restricted</div>
+                access
-          {children || (
+              </div>
-            <div className="text-sm">
+            )}
-              Your role has limited permissions, please <br /> contact your administrator to gain
+          </div>
-              access
-            </div>
-          )}
         </div>
+        <Button className="mt-3 ml-[7.5rem]" size="xs">
+          Request access
+        </Button>
       </div>
     </div>
   );

frontend/src/layouts/AppLayout/AppLayout.tsx

@@ -554,7 +554,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
                             }
                             icon="system-outline-189-domain-verification"
                           >
-                            Secret Approvals
+                            Approvals
                             {Boolean(secretApprovalReqCount?.open) && (
                               <span className="ml-2 rounded border border-primary-400 bg-primary-600 py-0.5 px-1 text-xs font-semibold text-black">
                                 {secretApprovalReqCount?.open}

frontend/src/views/SecretApprovalPage/SecretApprovalPage.tsx

@@ -2,6 +2,7 @@ import Link from "next/link";
 import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
+import Divider from "@app/components/basic/Divider";
 import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
 import { useWorkspace } from "@app/context";
 
@@ -9,8 +10,10 @@ import { SecretApprovalPolicyList } from "./components/SecretApprovalPolicyList"
 import { SecretApprovalRequest } from "./components/SecretApprovalRequest";
 
 enum TabSection {
-  ApprovalRequests = "approval-requests",
+  SecretApprovalRequests = "approval-requests",
-  Rules = "approval-rules"
+  SecretPolicies = "approval-rules",
+  ResourcePolicies = "resource-rules",
+  ResourceApprovalRequests = "resource-requests"
 }
 
 export const SecretApprovalPage = () => {
@@ -21,7 +24,7 @@ export const SecretApprovalPage = () => {
     <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>
+          <h2 className="text-3xl font-semibold text-gray-200">Approval Workflows</h2>
           <p className="text-bunker-300">
             Create approval policies for any modifications to secrets in sensitive environments and
             folders.
@@ -39,15 +42,18 @@ export const SecretApprovalPage = () => {
           </Link>
         </div>
       </div>
-      <Tabs defaultValue={TabSection.ApprovalRequests}>
+      <Tabs defaultValue={TabSection.SecretApprovalRequests}>
         <TabList>
-          <Tab value={TabSection.ApprovalRequests}>Secret PRs</Tab>
+          <Tab value={TabSection.SecretApprovalRequests}>Secret Approvals</Tab>
-          <Tab value={TabSection.Rules}>Policies</Tab>
+          <Tab value={TabSection.SecretPolicies}>Secret Policies</Tab>
+          <Divider />
+          <Tab value={TabSection.ResourceApprovalRequests}>Resource Approvals</Tab>
+          <Tab value={TabSection.ResourcePolicies}>Resource Policies</Tab>
         </TabList>
-        <TabPanel value={TabSection.ApprovalRequests}>
+        <TabPanel value={TabSection.SecretApprovalRequests}>
           <SecretApprovalRequest />
         </TabPanel>
-        <TabPanel value={TabSection.Rules}>
+        <TabPanel value={TabSection.SecretPolicies}>
           <SecretApprovalPolicyList workspaceId={workspaceId} />
         </TabPanel>
       </Tabs>