PIT: general improvements and fixes

frontend/src/pages/secret-manager/CommitDetailsPage/CommitDetailsPage.tsx

@@ -1,15 +1,17 @@
-import { Helmet } from "react-helmet";
-import { useTranslation } from "react-i18next";
 import { useNavigate, useParams, useSearch } from "@tanstack/react-router";
 
+import { ProjectPermissionCan } from "@app/components/permissions";
 import { ROUTE_PATHS } from "@app/const/routes";
 import { useWorkspace } from "@app/context";
+import {
+  ProjectPermissionCommitsActions,
+  ProjectPermissionSub
+} from "@app/context/ProjectPermissionContext/types";
 import { ProjectType } from "@app/hooks/api/workspace/types";
 
 import { CommitDetailsTab } from "./components/CommitDetailsTab";
 
 export const CommitDetailsPage = () => {
-  const { t } = useTranslation();
   const envSlug = useParams({
     from: ROUTE_PATHS.SecretManager.CommitDetailsPage.id,
     select: (el) => el.environment
@@ -64,17 +66,20 @@ export const CommitDetailsPage = () => {
 
   return (
     <div className="mx-auto flex w-full max-w-7xl justify-center bg-bunker-800 pb-4 pt-2 text-white">
-      <Helmet>
-        <title>{t("common.head-title", { title: "Commit History" })}</title>
-      </Helmet>
       <div className="w-full max-w-[75vw]">
-        <CommitDetailsTab
-          selectedCommitId={selectedCommitId}
-          workspaceId={currentWorkspace.id}
-          goBackToHistory={handleGoBackToHistory}
-          envSlug={envSlug}
-          goToRollbackPreview={handleGoToRollbackPreview}
-        />
+        <ProjectPermissionCan
+          renderGuardBanner
+          I={ProjectPermissionCommitsActions.Read}
+          a={ProjectPermissionSub.Commits}
+        >
+          <CommitDetailsTab
+            selectedCommitId={selectedCommitId}
+            workspaceId={currentWorkspace.id}
+            goBackToHistory={handleGoBackToHistory}
+            envSlug={envSlug}
+            goToRollbackPreview={handleGoToRollbackPreview}
+          />
+        </ProjectPermissionCan>
       </div>
     </div>
   );

frontend/src/pages/secret-manager/CommitDetailsPage/components/CommitDetailsTab/CommitDetailsTab.tsx

@@ -243,10 +243,10 @@ export const CommitDetailsTab = ({
     <div className="w-full">
       <div>
         <div className="flex justify-between pb-2">
-          <div>
+          <div className="w-5/6">
             <div>
               <div className="flex items-center">
-                <h1 className="mr-4 text-3xl font-semibold text-white">
+                <h1 className="mr-4 truncate text-3xl font-semibold text-white">
                   {parsedCommitDetails.changes?.message || "No message"}
                 </h1>
               </div>
@@ -266,7 +266,7 @@ export const CommitDetailsTab = ({
           </div>
           <div className="flex items-center justify-start">
             <ProjectPermissionCan
-              I={ProjectPermissionCommitsActions.Read}
+              I={ProjectPermissionCommitsActions.PerformRollback}
               a={ProjectPermissionSub.Commits}
             >
               {(isAllowed) => (

frontend/src/pages/secret-manager/CommitDetailsPage/components/RollbackPreviewTab/RollbackPreviewTab.tsx

@@ -6,6 +6,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate, useParams, useSearch } from "@tanstack/react-router";
 
 import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
 import {
   Button,
   DeleteActionModal,
@@ -17,6 +18,10 @@ import {
 } from "@app/components/v2";
 import { ROUTE_PATHS } from "@app/const/routes";
 import { useWorkspace } from "@app/context";
+import {
+  ProjectPermissionCommitsActions,
+  ProjectPermissionSub
+} from "@app/context/ProjectPermissionContext/types";
 import { usePopUp } from "@app/hooks";
 import { useCommitRollback, useGetRollbackPreview } from "@app/hooks/api/folderCommits/queries";
 import { ProjectType } from "@app/hooks/api/workspace/types";
@@ -294,71 +299,77 @@ export const RollbackPreviewTab = (): JSX.Element => {
 
   return (
     <div className="mx-auto flex w-full max-w-7xl justify-center bg-bunker-800 pb-4 pt-2 text-white">
-      <div className="w-full max-w-[75vw]">
-        <div className="h-full w-full">
-          <div>
-            <PageHeader
-              title={`Restore folder at commit ${selectedCommitId.substring(0, 8)}`}
-              description="This will restore all changes to how they appeared at the point in time of this commit. Any modifications made after this commit will be undone."
-            />
+      <ProjectPermissionCan
+        renderGuardBanner
+        I={ProjectPermissionCommitsActions.PerformRollback}
+        a={ProjectPermissionSub.Commits}
+      >
+        <div className="w-full max-w-[75vw]">
+          <div className="h-full w-full">
+            <div>
+              <PageHeader
+                title={`Restore folder at commit ${selectedCommitId.substring(0, 8)}`}
+                description="This will restore all changes to how they appeared at the point in time of this commit. Any modifications made after this commit will be undone."
+              />
 
-            <div className="flex w-full border border-mineshaft-600">
-              {renderSidebar()}
-              {renderMainContent()}
-            </div>
+              <div className="flex w-full border border-mineshaft-600">
+                {renderSidebar()}
+                {renderMainContent()}
+              </div>
 
-            <div className="border-x border-mineshaft-600 bg-mineshaft-800 px-6 py-3">
-              <div className="flex items-center justify-end">
-                <div className="flex items-center">
-                  <Tooltip content="Enable/Disable deep rollback to restore all nested folders to their previous state">
-                    <FontAwesomeIcon icon={faInfoCircle} className="mr-2 text-mineshaft-400" />
-                  </Tooltip>
-                  <Switch
-                    className="ml-2 bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/50"
-                    thumbClassName="bg-mineshaft-800"
-                    isChecked={deepRollback}
-                    onCheckedChange={setDeepRollback}
-                    id="deep-rollback"
+              <div className="border-x border-mineshaft-600 bg-mineshaft-800 px-6 py-3">
+                <div className="flex items-center justify-end">
+                  <div className="flex items-center">
+                    <Tooltip content="Enable/Disable deep rollback to restore all nested folders to their previous state">
+                      <FontAwesomeIcon icon={faInfoCircle} className="mr-2 text-mineshaft-400" />
+                    </Tooltip>
+                    <Switch
+                      className="ml-2 bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/50"
+                      thumbClassName="bg-mineshaft-800"
+                      isChecked={deepRollback}
+                      onCheckedChange={setDeepRollback}
+                      id="deep-rollback"
+                    >
+                      Recursively Restore Child Folders
+                    </Switch>
+                  </div>
+                </div>
+              </div>
+
+              <div className="border-t border-mineshaft-600 py-4">
+                <div className="flex w-full items-center justify-between gap-2">
+                  <Input
+                    placeholder="Restore Message"
+                    value={message}
+                    onChange={(e) => setMessage(e.target.value)}
+                    className="w-full border-mineshaft-500 bg-mineshaft-700 py-2 text-sm"
+                    maxLength={256}
+                  />
+                  <Button
+                    onClick={() => {
+                      handlePopUpOpen("rollbackConfirm");
+                    }}
+                    colorSchema="primary"
+                    className="px-6 py-2"
+                    isDisabled={
+                      message.length === 0 ||
+                      !rollbackChangesNested ||
+                      !rollbackChangesNested?.some((folder) => {
+                        return folder.changes.length > 0;
+                      })
+                    }
                   >
-                    Recursively Restore Child Folders
-                  </Switch>
+                    Restore
+                  </Button>
                 </div>
               </div>
             </div>
 
-            <div className="border-t border-mineshaft-600 py-4">
-              <div className="flex w-full items-center justify-between gap-2">
-                <Input
-                  placeholder="Restore Message"
-                  value={message}
-                  onChange={(e) => setMessage(e.target.value)}
-                  className="w-full border-mineshaft-500 bg-mineshaft-700 py-2 text-sm"
-                />
-                <Button
-                  onClick={() => {
-                    handlePopUpOpen("rollbackConfirm");
-                  }}
-                  colorSchema="primary"
-                  className="px-6 py-2"
-                  isDisabled={
-                    message.length === 0 ||
-                    !rollbackChangesNested ||
-                    !rollbackChangesNested?.some((folder) => {
-                      return folder.changes.length > 0;
-                    })
-                  }
-                >
-                  Restore
-                </Button>
-              </div>
-            </div>
-          </div>
-
-          <DeleteActionModal
-            isOpen={popUp.rollbackConfirm.isOpen}
-            deleteKey="restore"
-            title={`Are you sure you want to restore to commit ${selectedCommitId?.substring(0, 8)}?`}
-            subTitle={`
+            <DeleteActionModal
+              isOpen={popUp.rollbackConfirm.isOpen}
+              deleteKey="restore"
+              title={`Are you sure you want to restore to commit ${selectedCommitId?.substring(0, 8)}?`}
+              subTitle={`
               ${
                 deepRollback
                   ? "This will revert this folder and all child folders to how they appeared at the point in time of this commit."
@@ -366,12 +377,13 @@ export const RollbackPreviewTab = (): JSX.Element => {
               }
                 Any changes made after this commit will be permanently removed.
             `}
-            onChange={(isOpen) => handlePopUpToggle("rollbackConfirm", isOpen)}
-            onDeleteApproved={handleRollback}
-            buttonText="Restore"
-          />
+              onChange={(isOpen) => handlePopUpToggle("rollbackConfirm", isOpen)}
+              onDeleteApproved={handleRollback}
+              buttonText="Restore"
+            />
+          </div>{" "}
         </div>{" "}
-      </div>{" "}
+      </ProjectPermissionCan>
     </div>
   );
 };

frontend/src/pages/secret-manager/CommitDetailsPage/components/SecretVersionDiffView/SecretVersionDiffView.tsx

@@ -505,7 +505,6 @@ export const SecretVersionDiffView = ({
   }
 
   const sortedVersions = [...item.versions].sort((a, b) => b.version - a.version);
-
   let oldVersion = null;
   let newVersion = null;
   let oldVersionContent = null;
@@ -562,13 +561,11 @@ export const SecretVersionDiffView = ({
   } else if (item.isAdded) {
     [newVersion] = sortedVersions;
     const cleanNewVersion = cleanVersionForComparison(newVersion);
-    oldVersionContent = <div className="italic text-gray-400">No previous version</div>;
     newVersionContent = formatAddedJson(cleanNewVersion);
   } else if (item.isDeleted) {
     [oldVersion] = sortedVersions;
     const cleanOldVersion = cleanVersionForComparison(oldVersion);
     oldVersionContent = formatDeletedJson(cleanOldVersion);
-    newVersionContent = <div className="italic text-gray-400">Version deleted</div>;
   } else {
     return null;
   }

frontend/src/pages/secret-manager/CommitsPage/CommitsPage.tsx

@@ -1,16 +1,18 @@
-import { Helmet } from "react-helmet";
-import { useTranslation } from "react-i18next";
 import { useNavigate, useParams, useSearch } from "@tanstack/react-router";
 
+import { ProjectPermissionCan } from "@app/components/permissions";
 import { PageHeader } from "@app/components/v2";
 import { ROUTE_PATHS } from "@app/const/routes";
 import { useWorkspace } from "@app/context";
+import {
+  ProjectPermissionCommitsActions,
+  ProjectPermissionSub
+} from "@app/context/ProjectPermissionContext/types";
 import { ProjectType } from "@app/hooks/api/workspace/types";
 
 import { CommitHistoryTab } from "./components/CommitHistoryTab";
 
 export const CommitsPage = () => {
-  const { t } = useTranslation();
   const envSlug = useParams({
     from: ROUTE_PATHS.SecretManager.CommitsPage.id,
     select: (el) => el.environment
@@ -45,20 +47,23 @@ export const CommitsPage = () => {
 
   return (
     <div className="mx-auto flex h-full w-full max-w-7xl justify-center bg-bunker-800 py-4 text-white">
-      <Helmet>
-        <title>{t("common.head-title", { title: "Commit History" })}</title>
-      </Helmet>
       <div className="w-full max-w-[75vw]">
         <PageHeader
           title="Commits"
           description="Track, inspect, and restore your secrets and folders with confidence. View the complete history of changes made to your environment, examine specific modifications at each commit point, and preview the exact impact before rolling back to previous states."
         />
-        <CommitHistoryTab
-          onSelectCommit={handleSelectCommit}
-          projectId={currentWorkspace.id}
-          environment={envSlug}
-          secretPath={secretPath}
-        />
+        <ProjectPermissionCan
+          renderGuardBanner
+          I={ProjectPermissionCommitsActions.Read}
+          a={ProjectPermissionSub.Commits}
+        >
+          <CommitHistoryTab
+            onSelectCommit={handleSelectCommit}
+            projectId={currentWorkspace.id}
+            environment={envSlug}
+            secretPath={secretPath}
+          />
+        </ProjectPermissionCan>
       </div>
     </div>
   );