feature secret rotations v2

2026-10-17 23:00:14 +00:00 · 2025-03-31 20:34:48 -07:00
parent da094383b8
commit 766c1242fd
275 changed files with 9692 additions and 783 deletions
@@ -0,0 +1,151 @@
+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";
+
+type Props = {
+  onSelect: (type: SecretRotation) => void;
+};
+
+export const SecretRotationV2Select = ({ onSelect }: Props) => {
+  const { isPending, data: secretRotationOptions } = useSecretRotationV2Options();
+
+  if (isPending) {
+    return (
+      <div className="flex h-full flex-col items-center justify-center py-2.5">
+        <Spinner size="lg" className="text-mineshaft-500" />
+        <p className="mt-4 text-sm text-mineshaft-400">Loading options...</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-3 gap-2">
+      {secretRotationOptions?.map(({ type }) => {
+        const { image, name } = SECRET_ROTATION_MAP[type];
+
+        let size: number;
+
+        switch (type) {
+          case SecretRotation.MsSqlCredentials:
+            size = 50;
+            break;
+          default:
+            size = 45;
+        }
+
+        return (
+          <button
+            type="button"
+            key={type}
+            onClick={() => onSelect(type)}
+            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>
+        );
+      })}
+      {/* 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"
+        content={
+          <>
+            <p className="mb-2">Infisical is constantly adding support for more services.</p>
+            <p>
+              {`If you don't see the third-party
+            service you're looking for,`}{" "}
+              <a
+                target="_blank"
+                className="underline hover:text-mineshaft-300"
+                href="https://infisical.com/slack"
+                rel="noopener noreferrer"
+              >
+                let us know on Slack
+              </a>{" "}
+              or{" "}
+              <a
+                target="_blank"
+                className="underline hover:text-mineshaft-300"
+                href="https://github.com/Infisical/infisical/discussions"
+                rel="noopener noreferrer"
+              >
+                make a request on GitHub
+              </a>
+              .
+            </p>
+          </>
+        }
+      >
+        <div className="group relative flex h-28 flex-col items-center justify-center rounded-md border border-dashed border-mineshaft-600 bg-mineshaft-800 p-4 hover:bg-mineshaft-900/50">
+          <FontAwesomeIcon className="mt-auto text-3xl" icon={faWrench} />
+          <div className="mt-auto max-w-xs text-center text-xs font-medium text-gray-300 duration-200 group-hover:text-gray-200">
+            Coming Soon
+          </div>
+        </div>
+      </Tooltip>
+    </div>
+  );
+};