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;
   }