improvements: address feedback, feature docs and cert validation with dns rebinding handling

frontend/src/components/secret-rotations-v2/SecretRotationV2Select.tsx

@@ -1,7 +1,6 @@
 import { faWrench } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { createNotification } from "@app/components/notifications";
 import { Spinner, Tooltip } from "@app/components/v2";
 import { SECRET_ROTATION_MAP } from "@app/helpers/secretRotationsV2";
 import { SecretRotation, useSecretRotationV2Options } from "@app/hooks/api/secretRotationsV2";
@@ -56,58 +55,6 @@ export const SecretRotationV2Select = ({ onSelect }: Props) => {
           </button>
         );
       })}
-      {/* templates for kubecon, remove once implemented */}
-      {[
-        {
-          name: "MySQL Credentials",
-          image: "MySql.png"
-        },
-        {
-          name: "SendGrid API Key",
-          image: "SendGrid.png"
-        },
-        {
-          name: "AWS IAM User Credentials",
-          image: "Amazon Web Services.png"
-        }
-      ].map(({ name, image }) => {
-        let size: number;
-
-        switch (name) {
-          case "MySQL Credentials":
-            size = 80;
-            break;
-          case "SendGrid API Key":
-            size = 50;
-            break;
-          default:
-            size = 45;
-        }
-
-        return (
-          <button
-            type="button"
-            key={name}
-            onClick={() =>
-              createNotification({
-                type: "info",
-                text: `${name} Rotation is under development. Please check back soon.`
-              })
-            }
-            className="group relative flex h-28 cursor-pointer flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600"
-          >
-            <img
-              src={`/images/integrations/${image}`}
-              width={size}
-              className="mt-auto"
-              alt={`${name} logo`}
-            />
-            <div className="mt-auto max-w-xs text-center text-xs font-medium text-gray-300 duration-200 group-hover:text-gray-200">
-              {name}
-            </div>
-          </button>
-        );
-      })}
       <Tooltip
         side="bottom"
         className="max-w-sm py-4"

frontend/src/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/ViewSecretRotationV2GeneratedCredentials.tsx

@@ -41,13 +41,21 @@ const Content = ({ secretRotation }: ContentProps) => {
     );
   }
 
+  if (!generatedCredentialsResponse) {
+    return (
+      <div className="flex w-full justify-center">
+        <p className="text-sm text-red">No generated credentials found for this rotation.</p>
+      </div>
+    );
+  }
+
   let Component: ReactNode;
-  switch (generatedCredentialsResponse!.type) {
+  switch (generatedCredentialsResponse.type) {
     case SecretRotation.PostgresCredentials:
     case SecretRotation.MsSqlCredentials:
       Component = (
         <ViewSqlRotationGeneratedCredentials
-          generatedCredentialsResponse={generatedCredentialsResponse!}
+          generatedCredentialsResponse={generatedCredentialsResponse}
         />
       );
       break;

frontend/src/pages/secret-manager/SecretDashboardPage/components/SnapshotView/SnapshotView.tsx

@@ -33,13 +33,11 @@ type Props = {
 const LOADER_TEXT = ["Fetching your snapshot", "Creating the difference view"];
 
 const deepCompareSecrets = (lhs: SecretV3RawSanitized, rhs: SecretV3RawSanitized) =>
-  lhs.isRotatedSecret ||
-  rhs.isRotatedSecret ||
-  (lhs.key === rhs.key &&
-    lhs.value === rhs.value &&
-    lhs.comment === rhs.comment &&
-    lhs?.valueOverride === rhs?.valueOverride &&
-    JSON.stringify(lhs.tags) === JSON.stringify(rhs.tags));
+  lhs.key === rhs.key &&
+  lhs.value === rhs.value &&
+  lhs.comment === rhs.comment &&
+  lhs?.valueOverride === rhs?.valueOverride &&
+  JSON.stringify(lhs.tags) === JSON.stringify(rhs.tags);
 
 export const SnapshotView = ({
   snapshotId,
@@ -100,9 +98,12 @@ export const SnapshotView = ({
       const doesExist = Boolean(secretGroupById?.[id]);
       if (doesExist) {
         diffView.push({
-          mode: deepCompareSecrets(rollSecret, secretGroupById[id])
-            ? TDiffModes.NoChange
-            : TDiffModes.Modified,
+          mode:
+            rollSecret.isRotatedSecret ||
+            secretGroupById[id]?.isRotatedSecret ||
+            deepCompareSecrets(rollSecret, secretGroupById[id])
+              ? TDiffModes.NoChange
+              : TDiffModes.Modified,
           pre: secretGroupById[id],
           post: rollSecret
         });

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

@@ -141,7 +141,7 @@ const Page = () => {
       </PageHeader>
       <NoticeBannerV2 title="Secret Rotations Update">
         <p className="text-sm text-bunker-200">
-          Infisical is revamping it&#39;s Secret Rotation experience.
+          Infisical is revamping its Secret Rotation experience.
         </p>
         <p className="mt-2 text-sm text-bunker-200">
           Secret Rotations can now be created from the{" "}
@@ -364,7 +364,7 @@ const Page = () => {
         <ModalContent className="max-w-5xl" title="Secret Rotation Update">
           <div className="flex flex-col gap-2">
             <p className="text-mineshaft-200">
-              Infisical is revamping it&#39;s Secret Rotation experience. Navigate to the{" "}
+              Infisical is revamping its Secret Rotation experience. Navigate to the{" "}
               <Link
                 className="text-mineshaft-100 underline decoration-primary underline-offset-2 hover:text-mineshaft-200"
                 to={`/${ProjectType.SecretManager}/$projectId/overview` as const}
@@ -372,7 +372,7 @@ const Page = () => {
               >
                 Secret Manager Dashboard
               </Link>{" "}
-              to create a Secret Rotations.
+              to create a Secret Rotation.
             </p>
             <div className="overflow-clip rounded border border-mineshaft-600">
               <img