Merge branch 'main' into feat/pg-dynamic-secret

frontend/src/components/v2/SecretInput/SecretInput.tsx

@@ -21,13 +21,13 @@ const syntaxHighlight = (content?: string | null, isVisible?: boolean, isImport?
   if (!isVisible) return replaceContentWithDot(content);
 
   let skipNext = false;
-  const formatedContent = content.split(REGEX).flatMap((el, i) => {
+  const formattedContent = content.split(REGEX).flatMap((el, i) => {
     const isInterpolationSyntax = el.startsWith("${") && el.endsWith("}");
     if (isInterpolationSyntax) {
       skipNext = true;
       return (
         <span className="ph-no-capture text-yellow" key={`secret-value-${i + 1}`}>
-          &#36;&#123;<span className="ph-no-capture text-yello-200/80">{el.slice(2, -1)}</span>
+          &#36;&#123;<span className="ph-no-capture text-yellow-200/80">{el.slice(2, -1)}</span>
           &#125;
         </span>
       );
@@ -41,7 +41,7 @@ const syntaxHighlight = (content?: string | null, isVisible?: boolean, isImport?
 
   // akhilmhdh: Dont remove this br. I am still clueless how this works but weirdly enough
   // when break is added a line break works properly
-  return formatedContent.concat(<br />);
+  return formattedContent.concat(<br />);
 };
 
 type Props = TextareaHTMLAttributes<HTMLTextAreaElement> & {

frontend/src/components/v2/Select/Select.tsx

@@ -41,7 +41,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
           ref={ref}
           className={twMerge(
             `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`,
+            bg-mineshaft-900 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none data-[placeholder]:text-mineshaft-200 focus:bg-mineshaft-700/80`,
             className
           )}
         >
@@ -106,7 +106,7 @@ export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
         className={twMerge(
           `relative mb-0.5 flex
           cursor-pointer select-none items-center rounded-md py-2 pl-10 pr-4 text-sm
-          outline-none transition-all hover:bg-mineshaft-500`,
+          outline-none transition-all hover:bg-mineshaft-500 data-[highlighted]:bg-mineshaft-700/80`,
           isSelected && "bg-primary",
           isDisabled &&
             "cursor-not-allowed text-gray-600 hover:bg-transparent hover:text-mineshaft-600",

frontend/src/components/v2/UpgradeProjectAlert/UpgradeProjectAlert.tsx

@@ -9,16 +9,22 @@ import { useNotificationContext } from "@app/components/context/Notifications/No
 import { useProjectPermission } from "@app/context";
 import { useGetUpgradeProjectStatus, useUpgradeProject } from "@app/hooks/api";
 import { Workspace } from "@app/hooks/api/types";
+import { workspaceKeys } from "@app/hooks/api/workspace/queries";
 import { ProjectVersion } from "@app/hooks/api/workspace/types";
+import { queryClient } from "@app/reactQuery";
 
 import { Button } from "../Button";
 import { Tooltip } from "../Tooltip";
 
 export type UpgradeProjectAlertProps = {
   project: Workspace;
+  transparent?: boolean;
 };
 
-export const UpgradeProjectAlert = ({ project }: UpgradeProjectAlertProps): JSX.Element | null => {
+export const UpgradeProjectAlert = ({
+  project,
+  transparent
+}: UpgradeProjectAlertProps): JSX.Element | null => {
   const { createNotification } = useNotificationContext();
   const router = useRouter();
   const { membership } = useProjectPermission();
@@ -48,6 +54,7 @@ export const UpgradeProjectAlert = ({ project }: UpgradeProjectAlertProps): JSX.
       }
 
       if (currentStatus !== null && data?.status === null) {
+        queryClient.invalidateQueries(workspaceKeys.getAllUserWorkspace);
         router.reload();
       }
     }
@@ -87,10 +94,25 @@ export const UpgradeProjectAlert = ({ project }: UpgradeProjectAlertProps): JSX.
 
   if (project.version !== ProjectVersion.V1) return null;
 
+  if (transparent) {
+    return (
+      <Button
+        colorSchema="primary"
+        variant="solid"
+        size="md"
+        isLoading={isLoading}
+        isDisabled={isLoading || membership.role !== "admin"}
+        onClick={onUpgradeProject}
+      >
+        Upgrade
+      </Button>
+    );
+  }
+
   return (
     <div
       className={twMerge(
-        "mt-4 flex w-full flex-row items-center rounded-md border border-primary-600/70 bg-primary/[.07] p-4 text-base text-white",
+        "mt-4 flex w-full flex-row items-center rounded-md border border-primary-600/70  bg-primary/[.07] p-4 text-base text-white",
         membership.role !== "admin" && "opacity-80"
       )}
     >