Merge remote-tracking branch 'origin' into delete-org

2026-09-22 13:39:35 +00:00 · 2023-10-10 14:54:19 +01:00
parent feade5d029 5e4d4f56e3
commit dc23517133
15 changed files with 257 additions and 149 deletions
--- a/backend/src/integrations/sync.ts
+++ b/backend/src/integrations/sync.ts
@@ -87,13 +87,15 @@ const syncSecrets = async ({
  integrationAuth,
  secrets,
  accessId,
-  accessToken
+  accessToken,
+  appendices
 }: {
  integration: IIntegration;
  integrationAuth: IIntegrationAuth;
  secrets: Record<string, { value: string; comment?: string }>;
  accessId: string | null;
  accessToken: string;
+  appendices?: { prefix: string, suffix: string };
 }) => {
  switch (integration.integration) {
    case INTEGRATION_GCP_SECRET_MANAGER:
@@ -153,7 +155,8 @@ const syncSecrets = async ({
      await syncSecretsGitHub({
        integration,
        secrets,
-        accessToken
+        accessToken,
+        appendices
      });
      break;
    case INTEGRATION_GITLAB:
@@ -218,7 +221,8 @@ const syncSecrets = async ({
      await syncSecretsCheckly({
        integration,
        secrets,
-        accessToken
+        accessToken,
+        appendices
      });
      break;
    case INTEGRATION_QOVERY:
@@ -1342,11 +1346,13 @@ const syncSecretsNetlify = async ({
 const syncSecretsGitHub = async ({
  integration,
  secrets,
-  accessToken
+  accessToken,
+  appendices
 }: {
  integration: IIntegration;
  secrets: Record<string, { value: string; comment?: string }>;
  accessToken: string;
+  appendices?: { prefix: string, suffix: string };
 }) => {
  interface GitHubRepoKey {
    key_id: string;
@@ -1376,7 +1382,7 @@ const syncSecretsGitHub = async ({
  ).data;

  // Get local copy of decrypted secrets. We cannot decrypt them as we dont have access to GH private key
-  const encryptedSecrets: GitHubSecretRes = (
+  let encryptedSecrets: GitHubSecretRes = (
    await octokit.request("GET /repos/{owner}/{repo}/actions/secrets", {
      owner: integration.owner,
      repo: integration.app
@@ -1389,6 +1395,15 @@ const syncSecretsGitHub = async ({
    {}
  );

+  encryptedSecrets = Object.keys(encryptedSecrets).reduce((result: {
+    [key: string]: GitHubSecret;
+  }, key) => {
+    if ((appendices?.prefix !== undefined ? key.startsWith(appendices?.prefix) : true) && (appendices?.suffix !== undefined ? key.endsWith(appendices?.suffix) : true)) {
+      result[key] = encryptedSecrets[key];
+    }
+    return result;
+  }, {});
+
  Object.keys(encryptedSecrets).map(async (key) => {
    if (!(key in secrets)) {
      await octokit.request("DELETE /repos/{owner}/{repo}/actions/secrets/{secret_name}", {
@@ -2074,13 +2089,15 @@ const syncSecretsSupabase = async ({
 const syncSecretsCheckly = async ({
  integration,
  secrets,
-  accessToken
+  accessToken,
+  appendices
 }: {
  integration: IIntegration;
  secrets: Record<string, { value: string; comment?: string }>;
  accessToken: string;
+  appendices?: { prefix: string, suffix: string };
 }) => {
-  const getSecretsRes = (
+  let getSecretsRes = (
    await standardRequest.get(`${INTEGRATION_CHECKLY_API_URL}/v1/variables`, {
      headers: {
        Authorization: `Bearer ${accessToken}`,
@@ -2096,6 +2113,15 @@ const syncSecretsCheckly = async ({
    {}
  );

+  getSecretsRes = Object.keys(getSecretsRes).reduce((result: {
+    [key: string]: string;
+  }, key) => {
+    if ((appendices?.prefix !== undefined ? key.startsWith(appendices?.prefix) : true) && (appendices?.suffix !== undefined ? key.endsWith(appendices?.suffix) : true)) {
+      result[key] = getSecretsRes[key];
+    }
+    return result;
+  }, {});
+
  // add secrets
  for await (const key of Object.keys(secrets)) {
    if (!(key in getSecretsRes)) {
--- a/backend/src/queues/integrations/syncSecretsToThirdPartyServices.ts
+++ b/backend/src/queues/integrations/syncSecretsToThirdPartyServices.ts
@@ -60,7 +60,8 @@ syncSecretsToThirdPartyServices.process(async (job: Job) => {
      integrationAuth,
      secrets: Object.keys(suffixedSecrets).length !== 0 ? suffixedSecrets : secrets,
      accessId: access.accessId === undefined ? null : access.accessId,
-      accessToken: access.accessToken
+      accessToken: access.accessToken,
+      appendices: { prefix: integration.metadata?.secretPrefix || "", suffix: integration.metadata?.secretSuffix || "" }
    });
  }
 })
--- a/frontend/public/images/infisical-update-september-2023.png
+++ b/frontend/public/images/infisical-update-september-2023.png
--- a/frontend/src/components/v2/ContentLoader/ContentLoader.tsx
+++ b/frontend/src/components/v2/ContentLoader/ContentLoader.tsx
@@ -23,10 +23,8 @@ export const ContentLoader = ({ text, frequency = 2000 }: Props) => {
  }, []);

  return (
-    <div className="container mx-auto flex relative flex-col h-1/2 w-full items-center justify-center px-8 text-mineshaft-50 dark:[color-scheme:dark] space-y-8">
-      <div>
-        <img src="/images/loading/loading.gif" height={210} width={240} alt="loading animation" />
-      </div>
+    <div className="container mx-auto flex relative flex-col h-screen w-full items-center justify-center px-8 text-mineshaft-50 dark:[color-scheme:dark] space-y-8">
+      <img src="/images/loading/loading.gif" height={70} width={120} alt="loading animation" />
      {text && isTextArray && (
        <AnimatePresence exitBeforeEnter>
          <motion.div
@@ -40,7 +38,7 @@ export const ContentLoader = ({ text, frequency = 2000 }: Props) => {
          </motion.div>
        </AnimatePresence>
      )}
-      {text && !isTextArray && <div className="text-primary text-sm">{text}</div>}
+      {text && !isTextArray && <div className="text-primary text-xs">{text}</div>}
    </div>
  );
 };
--- a/frontend/src/components/v2/SecretInput/SecretInput.tsx
+++ b/frontend/src/components/v2/SecretInput/SecretInput.tsx
@@ -22,7 +22,7 @@ const sanitizeConf = {

 const syntaxHighlight = (content?: string | null, isVisible?: boolean) => {
  if (content === "") return "EMPTY";
-  if (!content) return "missing";
+  if (!content) return "EMPTY";
  if (!isVisible) return replaceContentWithDot(content);

  const sanitizedContent = sanitizeHtml(
--- a/frontend/src/layouts/AppLayout/AppLayout.tsx
+++ b/frontend/src/layouts/AppLayout/AppLayout.tsx
@@ -10,6 +10,7 @@ import crypto from "crypto";
 import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
+import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { faGithub, faSlack } from "@fortawesome/free-brands-svg-icons";
@@ -67,9 +68,10 @@ import {
  useCreateWorkspace,
  useGetOrgTrialUrl,
  useGetSecretApprovalRequestCount,
+  useGetUserAction,
  useLogoutUser,
-  useUploadWsKey
-} from "@app/hooks/api";
+  useRegisterUserAction,
+  useUploadWsKey} from "@app/hooks/api";

 interface LayoutProps {
  children: React.ReactNode;
@@ -117,7 +119,8 @@ export const AppLayout = ({ children }: LayoutProps) => {
  const { user } = useUser();
  const { subscription } = useSubscription();
  const workspaceId = currentWorkspace?._id || "";
-  // const [ isLearningNoteOpen, setIsLearningNoteOpen ] = useState(true);
+  const { data: updateClosed } = useGetUserAction("september_update_closed");
+  
  const { data: secretApprovalReqCount } = useGetSecretApprovalRequestCount({ workspaceId });

  const isAddingProjectsAllowed = subscription?.workspaceLimit
@@ -144,6 +147,12 @@ export const AppLayout = ({ children }: LayoutProps) => {

  const { t } = useTranslation();

+  const registerUserAction = useRegisterUserAction();
+
+  const closeUpdate = async () => {
+    await registerUserAction.mutateAsync("september_update_closed");
+  }
+
  const logout = useLogoutUser();
  const logOutUser = async () => {
    try {
@@ -479,9 +488,9 @@ export const AppLayout = ({ children }: LayoutProps) => {
                            }
                            icon="system-outline-189-domain-verification"
                          >
-                            Secret approval
+                            Secret approvals
                            {Boolean(secretApprovalReqCount?.open) && (
-                              <span className="text-xs p-0.5 rounded ml-2 bg-primary text-black">
+                              <span className="text-xs font-semibold py-0.5 px-1 rounded ml-2 bg-primary-600 border border-primary-400 text-black">
                                {secretApprovalReqCount?.open}
                              </span>
                            )}
@@ -537,19 +546,6 @@ export const AppLayout = ({ children }: LayoutProps) => {
                          </MenuItem>
                        </a>
                      </Link>
-                      {/* {workspaces.map(project => <Link key={project._id} href={`/project/${project?._id}/secrets/overview`} passHref>
-                        <a>
-                          <SubMenuItem
-                            isSelected={false}
-                            icon="system-outline-44-folder"
-                          >
-                            {project.name}
-                          </SubMenuItem>
-                        </a>
-                        <div className="pl-8 text-mineshaft-300 text-sm py-1 cursor-default hover:text-mineshaft-100">
-                          <FontAwesomeIcon icon={faFolder} className="text-xxs pr-0.5"/> {project.name} <FontAwesomeIcon icon={faArrowRight} className="text-xs pl-0.5"/>
-                        </div>
-                      </Link>)} */}
                      <Link href={`/org/${currentOrg?._id}/members`} passHref>
                        <a>
                          <MenuItem
@@ -601,26 +597,26 @@ export const AppLayout = ({ children }: LayoutProps) => {
                    : "mb-4"
                } flex w-full cursor-default flex-col items-center px-3 text-sm text-mineshaft-400`}
              >
-                {/*   <div className={`${isLearningNoteOpen ? "block" : "hidden"} z-0 absolute h-60 w-[9.9rem] ${router.asPath.includes("org") ? "bottom-[8.4rem]" : "bottom-[5.4rem]"} bg-mineshaft-900 border border-mineshaft-600 mb-4 rounded-md opacity-30`}/>
+                {/* <div className={`${isLearningNoteOpen ? "block" : "hidden"} z-0 absolute h-60 w-[9.9rem] ${router.asPath.includes("org") ? "bottom-[8.4rem]" : "bottom-[5.4rem]"} bg-mineshaft-900 border border-mineshaft-600 mb-4 rounded-md opacity-30`}/>
                <div className={`${isLearningNoteOpen ? "block" : "hidden"} z-0 absolute h-60 w-[10.7rem] ${router.asPath.includes("org") ? "bottom-[8.15rem]" : "bottom-[5.15rem]"} bg-mineshaft-900 border border-mineshaft-600 mb-4 rounded-md opacity-50`}/>
                <div className={`${isLearningNoteOpen ? "block" : "hidden"} z-0 absolute h-60 w-[11.5rem] ${router.asPath.includes("org") ? "bottom-[7.9rem]" : "bottom-[4.9rem]"} bg-mineshaft-900 border border-mineshaft-600 mb-4 rounded-md opacity-70`}/>
-                <div className={`${isLearningNoteOpen ? "block" : "hidden"} z-0 absolute h-60 w-[12.3rem] ${router.asPath.includes("org") ? "bottom-[7.65rem]" : "bottom-[4.65rem]"} bg-mineshaft-900 border border-mineshaft-600 mb-4 rounded-md opacity-90`}/>
-                <div className={`${isLearningNoteOpen ? "block" : "hidden"} relative z-10 h-60 w-52 bg-mineshaft-900 border border-mineshaft-600 mb-6 rounded-md flex flex-col items-center justify-start px-3`}>
-                  <div className="w-full mt-2 text-md text-mineshaft-100 font-semibold">Kubernetes Operator</div>
-                  <div className="w-full mt-1 text-sm text-mineshaft-300 font-normal leading-[1.2rem] mb-1">Integrate Infisical into your Kubernetes infrastructure</div>
-                  <div className="h-[6.8rem] w-full bg-mineshaft-200 rounded-md mt-2 rounded-md border border-mineshaft-700"> 
-                    <Image src="/images/kubernetes-asset.png" height={319} width={539} alt="kubernetes image" className="rounded-sm" />
+                <div className={`${isLearningNoteOpen ? "block" : "hidden"} z-0 absolute h-60 w-[12.3rem] ${router.asPath.includes("org") ? "bottom-[7.65rem]" : "bottom-[4.65rem]"} bg-mineshaft-900 border border-mineshaft-600 mb-4 rounded-md opacity-90`}/> */}
+                <div className={`${!updateClosed ? "block" : "hidden"} relative z-10 h-64 w-52 bg-mineshaft-900 border border-mineshaft-600 mb-6 rounded-md flex flex-col items-center justify-start px-3`}>
+                  <div className="w-full mt-2 text-md text-mineshaft-100 font-semibold">Infisical September update</div>
+                  <div className="w-full mt-1 text-sm text-mineshaft-300 font-normal leading-[1.2rem] mb-1">Improved RBAC, new integrations, dashboard remake, and more!</div>
+                  <div className="h-[6.77rem] w-full rounded-md mt-2 border border-mineshaft-700"> 
+                    <Image src="/images/infisical-update-september-2023.png" height={319} width={539} alt="kubernetes image" className="rounded-sm" />
                  </div>
                  <div className="w-full flex justify-between items-center mt-3 px-0.5">
                    <button
                      type="button"
-                      onClick={() => setIsLearningNoteOpen(false)}
+                      onClick={() => closeUpdate()}
                      className="text-mineshaft-400 hover:text-mineshaft-100 duration-200"
                    >
                      Close
                    </button>
                    <a
-                      href="https://infisical.com/docs/documentation/getting-started/kubernetes"
+                      href="https://infisical.com/blog/infisical-update-september-2023"
                      target="_blank"
                      rel="noopener noreferrer"
                      className="text-sm text-mineshaft-400 font-normal leading-[1.2rem] hover:text-mineshaft-100 duration-200"
@@ -628,7 +624,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
                      Learn More <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="text-xs pl-0.5"/>
                    </a>
                  </div>
-                </div> */}
+                </div>
                {router.asPath.includes("org") && (
                  <div
                    onKeyDown={() => null}
--- a/frontend/src/pages/integrations/github/create.tsx
+++ b/frontend/src/pages/integrations/github/create.tsx
@@ -3,8 +3,9 @@ import Head from "next/head";
 import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { faArrowUpRightFromSquare, faBookOpen, faBugs, faCircleInfo } from "@fortawesome/free-solid-svg-icons";
+import { faAngleDown, faArrowUpRightFromSquare, faBookOpen, faBugs, faCheckCircle, faCircleInfo } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { motion } from "framer-motion";
 import queryString from "query-string";

 import {
@@ -15,10 +16,18 @@ import {
  Button,
  Card,
  CardTitle,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
  FormControl,
  Input,
  Select,
-  SelectItem
+  SelectItem,
+  Tab,
+  TabList,
+  TabPanel,
+  Tabs
 } from "../../../components/v2";
 import {
  useGetIntegrationAuthApps,
@@ -26,6 +35,11 @@ import {
 } from "../../../hooks/api/integrationAuth";
 import { useGetWorkspaceById } from "../../../hooks/api/workspace";

+enum TabSections {
+  Connection = "connection",
+  Options = "options"
+}
+
 export default function GitHubCreateIntegrationPage() {
  const router = useRouter();
  const { mutateAsync } = useCreateIntegration();
@@ -40,7 +54,8 @@ export default function GitHubCreateIntegrationPage() {

  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState("");
  const [secretPath, setSecretPath] = useState("/");
-  const [targetAppId, setTargetAppId] = useState("");
+  const [targetAppIds, setTargetAppIds] = useState<string[]>([]);
+  const [secretSuffix, setSecretSuffix] = useState("");

  const [isLoading, setIsLoading] = useState(false);

@@ -53,9 +68,9 @@ export default function GitHubCreateIntegrationPage() {
  useEffect(() => {
    if (integrationAuthApps) {
      if (integrationAuthApps.length > 0) {
-        setTargetAppId(integrationAuthApps[0].appId as string);
+        setTargetAppIds([String(integrationAuthApps[0].appId)]);
      } else {
-        setTargetAppId("none");
+        setTargetAppIds(["none"]);
      }
    }
  }, [integrationAuthApps]);
@@ -66,20 +81,27 @@ export default function GitHubCreateIntegrationPage() {

      if (!integrationAuth?._id) return;

-      const targetApp = integrationAuthApps?.find(
-        (integrationAuthApp) => integrationAuthApp.appId === targetAppId
+      const targetApps = integrationAuthApps?.filter(
+        (integrationAuthApp) => targetAppIds.includes(String(integrationAuthApp.appId))
      );

-      if (!targetApp || !targetApp.owner) return;
+      if (!targetApps) return;

-      await mutateAsync({
-        integrationAuthId: integrationAuth?._id,
-        isActive: true,
-        app: targetApp.name,
-        sourceEnvironment: selectedSourceEnvironment,
-        owner: targetApp.owner,
-        secretPath
-      });
+      await Promise.all(
+        targetApps.map(async (targetApp) => {
+          await mutateAsync({
+            integrationAuthId: integrationAuth?._id,
+            isActive: true,
+            app: targetApp.name,
+            sourceEnvironment: selectedSourceEnvironment,
+            owner: targetApp.owner,
+            secretPath,
+            metadata: {
+              secretSuffix
+            }
+          })
+        })
+      );

      setIsLoading(false);
      router.push(`/integrations/${localStorage.getItem("projectData.id")}`);
@@ -92,7 +114,7 @@ export default function GitHubCreateIntegrationPage() {
    workspace &&
    selectedSourceEnvironment &&
    integrationAuthApps &&
-    targetAppId ? (
+    targetAppIds ? (
    <div className="flex flex-col h-full w-full items-center justify-center">
      <Head>
        <title>Set Up GitHub Integration</title>
@@ -124,59 +146,109 @@ export default function GitHubCreateIntegrationPage() {
            </Link>
          </div>
        </CardTitle>
-        <FormControl label="Project Environment" className="px-6">
-          <Select
-            value={selectedSourceEnvironment}
-            onValueChange={(val) => setSelectedSourceEnvironment(val)}
-            className="w-full border border-mineshaft-500"
-          >
-            {workspace?.environments.map((sourceEnvironment) => (
-              <SelectItem
-                value={sourceEnvironment.slug}
-                key={`azure-key-vault-environment-${sourceEnvironment.slug}`}
-              >
-                {sourceEnvironment.name}
-              </SelectItem>
-            ))}
-          </Select>
-        </FormControl>
-        <FormControl label="Secrets Path" className="px-6">
-          <Input
-            value={secretPath}
-            onChange={(evt) => setSecretPath(evt.target.value)}
-            placeholder="Provide a path, default is /"
-          />
-        </FormControl>
-        <FormControl label="GitHub Repo" className="px-6">
-          <Select
-            value={targetAppId}
-            onValueChange={(val) => setTargetAppId(val)}
-            className="w-full border border-mineshaft-500"
-            isDisabled={integrationAuthApps.length === 0}
-          >
-            {integrationAuthApps.length > 0 ? (
-              integrationAuthApps.map((integrationAuthApp) => (
-                <SelectItem
-                  value={integrationAuthApp.appId as string}
-                  key={`github-repo-${integrationAuthApp.appId}`}
+        <Tabs defaultValue={TabSections.Connection} className="px-6">
+          <TabList>
+            <div className="flex flex-row border-b border-mineshaft-600 w-full">
+              <Tab value={TabSections.Connection}>Connection</Tab>
+              <Tab value={TabSections.Options}>Options</Tab>
+            </div>
+          </TabList>
+          <TabPanel value={TabSections.Connection}>
+            <motion.div
+              key="panel-1"
+              transition={{ duration: 0.15 }}
+              initial={{ opacity: 0, translateX: 30 }}
+              animate={{ opacity: 1, translateX: 0 }}
+              exit={{ opacity: 0, translateX: 30 }}
+            >
+              <FormControl label="Project Environment">
+                <Select
+                  value={selectedSourceEnvironment}
+                  onValueChange={(val) => setSelectedSourceEnvironment(val)}
+                  className="w-full border border-mineshaft-500"
                >
-                  {integrationAuthApp.name}
-                </SelectItem>
-              ))
-            ) : (
-              <SelectItem value="none" key="target-app-none">
-                No repositories found
-              </SelectItem>
-            )}
-          </Select>
-        </FormControl>
+                  {workspace?.environments.map((sourceEnvironment) => (
+                    <SelectItem
+                      value={sourceEnvironment.slug}
+                      key={`azure-key-vault-environment-${sourceEnvironment.slug}`}
+                    >
+                      {sourceEnvironment.name}
+                    </SelectItem>
+                  ))}
+                </Select>
+              </FormControl>
+              <FormControl label="Secrets Path">
+                <Input
+                  value={secretPath}
+                  onChange={(evt) => setSecretPath(evt.target.value)}
+                  placeholder="Provide a path, default is /"
+                />
+              </FormControl>
+              <FormControl label="GitHub Repo">
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    {(integrationAuthApps.length > 0) ? <div className="w-full cursor-pointer border border-mineshaft-600 inline-flex items-center justify-between rounded-md bg-mineshaft-900 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none data-[placeholder]:text-mineshaft-200">
+                        {targetAppIds.length === 1 ? integrationAuthApps?.find(
+                          (integrationAuthApp) => targetAppIds[0] === String(integrationAuthApp.appId)
+                        )?.name : `${targetAppIds.length} repositories selected`}
+                        <FontAwesomeIcon icon={faAngleDown} className="text-xs" />
+                      </div> : <div className="w-full cursor-default border border-mineshaft-600 inline-flex items-center justify-between rounded-md bg-mineshaft-900 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none data-[placeholder]:text-mineshaft-200">
+                        No repositories found
+                      </div>}
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="start" className="z-[100] max-h-80 overflow-y-scroll thin-scrollbar">
+                    {(integrationAuthApps.length > 0) ? (
+                      integrationAuthApps.map((integrationAuthApp) => {
+                        const isSelected = targetAppIds.includes(String(integrationAuthApp.appId));
+
+                        return (
+                          <DropdownMenuItem
+                            onClick={() => {
+                              if (targetAppIds.includes(String(integrationAuthApp.appId))) {
+                                setTargetAppIds(targetAppIds.filter((appId) => appId !== String(integrationAuthApp.appId)));
+                              } else {
+                                setTargetAppIds([...targetAppIds, String(integrationAuthApp.appId)]);
+                              }
+                            }}
+                            key={integrationAuthApp.appId}
+                            icon={isSelected ? <FontAwesomeIcon icon={faCheckCircle} className="text-primary pr-0.5" /> : <div className="pl-[1.01rem]"/>}
+                            iconPos="left"
+                            className="w-[28.4rem] text-sm"
+                          >
+                            {integrationAuthApp.name}
+                          </DropdownMenuItem> 
+                        )})
+                    ) : <div/>}
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </FormControl>
+            </motion.div>
+          </TabPanel>
+          <TabPanel value={TabSections.Options}>
+            <motion.div
+              key="panel-1"
+              transition={{ duration: 0.15 }}
+              initial={{ opacity: 0, translateX: -30 }}
+              animate={{ opacity: 1, translateX: 0 }}
+              exit={{ opacity: 0, translateX: 30 }}
+            >
+              <FormControl label="Append Secret Names with..." className="pb-[9.75rem]">
+                <Input
+                  value={secretSuffix}
+                  onChange={(evt) => setSecretSuffix(evt.target.value)}
+                  placeholder="Provide a suffix for secret names, default is no suffix"
+                />
+              </FormControl>
+            </motion.div>
+          </TabPanel>
+        </Tabs>
        <Button
          onClick={handleButtonClick}
          color="mineshaft"
          variant="outline_bg"
-          className="mt-2 mb-6 ml-auto mr-6"
+          className="mb-6 ml-auto mr-6"
          isLoading={isLoading}
-          isDisabled={integrationAuthApps.length === 0}
+          isDisabled={integrationAuthApps.length === 0 || targetAppIds.length === 0}
        >
          Create Integration
        </Button>
--- a/frontend/src/pages/login/index.tsx
+++ b/frontend/src/pages/login/index.tsx
@@ -9,7 +9,7 @@ export default function LoginPage() {
  const { t } = useTranslation();

  return (
-    <div className="flex min-h-screen flex-col justify-center bg-gradient-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6 pb-28 ">
+    <div className="flex min-h-screen max-h-screen overflow-y-auto flex-col justify-center bg-gradient-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6">
      <Head>
        <title>{t("common.head-title", { title: t("login.title") })}</title>
        <link rel="icon" href="/infisical.ico" />
@@ -23,6 +23,7 @@ export default function LoginPage() {
        </div>
      </Link>
      <Login />
+      <div className="pb-28"/>
    </div>
  );
 }
--- a/frontend/src/pages/signup/index.tsx
+++ b/frontend/src/pages/signup/index.tsx
@@ -145,7 +145,7 @@ export default function SignUp() {
  };

  return (
-    <div className="flex min-h-screen flex-col justify-center bg-gradient-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6 pb-28 ">
+    <div className="flex min-h-screen max-h-screen overflow-y-auto flex-col justify-center bg-gradient-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6 pb-28 ">
      <Head>
        <title>{t("common.head-title", { title: t("signup.title") })}</title>
        <link rel="icon" href="/infisical.ico" />
--- a/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx
+++ b/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx
@@ -139,7 +139,7 @@ export const IntegrationsSection = ({
                    </div>
                  </div>
                )}
-                {(integration.integration === "checkly") && (
+                {((integration.integration === "checkly") || (integration.integration === "github")) && (
                  <div className="ml-2 flex flex-col">
                    <FormLabel label="Secret Suffix" />
                    <div className="rounded-md border border-mineshaft-700 bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">
--- a/frontend/src/views/Login/components/InitialStep/InitialStep.tsx
+++ b/frontend/src/views/Login/components/InitialStep/InitialStep.tsx
@@ -113,7 +113,7 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
      <h1 className="mb-8 bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
        Login to Infisical
      </h1>
-      <div className="mt-4 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
+      <div className="mt-2 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
        <Button
          colorSchema="primary"
          variant="outline_bg"
@@ -126,12 +126,12 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
            window.close();
          }}
          leftIcon={<FontAwesomeIcon icon={faGoogle} className="mr-2" />}
-          className="mx-0 h-11 w-full"
+          className="mx-0 h-10 w-full"
        >
          {t("login.continue-with-google")}
        </Button>
      </div>
-      <div className="mt-4 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
+      <div className="mt-2 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
        <Button
          colorSchema="primary"
          variant="outline_bg"
@@ -145,12 +145,12 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
            window.close();
          }}
          leftIcon={<FontAwesomeIcon icon={faGithub} className="mr-2" />}
-          className="mx-0 h-11 w-full"
+          className="mx-0 h-10 w-full"
        >
          Continue with GitHub
        </Button>
      </div>
-      <div className="mt-4 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
+      <div className="mt-2 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
        <Button
          colorSchema="primary"
          variant="outline_bg"
@@ -164,12 +164,12 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
            window.close();
          }}
          leftIcon={<FontAwesomeIcon icon={faGitlab} className="mr-2" />}
-          className="mx-0 h-11 w-full"
+          className="mx-0 h-10 w-full"
        >
          Continue with GitLab
        </Button>
      </div>
-      <div className="mt-4 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
+      <div className="mt-2 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
        <Button
          colorSchema="primary"
          variant="outline_bg"
@@ -177,7 +177,7 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
            setStep(2);
          }}
          leftIcon={<FontAwesomeIcon icon={faLock} className="mr-2" />}
-          className="mx-0 h-11 w-full"
+          className="mx-0 h-10 w-full"
        >
          Continue with SSO
        </Button>
@@ -195,10 +195,10 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
          placeholder="Enter your email..."
          isRequired
          autoComplete="username"
-          className="h-11"
+          className="h-10"
        />
      </div>
-      <div className="mt-4 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
+      <div className="mt-2 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
        <Input
          value={password}
          onChange={(e) => setPassword(e.target.value)}
@@ -207,15 +207,15 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
          isRequired
          autoComplete="current-password"
          id="current-password"
-          className="select:-webkit-autofill:focus h-11"
+          className="select:-webkit-autofill:focus h-10"
        />
      </div>
-      <div className="mt-5 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
+      <div className="mt-3 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
        <Button
          type="submit"
          size="sm"
          isFullWidth
-          className="h-11"
+          className="h-10"
          colorSchema="primary"
          variant="solid"
          isLoading={isLoading}
@@ -227,10 +227,9 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
      {!isLoading && loginError && <Error text={t("login.error-login") ?? ""} />}
      {!serverDetails?.inviteOnlySignup ? (
        <div className="mt-6 flex flex-row text-sm text-bunker-400">
-          <span className="mr-1">Don&apos;t have an acount yet?</span>
          <Link href="/signup">
            <span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
-              {t("login.create-account")}
+              Don&apos;t have an acount yet? {t("login.create-account")}
            </span>
          </Link>
        </div>
@@ -238,10 +237,9 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
        <div />
      )}
      <div className="flex flex-row text-sm text-bunker-400">
-        <span className="mr-1">Forgot password?</span>
        <Link href="/verify-email">
          <span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
-            Recover your account
+            Forgot password? Recover your account
          </span>
        </Link>
      </div>
--- a/frontend/src/views/SecretApprovalPage/SecretApprovalPage.tsx
+++ b/frontend/src/views/SecretApprovalPage/SecretApprovalPage.tsx
@@ -14,7 +14,7 @@ export const SecretApprovalPage = () => {
  const workspaceId = currentWorkspace?._id || "";

  return (
-    <div className="container mx-auto bg-bunker-800 text-white w-full h-full max-w-7xl">
+    <div className="container mx-auto bg-bunker-800 text-white w-full h-full max-w-7xl px-6">
      <div className="my-6">
        <p className="text-3xl font-semibold text-gray-200">Secret Approvals</p>
      </div>
--- a/frontend/src/views/SecretMainPage/SecretMainPage.tsx
+++ b/frontend/src/views/SecretMainPage/SecretMainPage.tsx
@@ -39,9 +39,9 @@ import { StoreProvider } from "./SecretMainPage.store";
 import { Filter, GroupBy, SortDir } from "./SecretMainPage.types";

 const LOADER_TEXT = [
-  "Retriving your encrypted secrets",
-  "Fetching folders",
-  "Getting secret import links"
+  "Retrieving your encrypted secrets...",
+  "Fetching folders...",
+  "Getting secret import links..."
 ];

 export const SecretMainPage = () => {
--- a/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
+++ b/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
@@ -325,7 +325,7 @@ export const SecretOverviewPage = () => {
                  className="bg-mineshaft-700"
                />
              )}
-              {isTableEmpty && (
+              {isTableEmpty && !isTableLoading && (
                <Tr>
                  <Td colSpan={userAvailableEnvs.length + 1}>
                    <EmptyState title="Let's add some secrets" icon={faFolderBlank} iconSize="3x">
@@ -335,7 +335,7 @@ export const SecretOverviewPage = () => {
                          query: { id: workspaceId, env: userAvailableEnvs?.[0]?.slug }
                        }}
                      >
-                        <Button className="mt-2 p-1">Go to {userAvailableEnvs?.[0]?.name}</Button>
+                        <Button className="mt-4" variant="outline_bg" colorSchema="primary" size="md">Go to {userAvailableEnvs?.[0]?.name}</Button>
                      </Link>
                    </EmptyState>
                  </Td>
--- a/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/PreviewSection.tsx
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/PreviewSection.tsx
@@ -1,3 +1,7 @@
+import Link from "next/link";
+import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
 import { OrgPermissionCan } from "@app/components/permissions";
 import { Button } from "@app/components/v2";
 import {
@@ -74,24 +78,36 @@ export const PreviewSection = () => {
        subscription?.slug !== "enterprise" &&
        subscription?.slug !== "pro" &&
        subscription?.slug !== "pro-annual" && (
-          <div className="p-4 rounded-lg flex-1 border border-mineshaft-600 mb-6 flex items-center bg-mineshaft-600">
-            <div className="flex-1">
-              <h2 className="text-xl font-semibold text-mineshaft-50">Become Infisical</h2>
-              <p className="text-gray-400 mt-4">
-                Unlimited members, projects, RBAC, smart alerts, and so much more
-              </p>
+          <div className="flex flex-row space-x-6">
+            <div className="p-4 rounded-lg flex-1 border border-primary/40 mb-6 flex items-center bg-primary/10">
+              <div className="flex-1">
+                <h2 className="text-xl font-medium text-mineshaft-100">Unleash the full power of <span className="text-transparent font-semibold bg-clip-text bg-gradient-to-r from-primary-500 to-yellow">Infisical</span></h2>
+                <p className="text-gray-400 mt-4">
+                  Get unlimited members, projects, RBAC, smart alerts, and so much more.
+                </p>
+              </div>
+              <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Billing}>
+                {(isAllowed) => (
+                  <Button
+                    onClick={() => handleUpgradeBtnClick()}
+                    color="mineshaft"
+                    isDisabled={!isAllowed}
+                  >
+                    {!subscription.has_used_trial ? "Start Pro Free Trial" : "Upgrade Plan"}
+                  </Button>
+                )}
+              </OrgPermissionCan>
+            </div>
+            <div className="flex flex-col max-w-[12rem] w-full items-start border border-mineshaft-600 mb-6 flex items-center bg-mineshaft-800 p-4 rounded-lg">
+              <div className="mb-4 flex justify-center w-full font-semibold text-mineshaft-200">Want to learn more? </div>
+              <div className="flex justify-center w-full">
+                <Link href="https://infisical.com/schedule-demo">
+                  <span className="rounded-full px-4 py-2 bg-mineshaft-600 border border-mineshaft-500 hover:bg-primary/10 hover:border-primary/40 duration-200 cursor-pointer">
+                    Book a demo <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="text-xs mb-[0.06rem] ml-1"/>
+                  </span>
+                </Link> 
+              </div>
            </div>
-            <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Billing}>
-              {(isAllowed) => (
-                <Button
-                  onClick={() => handleUpgradeBtnClick()}
-                  color="mineshaft"
-                  isDisabled={!isAllowed}
-                >
-                  {!subscription.has_used_trial ? "Start Pro Free Trial" : "Upgrade Plan"}
-                </Button>
-              )}
-            </OrgPermissionCan>
          </div>
        )}
      {!isLoading && subscription && data && (