Merge pull request #1754 from nhost/changeset-release/main

chore: update versions

dashboard/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @nhost/dashboard
 
+## 0.13.6
+
+### Patch Changes
+
+- 253dd235: using new mutation to create projects + refactor Create Project page.
+
+## 0.13.5
+
+### Patch Changes
+
+- @nhost/react-apollo@5.0.12
+- @nhost/nextjs@1.13.17
+
+## 0.13.4
+
+### Patch Changes
+
+- b48bc034: fix(dashboard): disable new users
+- 798e591b: fix(dashboard): show correct date in data grid
+
 ## 0.13.3
 
 ### Patch Changes

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/dashboard",
-  "version": "0.13.3",
+  "version": "0.13.6",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",

dashboard/src/components/applications/ApplicationInfo.tsx

@@ -9,28 +9,39 @@ import Link from '@/ui/v2/Link';
 import Text from '@/ui/v2/Text';
 import { copy } from '@/utils/copy';
 import { getApplicationStatusString } from '@/utils/helpers';
-import { triggerToast } from '@/utils/toast';
+import getServerError from '@/utils/settings/getServerError';
 import { formatDistance } from 'date-fns';
 import { useRouter } from 'next/router';
+import { toast } from 'react-hot-toast';
 
 export default function ApplicationInfo() {
   const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const [deleteApplication, { client }] = useDeleteApplicationMutation({
+  const [deleteApplication] = useDeleteApplicationMutation({
     refetchQueries: [GetOneUserDocument],
   });
   const router = useRouter();
 
   async function handleClickRemove() {
-    await deleteApplication({
-      variables: {
-        appId: currentApplication.id,
-      },
-    });
-    await router.push('/');
-    await client.refetchQueries({
-      include: ['getOneUser'],
-    });
-    triggerToast(`${currentApplication.name} deleted`);
+    try {
+      await toast.promise(
+        deleteApplication({
+          variables: {
+            appId: currentApplication.id,
+          },
+        }),
+        {
+          loading: 'Deleting project...',
+          success: 'The project has been deleted successfully.',
+          error: getServerError(
+            'An error occurred while deleting the project. Please try again.',
+          ),
+        },
+      );
+
+      await router.push('/');
+    } catch {
+      // Note: The toast will handle the error.
+    }
   }
 
   return (

dashboard/src/components/applications/ApplicationPaused.tsx

@@ -3,54 +3,81 @@ import { ChangePlanModal } from '@/components/applications/ChangePlanModal';
 import { StagingMetadata } from '@/components/applications/StagingMetadata';
 import { useDialog } from '@/components/common/DialogProvider';
 import Container from '@/components/layout/Container';
-import { useUpdateApplicationMutation } from '@/generated/graphql';
+import {
+  GetOneUserDocument,
+  useGetFreeAndActiveProjectsQuery,
+  useUnpauseApplicationMutation,
+} from '@/generated/graphql';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import { ApplicationStatus } from '@/types/application';
 import { Modal } from '@/ui';
+import { Alert } from '@/ui/Alert';
+import ActivityIndicator from '@/ui/v2/ActivityIndicator';
+import Box from '@/ui/v2/Box';
 import Button from '@/ui/v2/Button';
 import Text from '@/ui/v2/Text';
-import { discordAnnounce } from '@/utils/discordAnnounce';
-import { triggerToast } from '@/utils/toast';
-import { updateOwnCache } from '@/utils/updateOwnCache';
+import { MAX_FREE_PROJECTS } from '@/utils/CONSTANTS';
+import { getToastStyleProps } from '@/utils/settings/settingsConstants';
+import type { ApolloError } from '@apollo/client';
 import { useUserData } from '@nhost/nextjs';
 import Image from 'next/image';
 import { useState } from 'react';
+import { toast } from 'react-hot-toast';
 import { RemoveApplicationModal } from './RemoveApplicationModal';
 
 export default function ApplicationPaused() {
   const { openAlertDialog } = useDialog();
   const { currentWorkspace, currentApplication } =
     useCurrentWorkspaceAndApplication();
-  const [changingApplicationStateLoading, setChangingApplicationStateLoading] =
-    useState(false);
-  const [updateApplication, { client }] = useUpdateApplicationMutation();
-  const { id, email } = useUserData();
+  const { id } = useUserData();
   const isOwner = currentWorkspace.members.some(
     ({ userId, type }) => userId === id && type === 'owner',
   );
-  const isPro = currentApplication.plan.name === 'Pro';
   const [showDeletingModal, setShowDeletingModal] = useState(false);
+  const [unpauseApplication, { loading: changingApplicationStateLoading }] =
+    useUnpauseApplicationMutation({
+      refetchQueries: [GetOneUserDocument],
+    });
+
+  const { data, loading } = useGetFreeAndActiveProjectsQuery({
+    variables: { userId: id },
+    fetchPolicy: 'cache-and-network',
+  });
+
+  const numberOfFreeAndLiveProjects = data?.freeAndActiveProjects.length || 0;
+  const wakeUpDisabled = numberOfFreeAndLiveProjects >= MAX_FREE_PROJECTS;
 
   async function handleTriggerUnpausing() {
-    setChangingApplicationStateLoading(true);
     try {
-      await updateApplication({
-        variables: {
-          appId: currentApplication.id,
-          app: {
-            desiredState: ApplicationStatus.Live,
+      await toast.promise(
+        unpauseApplication({ variables: { appId: currentApplication.id } }),
+        {
+          loading: 'Starting the project...',
+          success: `The project has been started successfully.`,
+          error: (arg: ApolloError) => {
+            // we need to get the internal error message from the GraphQL error
+            const { internal } = arg.graphQLErrors[0]?.extensions || {};
+            const { message } = (internal as Record<string, any>)?.error || {};
+
+            // we use the default Apollo error message if we can't find the
+            // internal error message
+            return (
+              message ||
+              arg.message ||
+              'An error occurred while waking up the project. Please try again.'
+            );
           },
         },
-      });
-      await updateOwnCache(client);
-      discordAnnounce(
-        `App ${currentApplication.name} (${email}) set to awake.`,
+        getToastStyleProps(),
       );
-      triggerToast(`${currentApplication.name} set to awake.`);
-    } catch (e) {
-      triggerToast(`Error trying to awake ${currentApplication.name}`);
+    } catch {
+      // Note: The toast will handle the error.
     }
   }
+
+  if (loading) {
+    return <ActivityIndicator label="Loading user data..." delay={1000} />;
+  }
+
   return (
     <>
       <Modal
@@ -65,7 +92,7 @@ export default function ApplicationPaused() {
         />
       </Modal>
 
-      <Container className="mx-auto mt-20 grid max-w-sm grid-flow-row gap-2 text-center">
+      <Container className="mx-auto mt-20 grid max-w-lg grid-flow-row gap-4 text-center">
         <div className="mx-auto flex w-centImage flex-col text-center">
           <Image
             src="/assets/PausedApp.svg"
@@ -75,16 +102,18 @@ export default function ApplicationPaused() {
           />
         </div>
 
-        <Text variant="h3" component="h1" className="mt-4">
-          {currentApplication.name} is sleeping
-        </Text>
+        <Box className="grid grid-flow-row gap-1">
+          <Text variant="h3" component="h1">
+            {currentApplication.name} is sleeping
+          </Text>
 
-        <Text className="mt-1">
-          Projects on the free plan stop responding to API calls after 7 days of
-          no traffic.
-        </Text>
+          <Text>
+            Starter projects stop responding to API calls after 7 days of
+            inactivity. Upgrade to Pro to avoid autosleep.
+          </Text>
+        </Box>
 
-        {!isPro && (
+        <Box className="grid grid-flow-row gap-2">
           <Button
             className="mx-auto w-full max-w-[280px]"
             onClick={() => {
@@ -101,32 +130,41 @@ export default function ApplicationPaused() {
               });
             }}
           >
-            Upgrade to Pro to avoid autosleep
-          </Button>
-        )}
-
-        <div className="grid grid-flow-row gap-2">
-          <Button
-            variant="borderless"
-            className="mx-auto w-full max-w-[280px]"
-            loading={changingApplicationStateLoading}
-            disabled={changingApplicationStateLoading}
-            onClick={handleTriggerUnpausing}
-          >
-            Wake Up
+            Upgrade to Pro
           </Button>
 
-          {isOwner && (
+          <div className="grid grid-flow-row gap-2">
             <Button
-              color="error"
               variant="borderless"
               className="mx-auto w-full max-w-[280px]"
-              onClick={() => setShowDeletingModal(true)}
+              loading={changingApplicationStateLoading}
+              disabled={changingApplicationStateLoading || wakeUpDisabled}
+              onClick={handleTriggerUnpausing}
             >
-              Delete Project
+              Wake Up
             </Button>
-          )}
-        </div>
+
+            {wakeUpDisabled && (
+              <Alert severity="warning" className="mx-auto max-w-xs text-left">
+                Note: Only one free project can be active at any given time.
+                Please pause your active free project before unpausing{' '}
+                {currentApplication.name}.
+              </Alert>
+            )}
+
+            {isOwner && (
+              <Button
+                color="error"
+                variant="borderless"
+                className="mx-auto w-full max-w-[280px]"
+                onClick={() => setShowDeletingModal(true)}
+              >
+                Delete Project
+              </Button>
+            )}
+          </div>
+        </Box>
+
         <StagingMetadata>
           <ApplicationInfo />
         </StagingMetadata>

dashboard/src/components/applications/RemoveApplicationModal.tsx

@@ -6,7 +6,10 @@ import Divider from '@/ui/v2/Divider';
 import Text from '@/ui/v2/Text';
 import { discordAnnounce } from '@/utils/discordAnnounce';
 import { triggerToast } from '@/utils/toast';
-import { useDeleteApplicationMutation } from '@/utils/__generated__/graphql';
+import {
+  GetOneUserDocument,
+  useDeleteApplicationMutation,
+} from '@/utils/__generated__/graphql';
 import router from 'next/router';
 import { useState } from 'react';
 import { twMerge } from 'tailwind-merge';
@@ -42,7 +45,9 @@ export function RemoveApplicationModal({
   description,
   className,
 }: RemoveApplicationModalProps) {
-  const [deleteApplication, { client }] = useDeleteApplicationMutation();
+  const [deleteApplication] = useDeleteApplicationMutation({
+    refetchQueries: [GetOneUserDocument],
+  });
   const [loadingRemove, setLoadingRemove] = useState(false);
   const { currentApplication } = useCurrentWorkspaceAndApplication();
 
@@ -73,9 +78,6 @@ export function RemoveApplicationModal({
     }
     close();
     await router.push('/');
-    await client.refetchQueries({
-      include: ['getOneUser'],
-    });
     triggerToast(`${currentApplication.name} deleted`);
   }
 

dashboard/src/components/applications/RenderWorkspacesWithApps.tsx

@@ -111,9 +111,8 @@ export function RenderWorkspacesWithApps({
                             )}
 
                             <StateBadge
-                              status={checkStatusOfTheApplication(
-                                app.appStates,
-                              )}
+                              state={checkStatusOfTheApplication(app.appStates)}
+                              desiredState={app.desiredState}
                               title={getApplicationStatusString(
                                 checkStatusOfTheApplication(app.appStates),
                               )}

dashboard/src/components/applications/StagingMetadata.tsx

@@ -6,7 +6,7 @@ import type { PropsWithChildren } from 'react';
 export function StagingMetadata({ children }: PropsWithChildren<unknown>) {
   return (
     isDevOrStaging() && (
-      <div className="mt-10">
+      <div className="mx-auto mt-10 max-w-sm">
         <Box className="mx-auto flex flex-col rounded-md border p-5 text-center">
           <Status status={StatusEnum.Deploying}>Internal info</Status>
           {children}

dashboard/src/components/billing-payment-method/BillingPaymentMethodForm.tsx

@@ -76,7 +76,8 @@ function AddPaymentMethodForm({
 
       if (createPaymentMethodError) {
         throw new Error(
-          createPaymentMethodError.message || 'Unknown error occurred.',
+          createPaymentMethodError.message ||
+            'An unknown error occurred. Please try again.',
         );
       }
 
@@ -90,7 +91,10 @@ function AddPaymentMethodForm({
       );
 
       if (attachPaymentMethodError) {
-        throw Error((attachPaymentMethodError as any).response.data);
+        throw new Error(
+          (attachPaymentMethodError as any)?.response?.data ||
+            'An unknown error occurred. Please try again.',
+        );
       }
 
       // update workspace with new country code in database
@@ -151,7 +155,7 @@ function AddPaymentMethodForm({
   };
 
   return (
-    <Box className="w-modal2 px-6 pt-6 pb-6 text-left rounded-lg">
+    <Box className="w-modal2 rounded-lg px-6 pt-6 pb-6 text-left">
       <div className="flex flex-col">
         <form onSubmit={handleSubmit}>
           <Text className="text-center text-lg font-medium">
@@ -203,7 +207,7 @@ function AddPaymentMethodForm({
 
 type BillingPaymentMethodFormProps = {
   close: () => void;
-  onPaymentMethodAdded?: () => Promise<void>;
+  onPaymentMethodAdded?: (e?: any) => Promise<void>;
   workspaceId: string;
 };
 

dashboard/src/components/common/DataGridDateCell/DataGridDateCell.tsx

@@ -46,7 +46,7 @@ export default function DataGridDateCell<TData extends object>({
       : undefined;
 
   const { year, month, day, hour, minute, second } = getDateComponents(date, {
-    adjustTimezone: specificType === 'timetz' || specificType === 'timestamptz',
+    adjustTimezone: ['date', 'timetz', 'timestamptz'].includes(specificType),
   });
 
   const { inputRef, focusCell, isEditing, cancelEditCell } =

dashboard/src/components/settings/authentication/DisableNewUsersSettings/DisableNewUsersSettings.tsx

@@ -35,7 +35,7 @@ export default function DisableNewUsersSettings() {
   const form = useForm<DisableNewUsersFormValues>({
     reValidateMode: 'onSubmit',
     defaultValues: {
-      disabled: !!data?.config?.auth?.signUp?.enabled,
+      disabled: !data?.config?.auth?.signUp?.enabled,
     },
   });
 

dashboard/src/components/ui/StateBadge.tsx

@@ -5,7 +5,11 @@ export interface StateBadgeProps {
   /**
    * This is the current state of the application.
    */
-  status: ApplicationStatus;
+  state: ApplicationStatus;
+  /**
+   * This is the desired state of the application.
+   */
+  desiredState: ApplicationStatus;
   /**
    * The title to show on the application state badge.
    */
@@ -24,20 +28,28 @@ function getNormalizedTitle(title: string) {
   return title;
 }
 
-export default function StateBadge({ title, status }: StateBadgeProps) {
+export default function StateBadge({
+  title,
+  state,
+  desiredState,
+}: StateBadgeProps) {
+  if (
+    desiredState === ApplicationStatus.Paused &&
+    state === ApplicationStatus.Live
+  ) {
+    return <Chip size="small" color="default" label="Pausing" />;
+  }
+
   const normalizedTitle = getNormalizedTitle(title);
 
   if (
-    status === ApplicationStatus.Empty ||
-    status === ApplicationStatus.Unpausing
+    state === ApplicationStatus.Empty ||
+    state === ApplicationStatus.Unpausing
   ) {
     return <Chip size="small" label={normalizedTitle} color="warning" />;
   }
 
-  if (
-    status === ApplicationStatus.Errored ||
-    status === ApplicationStatus.Live
-  ) {
+  if (state === ApplicationStatus.Errored || state === ApplicationStatus.Live) {
     return <Chip size="small" label={normalizedTitle} color="success" />;
   }
 

dashboard/src/components/ui/v2/Radio/Radio.tsx

@@ -6,7 +6,7 @@ import SvgIcon from '@/ui/v2/icons/SvgIcon';
 import { styled } from '@mui/material';
 import type { RadioProps as MaterialRadioProps } from '@mui/material/Radio';
 import MaterialRadio from '@mui/material/Radio';
-import type { ForwardedRef, PropsWithoutRef } from 'react';
+import type { ForwardedRef, PropsWithoutRef, ReactNode } from 'react';
 import { forwardRef } from 'react';
 
 export interface RadioProps extends MaterialRadioProps {
@@ -17,7 +17,7 @@ export interface RadioProps extends MaterialRadioProps {
   /**
    * Label to be displayed next to the radio button.
    */
-  label?: string;
+  label?: ReactNode;
   /**
    * Props to be passed to individual component slots.
    */

dashboard/src/components/ui/v2/Tooltip/Tooltip.tsx

@@ -1,7 +1,9 @@
 import { styled } from '@mui/material';
 import Box from '@mui/material/Box';
 import type { TooltipProps as MaterialTooltipProps } from '@mui/material/Tooltip';
-import MaterialTooltip, { tooltipClasses } from '@mui/material/Tooltip';
+import MaterialTooltip, {
+  tooltipClasses as materialTooltipClasses,
+} from '@mui/material/Tooltip';
 import type { ForwardedRef } from 'react';
 import { forwardRef } from 'react';
 
@@ -21,7 +23,7 @@ export interface TooltipProps extends MaterialTooltipProps {
 }
 
 const StyledTooltip = styled(Box)(({ theme }) => ({
-  [`&.${tooltipClasses.tooltip}`]: {
+  [`&.${materialTooltipClasses.tooltip}`]: {
     fontSize: '0.9375rem',
     lineHeight: '1.375rem',
     backgroundColor:
@@ -36,9 +38,23 @@ const StyledTooltip = styled(Box)(({ theme }) => ({
       '0px 1px 4px rgba(14, 24, 39, 0.1), 0px 8px 24px rgba(14, 24, 39, 0.1)',
     maxWidth: '17.5rem',
   },
-  [`&.${tooltipClasses.tooltipPlacementBottom}`]: {
+  [`& .${materialTooltipClasses.arrow}`]: {
+    color:
+      theme.palette.mode === 'dark'
+        ? theme.palette.grey[300]
+        : theme.palette.grey[700],
+  },
+  [`&.${materialTooltipClasses.tooltipPlacementBottom}`]: {
     marginTop: `${theme.spacing(0.75)} !important`,
   },
+  [`&.${materialTooltipClasses.tooltipPlacementBottom} .${materialTooltipClasses.arrow}`]:
+    {
+      marginTop: `${theme.spacing(-0.5)} !important`,
+      color:
+        theme.palette.mode === 'dark'
+          ? theme.palette.grey[300]
+          : theme.palette.grey[700],
+    },
 }));
 
 function Tooltip(
@@ -69,6 +85,8 @@ function Tooltip(
   );
 }
 
+export { materialTooltipClasses as tooltipClasses };
+
 Tooltip.displayName = 'NhostTooltip';
 
 export default forwardRef(Tooltip);

dashboard/src/gql/app/pauseApplication.graphql

@@ -0,0 +1,5 @@
+mutation PauseApplication($appId: uuid!) {
+  updateApp(pk_columns: { id: $appId }, _set: { desiredState: 6 }) {
+    id
+  }
+}

dashboard/src/gql/app/unpauseApplication.graphql

@@ -0,0 +1,5 @@
+mutation UnpauseApplication($appId: uuid!) {
+  updateApp(pk_columns: { id: $appId }, _set: { desiredState: 5 }) {
+    id
+  }
+}

dashboard/src/gql/user/getFreeAndActiveProjects.graphql

@@ -0,0 +1,11 @@
+query GetFreeAndActiveProjects($userId: uuid!) {
+  freeAndActiveProjects: apps(
+    where: {
+      creatorUserId: { _eq: $userId }
+      plan: { isFree: { _eq: true } }
+      desiredState: { _eq: 5 }
+    }
+  ) {
+    id
+  }
+}

dashboard/src/hooks/useNotFoundRedirect.tsx

@@ -11,7 +11,7 @@ export default function useNotFoundRedirect() {
   const router = useRouter();
   const {
     query: { workspaceSlug, appSlug, updating },
-  } = useRouter();
+  } = router;
 
   const notIn404Already = router.pathname !== '/404';
   const noResolvedWorkspace = workspaceSlug && currentWorkspace === undefined;

dashboard/src/pages/[workspaceSlug]/[appSlug]/settings/general/index.tsx

@@ -8,7 +8,8 @@ import { useUI } from '@/context/UIContext';
 import {
   GetOneUserDocument,
   useDeleteApplicationMutation,
-  useUpdateAppMutation,
+  usePauseApplicationMutation,
+  useUpdateApplicationMutation,
 } from '@/generated/graphql';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import Input from '@/ui/v2/Input';
@@ -37,9 +38,13 @@ export type ProjectNameValidationSchema = Yup.InferType<
 
 export default function SettingsGeneralPage() {
   const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const { openDialog, closeDialog } = useDialog();
-  const [updateApp] = useUpdateAppMutation();
+  const { openDialog, openAlertDialog, closeDialog } = useDialog();
+  const [updateApp] = useUpdateApplicationMutation();
   const client = useApolloClient();
+  const [pauseApplication] = usePauseApplicationMutation({
+    variables: { appId: currentApplication?.id },
+    refetchQueries: [GetOneUserDocument],
+  });
   const [deleteApplication] = useDeleteApplicationMutation({
     variables: { appId: currentApplication?.id },
     refetchQueries: [GetOneUserDocument],
@@ -61,7 +66,7 @@ export default function SettingsGeneralPage() {
 
   const { register, formState } = form;
 
-  const handleProjectNameChange = async (data: ProjectNameValidationSchema) => {
+  async function handleProjectNameChange(data: ProjectNameValidationSchema) {
     // In this bit of code we spread the props of the current path (e.g. /workspace/...) and add one key-value pair: `updating: true`.
     // We want to indicate that the currently we're in the process of running a mutation state that will affect the routing behaviour of the website
     // i.e. redirecting to 404 if there's no workspace/project with that slug.
@@ -83,7 +88,7 @@ export default function SettingsGeneralPage() {
 
     const updateAppMutation = updateApp({
       variables: {
-        id: currentApplication.id,
+        appId: currentApplication.id,
         app: {
           name: data.name,
           slug: newProjectSlug,
@@ -108,34 +113,50 @@ export default function SettingsGeneralPage() {
     }
 
     try {
-      await client.refetchQueries({
-        include: ['getOneUser'],
-      });
       form.reset(undefined, { keepValues: true, keepDirty: false });
       await router.push(
         `/${currentWorkspace.slug}/${newProjectSlug}/settings/general`,
       );
+      await client.refetchQueries({ include: [GetOneUserDocument] });
     } catch (error) {
       await discordAnnounce(
-        error.message || 'Error while trying to update application cache',
+        error.message ||
+          'An error occurred while trying to update application cache.',
       );
     }
-  };
+  }
 
-  const handleDeleteApplication = async () => {
+  async function handleDeleteApplication() {
     await toast.promise(
       deleteApplication(),
       {
         loading: `Deleting ${currentApplication.name}...`,
-        success: `${currentApplication.name} deleted`,
+        success: `${currentApplication.name} has been deleted successfully.`,
         error: getServerError(
-          `Error while trying to ${currentApplication.name} project name`,
+          `An error occurred while trying to delete the project "${currentApplication.name}". Please try again.`,
         ),
       },
       getToastStyleProps(),
     );
+
     await router.push('/');
-  };
+  }
+
+  async function handlePauseApplication() {
+    await toast.promise(
+      pauseApplication(),
+      {
+        loading: `Pausing ${currentApplication.name}...`,
+        success: `${currentApplication.name} will be paused, but please note that it may take some time to complete the process.`,
+        error: getServerError(
+          `An error occurred while trying to pause the project "${currentApplication.name}". Please try again.`,
+        ),
+      },
+      getToastStyleProps(),
+    );
+
+    await router.push('/');
+  }
 
   return (
     <Container
@@ -171,6 +192,32 @@ export default function SettingsGeneralPage() {
         </Form>
       </FormProvider>
 
+      {currentApplication.plan.isFree && (
+        <SettingsContainer
+          title="Pause Project"
+          description="While your project is paused, it will not be accessible. You can wake it up anytime after."
+          submitButtonText="Pause"
+          slotProps={{
+            submitButton: {
+              type: 'button',
+              color: 'primary',
+              variant: 'contained',
+              disabled: maintenanceActive,
+              onClick: () => {
+                openAlertDialog({
+                  title: 'Pause Project?',
+                  payload:
+                    'Are you sure you want to pause this project? It will not be accessible until you unpause it.',
+                  props: {
+                    onPrimaryAction: handlePauseApplication,
+                  },
+                });
+              },
+            },
+          }}
+        />
+      )}
+
       <SettingsContainer
         title="Delete Project"
         description="The project will be permanently deleted, including its database, metadata, files, etc. This action is irreversible and can not be undone."

dashboard/src/pages/new.tsx

@@ -11,23 +11,25 @@ import { Modal } from '@/ui/Modal';
 import ActivityIndicator from '@/ui/v2/ActivityIndicator';
 import Box from '@/ui/v2/Box';
 import Button from '@/ui/v2/Button';
-import Checkbox from '@/ui/v2/Checkbox';
 import IconButton from '@/ui/v2/IconButton';
 import CopyIcon from '@/ui/v2/icons/CopyIcon';
 import Input from '@/ui/v2/Input';
 import InputAdornment from '@/ui/v2/InputAdornment';
 import Option from '@/ui/v2/Option';
+import Radio from '@/ui/v2/Radio';
+import RadioGroup from '@/ui/v2/RadioGroup';
 import Select from '@/ui/v2/Select';
 import type { TextProps } from '@/ui/v2/Text';
 import Text from '@/ui/v2/Text';
+import Tooltip from '@/ui/v2/Tooltip';
+import { MAX_FREE_PROJECTS } from '@/utils/CONSTANTS';
 import { copy } from '@/utils/copy';
-import { discordAnnounce } from '@/utils/discordAnnounce';
 import { getErrorMessage } from '@/utils/getErrorMessage';
-import { getCurrentEnvironment, slugifyString } from '@/utils/helpers';
-import { nhost } from '@/utils/nhost';
+import { getCurrentEnvironment } from '@/utils/helpers';
 import { planDescriptions } from '@/utils/planDescriptions';
 import generateRandomDatabasePassword from '@/utils/settings/generateRandomDatabasePassword';
 import { resetDatabasePasswordValidationSchema } from '@/utils/settings/resetDatabasePasswordValidationSchema';
+import { getToastStyleProps } from '@/utils/settings/settingsConstants';
 import { triggerToast } from '@/utils/toast';
 import type {
   PrefetchNewAppPlansFragment,
@@ -35,19 +37,25 @@ import type {
   PrefetchNewAppWorkspaceFragment,
 } from '@/utils/__generated__/graphql';
 import {
+  useGetFreeAndActiveProjectsQuery,
   useInsertApplicationMutation,
   usePrefetchNewAppQuery,
 } from '@/utils/__generated__/graphql';
+import type { ApolloError } from '@apollo/client';
+import { useUserData } from '@nhost/nextjs';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import type { ReactElement } from 'react';
 import { cloneElement, isValidElement, useState } from 'react';
+import { toast } from 'react-hot-toast';
+import slugify from 'slugify';
 import { twMerge } from 'tailwind-merge';
 
 type NewAppPageProps = {
   regions: PrefetchNewAppRegionsFragment[];
   plans: PrefetchNewAppPlansFragment[];
   workspaces: PrefetchNewAppWorkspaceFragment[];
+  numberOfFreeAndLiveProjects: number;
   preSelectedWorkspace: PrefetchNewAppWorkspaceFragment;
   preSelectedRegion: PrefetchNewAppRegionsFragment;
 };
@@ -56,6 +64,7 @@ export function NewProjectPageContent({
   regions,
   plans,
   workspaces,
+  numberOfFreeAndLiveProjects,
   preSelectedWorkspace,
   preSelectedRegion,
 }: NewAppPageProps) {
@@ -86,15 +95,23 @@ export function NewProjectPageContent({
     generateRandomDatabasePassword(),
   );
 
-  const [plan, setPlan] = useState(plans[0]);
+  // find the first acceptable plan as default plan
+  const defaultSelectedPlan = plans.find((plan) => {
+    if (!plan.isFree) {
+      return true;
+    }
+    return numberOfFreeAndLiveProjects < MAX_FREE_PROJECTS;
+  });
+
+  const [plan, setPlan] = useState(defaultSelectedPlan);
 
   // state
   const { submitState, setSubmitState } = useSubmitState();
-  const [applicationError, setApplicationError] = useState<any>('');
   const [showPaymentModal, setShowPaymentModal] = useState(false);
 
   // graphql mutations
-  const [insertApp] = useInsertApplicationMutation();
+
+  const [insertApp] = useInsertApplicationMutation({});
   const { refetchUserData } = useLazyRefetchUserData();
 
   // options
@@ -119,8 +136,6 @@ export function NewProjectPageContent({
     (availableWorkspace) => availableWorkspace.id === selectedWorkspace.id,
   );
 
-  const user = nhost.auth.getUser();
-
   const isK8SPostgresEnabledInCurrentEnvironment = features[
     'k8s-postgres'
   ].enabled.find((e) => e === getCurrentEnvironment());
@@ -133,30 +148,24 @@ export function NewProjectPageContent({
     setDatabasePassword(newRandomDatabasePassword);
   };
 
-  const handleSubmit = async () => {
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    if (!plan.isFree && workspace.paymentMethods.length === 0) {
+      setShowPaymentModal(true);
+      return;
+    }
+
     setSubmitState({
       error: null,
       loading: true,
     });
 
     if (name.length < 1 || name.length > 32) {
-      setApplicationError(
-        `The project name must be between 1 and 32 characters`,
-      );
       setSubmitState({
-        error: null,
+        error: Error('The project name must be between 1 and 32 characters'),
         loading: false,
       });
-    }
-
-    const slug = slugifyString(name);
-
-    if (slug.length < 1 || slug.length > 32) {
-      setSubmitState({
-        error: Error('The project slug must be between 1 and 32 characters.'),
-        loading: false,
-      });
-
       return;
     }
 
@@ -173,14 +182,11 @@ export function NewProjectPageContent({
       }
     }
 
-    // NOTE: Maybe we'll reintroduce this way of creating the subdomain in the future
-    // https://www.rfc-editor.org/rfc/rfc1034#section-3.1
-    // subdomain max length is 63 characters
-    // const subdomain = `${slug}-${workspaceSlug}`.substring(0, 63);
+    const slug = slugify(name, { lower: true, strict: true });
 
     try {
-      if (isK8SPostgresEnabledInCurrentEnvironment) {
-        await insertApp({
+      await toast.promise(
+        insertApp({
           variables: {
             app: {
               name,
@@ -188,37 +194,40 @@ export function NewProjectPageContent({
               planId: plan.id,
               workspaceId: selectedWorkspace.id,
               regionId: selectedRegion.id,
-              postgresPassword: databasePassword,
+              postgresPassword: isK8SPostgresEnabledInCurrentEnvironment
+                ? databasePassword
+                : undefined,
             },
           },
-        });
-      } else {
-        await insertApp({
-          variables: {
-            app: {
-              name,
-              slug,
-              planId: plan.id,
-              workspaceId: selectedWorkspace.id,
-              regionId: selectedRegion.id,
-            },
-          },
-        });
-      }
+        }),
+        {
+          loading: 'Creating the project...',
+          success: 'The project has been created successfully.',
+          error: (arg: ApolloError) => {
+            // we need to get the internal error message from the GraphQL error
+            const { internal } = arg.graphQLErrors[0]?.extensions || {};
+            const { message } = (internal as Record<string, any>)?.error || {};
 
-      triggerToast(`New project ${name} created`);
-    } catch (error) {
-      discordAnnounce(
-        `Error creating project: ${error.message}. (${user.email})`,
+            // we use the default Apollo error message if we can't find the
+            // internal error message
+            return (
+              message ||
+              arg.message ||
+              'An error occurred while creating the project. Please try again.'
+            );
+          },
+        },
+        getToastStyleProps(),
       );
+
+      await refetchUserData();
+      await router.push(`/${selectedWorkspace.slug}/${slug}`);
+    } catch (error) {
       setSubmitState({
-        error: Error(getErrorMessage(error, 'application')),
+        error: null,
         loading: false,
       });
     }
-
-    await refetchUserData();
-    router.push(`/${selectedWorkspace.slug}/${slug}`);
   };
 
   if (!selectedWorkspace) {
@@ -243,383 +252,376 @@ export function NewProjectPageContent({
 
   return (
     <Container>
-      <div className="mx-auto grid max-w-[760px] grid-flow-row gap-4 py-6 sm:py-14">
-        <Text variant="h2" component="h1">
-          New Project
-        </Text>
+      <form onSubmit={handleSubmit}>
+        <div className="mx-auto grid max-w-[760px] grid-flow-row gap-4 py-6 sm:py-14">
+          <Text variant="h2" component="h1">
+            New Project
+          </Text>
 
-        <div className="grid grid-flow-row gap-4">
-          <Input
-            id="name"
-            autoComplete="off"
-            label="Project Name"
-            variant="inline"
-            fullWidth
-            hideEmptyHelperText
-            placeholder="Project Name"
-            onChange={(event) => {
-              setSubmitState({
-                error: null,
-                loading: false,
-              });
-              setApplicationError('');
-              setName(event.target.value);
-            }}
-            value={name}
-            autoFocus
-          />
-
-          <Select
-            id="workspace"
-            label="Workspace"
-            variant="inline"
-            hideEmptyHelperText
-            placeholder="Select Workspace"
-            slotProps={{
-              root: { className: 'grid grid-flow-col gap-1' },
-            }}
-            onChange={(_event, value) => {
-              const workspaceInList = workspaces.find(({ id }) => id === value);
-              setPlan(plans[0]);
-              setSelectedWorkspace({
-                id: workspaceInList.id,
-                name: workspaceInList.name,
-                disabled: false,
-                slug: workspaceInList.slug,
-              });
-            }}
-            value={selectedWorkspace.id}
-            renderValue={(option) => (
-              <span className="inline-grid grid-flow-col items-center gap-2">
-                {option?.label}
-              </span>
-            )}
-          >
-            {workspaceOptions.map((option) => (
-              <Option
-                value={option.id}
-                key={option.id}
-                className="grid grid-flow-col items-center gap-2"
-              >
-                <span className="inline-block h-6 w-6 overflow-hidden rounded-md">
-                  <Image
-                    src="/logos/new.svg"
-                    alt="Nhost Logo"
-                    width={24}
-                    height={24}
-                  />
-                </span>
-
-                {option.name}
-              </Option>
-            ))}
-          </Select>
-
-          {isK8SPostgresEnabledInCurrentEnvironment && (
+          <div className="grid grid-flow-row gap-4">
             <Input
-              name="databasePassword"
-              id="databasePassword"
-              autoComplete="new-password"
-              label="Database Password"
-              value={databasePassword}
+              id="name"
+              autoComplete="off"
+              label="Project Name"
               variant="inline"
-              type="password"
-              error={!!passwordError}
+              fullWidth
               hideEmptyHelperText
-              endAdornment={
-                <InputAdornment position="end" className="mr-2">
-                  <IconButton
-                    color="secondary"
-                    onClick={() => {
-                      copy(databasePassword, 'Postgres password');
-                    }}
-                    variant="borderless"
-                    aria-label="Copy password"
-                  >
-                    <CopyIcon className="h-4 w-4" />
-                  </IconButton>
-                </InputAdornment>
-              }
-              slotProps={{
-                // Note: this is supposed to fix a `validateDOMNesting` error
-                helperText: { component: 'div' },
-              }}
-              helperText={
-                <div className="grid max-w-xs grid-flow-row gap-2">
-                  {passwordError && (
-                    <Text
-                      variant="subtitle2"
-                      sx={{
-                        color: (theme) =>
-                          `${theme.palette.error.main} !important`,
-                      }}
-                    >
-                      {passwordError}
-                    </Text>
-                  )}
-
-                  <Box className="font-medium">
-                    The root Postgres password for your database - it must be
-                    strong and hard to guess.{' '}
-                    <Button
-                      type="button"
-                      variant="borderless"
-                      color="secondary"
-                      onClick={handleGenerateRandomPassword}
-                      className="px-1 py-0.5 text-xs underline underline-offset-2 hover:underline"
-                      tabIndex={-1}
-                    >
-                      Generate a password
-                    </Button>
-                  </Box>
-                </div>
-              }
-              onChange={async (e) => {
-                e.preventDefault();
+              placeholder="Project Name"
+              onChange={(event) => {
                 setSubmitState({
                   error: null,
                   loading: false,
                 });
-                if (e.target.value.length === 0) {
-                  setDatabasePassword(e.target.value);
-                  setPasswordError('Please enter a password');
-
-                  return;
-                }
-                setDatabasePassword(e.target.value);
-                setPasswordError('');
-                try {
-                  await resetDatabasePasswordValidationSchema.validate({
-                    databasePassword: e.target.value,
-                  });
-                  setPasswordError('');
-                } catch (validationError) {
-                  setPasswordError(validationError.message);
-                }
+                setName(event.target.value);
               }}
-              fullWidth
+              value={name}
+              autoFocus
             />
-          )}
 
-          <Select
-            id="region"
-            label="Region"
-            variant="inline"
-            hideEmptyHelperText
-            placeholder="Select Region"
-            slotProps={{
-              root: { className: 'grid grid-flow-col gap-1' },
-            }}
-            onChange={(_event, value) => {
-              const regionInList = regions.find(({ id }) => id === value);
-              setPlan(plans[0]);
-              setSelectedRegion({
-                id: regionInList.id,
-                name: regionInList.country.name,
-                disabled: false,
-                code: regionInList.country.code,
-              });
-            }}
-            value={selectedRegion.id}
-            renderValue={(option) => {
-              const [flag, , country] = (option?.label as any[]) || [];
-
-              return (
-                <span className="inline-grid grid-flow-col grid-rows-none items-center gap-x-2">
-                  {flag}
-
-                  {isValidElement<TextProps>(country)
-                    ? cloneElement(country, {
-                        ...country.props,
-                        variant: 'body1',
-                      })
-                    : null}
-                </span>
-              );
-            }}
-          >
-            {regionOptions.map((option) => (
-              <Option
-                value={option.id}
-                key={option.id}
-                className={twMerge(
-                  'relative grid grid-flow-col grid-rows-2 items-center justify-start gap-x-3',
-                  option.disabled && 'pointer-events-none opacity-50',
-                )}
-                disabled={option.disabled}
-              >
-                <span className="row-span-2 flex">
-                  <Image
-                    src={`/assets/flags/${option.code}.svg`}
-                    alt={`${option.country} country flag`}
-                    width={16}
-                    height={12}
-                  />
+            <Select
+              id="workspace"
+              label="Workspace"
+              variant="inline"
+              hideEmptyHelperText
+              placeholder="Select Workspace"
+              slotProps={{
+                root: { className: 'grid grid-flow-col gap-1' },
+              }}
+              onChange={(_event, value) => {
+                const workspaceInList = workspaces.find(
+                  ({ id }) => id === value,
+                );
+                setPlan(plans[0]);
+                setSelectedWorkspace({
+                  id: workspaceInList.id,
+                  name: workspaceInList.name,
+                  disabled: false,
+                  slug: workspaceInList.slug,
+                });
+              }}
+              value={selectedWorkspace.id}
+              renderValue={(option) => (
+                <span className="inline-grid grid-flow-col items-center gap-2">
+                  {option?.label}
                 </span>
+              )}
+            >
+              {workspaceOptions.map((option) => (
+                <Option
+                  value={option.id}
+                  key={option.id}
+                  className="grid grid-flow-col items-center gap-2"
+                >
+                  <span className="inline-block h-6 w-6 overflow-hidden rounded-md">
+                    <Image
+                      src="/logos/new.svg"
+                      alt="Nhost Logo"
+                      width={24}
+                      height={24}
+                    />
+                  </span>
 
-                <Text className="row-span-1 font-medium">{option.name}</Text>
+                  {option.name}
+                </Option>
+              ))}
+            </Select>
 
-                <Text variant="subtitle2" className="row-span-1">
-                  {option.country}
-                </Text>
+            {isK8SPostgresEnabledInCurrentEnvironment && (
+              <Input
+                name="databasePassword"
+                id="databasePassword"
+                autoComplete="new-password"
+                label="Database Password"
+                value={databasePassword}
+                variant="inline"
+                type="password"
+                error={!!passwordError}
+                hideEmptyHelperText
+                endAdornment={
+                  <InputAdornment position="end" className="mr-2">
+                    <IconButton
+                      color="secondary"
+                      onClick={() => {
+                        copy(databasePassword, 'Postgres password');
+                      }}
+                      variant="borderless"
+                      aria-label="Copy password"
+                    >
+                      <CopyIcon className="h-4 w-4" />
+                    </IconButton>
+                  </InputAdornment>
+                }
+                slotProps={{
+                  // Note: this is supposed to fix a `validateDOMNesting` error
+                  helperText: { component: 'div' },
+                }}
+                helperText={
+                  <div className="grid max-w-xs grid-flow-row gap-2">
+                    {passwordError && (
+                      <Text
+                        variant="subtitle2"
+                        sx={{
+                          color: (theme) =>
+                            `${theme.palette.error.main} !important`,
+                        }}
+                      >
+                        {passwordError}
+                      </Text>
+                    )}
 
-                {option.disabled && (
-                  <Text
-                    variant="subtitle2"
-                    className="absolute top-1/2 right-4 -translate-y-1/2"
-                  >
-                    Disabled
-                  </Text>
-                )}
-              </Option>
-            ))}
-          </Select>
+                    <Box className="font-medium">
+                      The root Postgres password for your database - it must be
+                      strong and hard to guess.{' '}
+                      <Button
+                        type="button"
+                        variant="borderless"
+                        color="secondary"
+                        onClick={handleGenerateRandomPassword}
+                        className="px-1 py-0.5 text-xs underline underline-offset-2 hover:underline"
+                        tabIndex={-1}
+                      >
+                        Generate a password
+                      </Button>
+                    </Box>
+                  </div>
+                }
+                onChange={async (e) => {
+                  e.preventDefault();
+                  setSubmitState({
+                    error: null,
+                    loading: false,
+                  });
+                  setDatabasePassword(e.target.value);
 
-          <div className="grid w-full grid-cols-8 gap-x-4 gap-y-2">
-            <div className="col-span-8 sm:col-span-2">
-              <Text className="text-xs font-medium">Plan</Text>
-              <Text variant="subtitle2">You can change this later.</Text>
-            </div>
+                  try {
+                    await resetDatabasePasswordValidationSchema.validate({
+                      databasePassword: e.target.value,
+                    });
+                    setPasswordError('');
+                  } catch (validationError) {
+                    setPasswordError(validationError.message);
+                  }
+                }}
+                fullWidth
+              />
+            )}
 
-            <div className="col-span-8 sm:col-span-6">
-              {plans.map((currentPlan) => {
-                const checked = plan.id === currentPlan.id;
+            <Select
+              id="region"
+              label="Region"
+              variant="inline"
+              hideEmptyHelperText
+              placeholder="Select Region"
+              slotProps={{
+                root: { className: 'grid grid-flow-col gap-1' },
+              }}
+              onChange={(_event, value) => {
+                const regionInList = regions.find(({ id }) => id === value);
+                setSelectedRegion({
+                  id: regionInList.id,
+                  name: regionInList.country.name,
+                  disabled: false,
+                  code: regionInList.country.code,
+                });
+              }}
+              value={selectedRegion.id}
+              renderValue={(option) => {
+                const [flag, , country] = (option?.label as any[]) || [];
 
                 return (
-                  <Box
-                    className="border-t py-4 last-of-type:border-b"
-                    key={currentPlan.id}
-                  >
-                    <Checkbox
-                      label={
-                        <>
-                          <span className="inline-block max-w-xs">
-                            <span className="font-medium">
-                              {currentPlan.name}:
-                            </span>{' '}
-                            {planDescriptions[currentPlan.name]}
-                          </span>
+                  <span className="inline-grid grid-flow-col grid-rows-none items-center gap-x-2">
+                    {flag}
 
-                          {currentPlan.isFree ? (
-                            <Text variant="h3" component="span">
-                              Free
-                            </Text>
-                          ) : (
-                            <Text
-                              variant="h3"
-                              component="span"
-                              className="inline-grid grid-flow-col items-center gap-1"
-                            >
-                              $ {currentPlan.price}{' '}
-                              <Text variant="subtitle2" component="span">
-                                / mo
-                              </Text>
-                            </Text>
-                          )}
-                        </>
-                      }
-                      componentsProps={{
-                        formControlLabel: {
-                          className: 'flex',
-                          componentsProps: {
-                            typography: {
-                              className:
-                                'font-regular text-xs grid grid-flow-col justify-between items-center w-full',
-                            },
-                          },
-                        },
-                      }}
-                      checked={checked}
-                      key={currentPlan.id}
-                      onChange={(event, inputChecked) => {
-                        if (!inputChecked) {
-                          event.preventDefault();
-
-                          return;
-                        }
-
-                        setPlan(currentPlan);
-                      }}
-                    />
-                  </Box>
+                    {isValidElement<TextProps>(country)
+                      ? cloneElement(country, {
+                          ...country.props,
+                          variant: 'body1',
+                        })
+                      : null}
+                  </span>
                 );
-              })}
-            </div>
-          </div>
-        </div>
-
-        {submitState.error && (
-          <Alert severity="error" className="text-left">
-            <Text className="font-medium">Warning</Text>{' '}
-            <Text className="font-medium">
-              {submitState.error &&
-                getErrorMessage(submitState.error, 'application')}
-            </Text>
-          </Alert>
-        )}
-
-        <div className="flex justify-end">
-          {showPaymentModal && (
-            <Modal
-              showModal={showPaymentModal}
-              close={() => {
-                setShowPaymentModal(false);
               }}
             >
-              <BillingPaymentMethodForm
+              {regionOptions.map((option) => (
+                <Option
+                  value={option.id}
+                  key={option.id}
+                  className={twMerge(
+                    'relative grid grid-flow-col grid-rows-2 items-center justify-start gap-x-3',
+                    option.disabled && 'pointer-events-none opacity-50',
+                  )}
+                  disabled={option.disabled}
+                >
+                  <span className="row-span-2 flex">
+                    <Image
+                      src={`/assets/flags/${option.code}.svg`}
+                      alt={`${option.country} country flag`}
+                      width={16}
+                      height={12}
+                    />
+                  </span>
+
+                  <Text className="row-span-1 font-medium">{option.name}</Text>
+
+                  <Text variant="subtitle2" className="row-span-1">
+                    {option.country}
+                  </Text>
+
+                  {option.disabled && (
+                    <Text
+                      variant="subtitle2"
+                      className="absolute top-1/2 right-4 -translate-y-1/2"
+                    >
+                      Disabled
+                    </Text>
+                  )}
+                </Option>
+              ))}
+            </Select>
+
+            <div className="grid w-full grid-cols-8 gap-x-4 gap-y-2">
+              <div className="col-span-8 sm:col-span-2">
+                <Text className="text-xs font-medium">Plan</Text>
+                <Text variant="subtitle2">You can change this later.</Text>
+              </div>
+
+              <RadioGroup
+                value={plan.id}
+                onChange={(_event, value) => {
+                  setPlan(plans.find((p) => p.id === value));
+                }}
+                className="col-span-8 space-y-2 sm:col-span-6"
+              >
+                {plans.map((currentPlan) => {
+                  const disabledPlan =
+                    currentPlan.isFree &&
+                    numberOfFreeAndLiveProjects >= MAX_FREE_PROJECTS;
+
+                  return (
+                    <Tooltip
+                      visible={disabledPlan}
+                      title="Only one free project can be active at any given time. Please pause your active free project before creating a new one."
+                      key={currentPlan.id}
+                      slotProps={{
+                        tooltip: { className: '!max-w-xs w-full text-center' },
+                      }}
+                    >
+                      <Box className="w-full rounded-md border">
+                        <Radio
+                          slotProps={{
+                            formControl: {
+                              className: 'p-3 w-full',
+                              slotProps: {
+                                typography: { className: 'w-full' },
+                              },
+                            },
+                          }}
+                          value={currentPlan.id}
+                          disabled={disabledPlan}
+                          label={
+                            <div className="flex w-full items-center justify-between ">
+                              <div className="inline-block max-w-xs">
+                                <Text className="font-medium text-[inherit]">
+                                  {currentPlan.name}
+                                </Text>
+                                <Text className="text-xs text-[inherit]">
+                                  {planDescriptions[currentPlan.name]}
+                                </Text>
+                              </div>
+
+                              {currentPlan.isFree ? (
+                                <Text
+                                  variant="h3"
+                                  component="span"
+                                  className="text-[inherit]"
+                                >
+                                  Free
+                                </Text>
+                              ) : (
+                                <Text variant="h3" component="span">
+                                  ${currentPlan.price}/mo
+                                </Text>
+                              )}
+                            </div>
+                          }
+                        />
+                      </Box>
+                    </Tooltip>
+                  );
+                })}
+              </RadioGroup>
+            </div>
+          </div>
+
+          {submitState.error && (
+            <Alert severity="error" className="text-left">
+              <Text className="font-medium">Error</Text>{' '}
+              <Text className="font-medium">
+                {submitState.error &&
+                  getErrorMessage(submitState.error, 'application')}{' '}
+              </Text>
+            </Alert>
+          )}
+
+          <div className="flex justify-end">
+            {showPaymentModal && (
+              <Modal
+                showModal={showPaymentModal}
                 close={() => {
                   setShowPaymentModal(false);
                 }}
-                onPaymentMethodAdded={handleSubmit}
-                workspaceId={workspace.id}
-              />
-            </Modal>
-          )}
+              >
+                <BillingPaymentMethodForm
+                  close={() => {
+                    setShowPaymentModal(false);
+                  }}
+                  onPaymentMethodAdded={handleSubmit}
+                  workspaceId={workspace.id}
+                />
+              </Modal>
+            )}
 
-          <Button
-            onClick={() => {
-              if (!plan.isFree && workspace.paymentMethods.length === 0) {
-                setShowPaymentModal(true);
-
-                return;
-              }
-
-              handleSubmit();
-            }}
-            type="submit"
-            loading={submitState.loading}
-            disabled={
-              !!applicationError ||
-              !!submitState.error ||
-              !!passwordError ||
-              maintenanceActive
-            }
-            id="create-app"
-          >
-            Create Project
-          </Button>
+            <Button
+              type="submit"
+              loading={submitState.loading}
+              disabled={!!passwordError || maintenanceActive}
+              id="create-app"
+            >
+              Create Project
+            </Button>
+          </div>
         </div>
-      </div>
+      </form>
     </Container>
   );
 }
 
 export default function NewProjectPage() {
-  const { data, loading, error } = usePrefetchNewAppQuery();
   const router = useRouter();
+  const user = useUserData();
 
-  if (error) {
-    throw error;
+  const { data, loading, error } = usePrefetchNewAppQuery();
+
+  const {
+    data: freeAndActiveProjectsData,
+    loading: freeAndActiveProjectsLoading,
+    error: freeAndActiveProjectsError,
+  } = useGetFreeAndActiveProjectsQuery({
+    variables: { userId: user?.id },
+    fetchPolicy: 'cache-and-network',
+  });
+
+  if (error || freeAndActiveProjectsError) {
+    throw error || freeAndActiveProjectsError;
   }
 
-  if (loading) {
+  if (loading || freeAndActiveProjectsLoading) {
     return (
       <ActivityIndicator delay={500} label="Loading plans and regions..." />
     );
   }
 
   const { workspace } = router.query;
-
   const { regions, plans, workspaces } = data;
 
   // get pre-selected workspace
@@ -628,13 +630,16 @@ export default function NewProjectPage() {
     ? workspaces.find((w) => w.slug === workspace)
     : workspaces[0];
 
-  const preSelectedRegion = regions.filter((region) => region.active)[0];
+  const preSelectedRegion = regions.find((region) => region.active);
 
   return (
     <NewProjectPageContent
       regions={regions}
       plans={plans}
       workspaces={workspaces}
+      numberOfFreeAndLiveProjects={
+        freeAndActiveProjectsData?.freeAndActiveProjects.length
+      }
       preSelectedWorkspace={preSelectedWorkspace}
       preSelectedRegion={preSelectedRegion}
     />

dashboard/src/utils/CONSTANTS.ts

@@ -22,3 +22,8 @@ export const READ_ONLY_SCHEMAS = ['auth', 'storage'];
  * Key used to store the color preference in local storage.
  */
 export const COLOR_PREFERENCE_STORAGE_KEY = 'nhost-color-preference';
+
+/**
+ * Maximum number of free projects a user is allowed to have.
+ */
+export const MAX_FREE_PROJECTS = 1;

dashboard/src/utils/__generated__/graphql.ts

@@ -865,6 +865,38 @@ export type ConfigBooleanComparisonExp = {
   _nin?: InputMaybe<Array<Scalars['Boolean']>>;
 };
 
+export type ConfigClaimMap = {
+  __typename?: 'ConfigClaimMap';
+  claim: Scalars['String'];
+  default?: Maybe<Scalars['String']>;
+  path?: Maybe<Scalars['String']>;
+  value?: Maybe<Scalars['String']>;
+};
+
+export type ConfigClaimMapComparisonExp = {
+  _and?: InputMaybe<Array<ConfigClaimMapComparisonExp>>;
+  _not?: InputMaybe<ConfigClaimMapComparisonExp>;
+  _or?: InputMaybe<Array<ConfigClaimMapComparisonExp>>;
+  claim?: InputMaybe<ConfigStringComparisonExp>;
+  default?: InputMaybe<ConfigStringComparisonExp>;
+  path?: InputMaybe<ConfigStringComparisonExp>;
+  value?: InputMaybe<ConfigStringComparisonExp>;
+};
+
+export type ConfigClaimMapInsertInput = {
+  claim: Scalars['String'];
+  default?: InputMaybe<Scalars['String']>;
+  path?: InputMaybe<Scalars['String']>;
+  value?: InputMaybe<Scalars['String']>;
+};
+
+export type ConfigClaimMapUpdateInput = {
+  claim?: InputMaybe<Scalars['String']>;
+  default?: InputMaybe<Scalars['String']>;
+  path?: InputMaybe<Scalars['String']>;
+  value?: InputMaybe<Scalars['String']>;
+};
+
 export type ConfigConfig = {
   __typename?: 'ConfigConfig';
   auth?: Maybe<ConfigAuth>;
@@ -1079,6 +1111,7 @@ export type ConfigJwtSecret = {
   allowed_skew?: Maybe<Scalars['ConfigUint32']>;
   audience?: Maybe<Scalars['String']>;
   claims_format?: Maybe<Scalars['String']>;
+  claims_map?: Maybe<Array<ConfigClaimMap>>;
   claims_namespace?: Maybe<Scalars['String']>;
   claims_namespace_path?: Maybe<Scalars['String']>;
   header?: Maybe<Scalars['String']>;
@@ -1095,6 +1128,7 @@ export type ConfigJwtSecretComparisonExp = {
   allowed_skew?: InputMaybe<ConfigUint32ComparisonExp>;
   audience?: InputMaybe<ConfigStringComparisonExp>;
   claims_format?: InputMaybe<ConfigStringComparisonExp>;
+  claims_map?: InputMaybe<ConfigClaimMapComparisonExp>;
   claims_namespace?: InputMaybe<ConfigStringComparisonExp>;
   claims_namespace_path?: InputMaybe<ConfigStringComparisonExp>;
   header?: InputMaybe<ConfigStringComparisonExp>;
@@ -1108,6 +1142,7 @@ export type ConfigJwtSecretInsertInput = {
   allowed_skew?: InputMaybe<Scalars['ConfigUint32']>;
   audience?: InputMaybe<Scalars['String']>;
   claims_format?: InputMaybe<Scalars['String']>;
+  claims_map?: InputMaybe<Array<ConfigClaimMapInsertInput>>;
   claims_namespace?: InputMaybe<Scalars['String']>;
   claims_namespace_path?: InputMaybe<Scalars['String']>;
   header?: InputMaybe<Scalars['String']>;
@@ -1121,6 +1156,7 @@ export type ConfigJwtSecretUpdateInput = {
   allowed_skew?: InputMaybe<Scalars['ConfigUint32']>;
   audience?: InputMaybe<Scalars['String']>;
   claims_format?: InputMaybe<Scalars['String']>;
+  claims_map?: InputMaybe<Array<ConfigClaimMapUpdateInput>>;
   claims_namespace?: InputMaybe<Scalars['String']>;
   claims_namespace_path?: InputMaybe<Scalars['String']>;
   header?: InputMaybe<Scalars['String']>;
@@ -16361,6 +16397,13 @@ export type InsertApplicationMutationVariables = Exact<{
 
 export type InsertApplicationMutation = { __typename?: 'mutation_root', insertApp?: { __typename?: 'apps', id: any, name: string, slug: string, workspace: { __typename?: 'workspaces', id: any, name: string, slug: string } } | null };
 
+export type PauseApplicationMutationVariables = Exact<{
+  appId: Scalars['uuid'];
+}>;
+
+
+export type PauseApplicationMutation = { __typename?: 'mutation_root', updateApp?: { __typename?: 'apps', id: any } | null };
+
 export type PrefetchNewAppRegionsFragment = { __typename?: 'regions', id: any, city: string, active: boolean, country: { __typename?: 'countries', code: any, name: string } };
 
 export type PrefetchNewAppPlansFragment = { __typename?: 'plans', id: any, name: string, isDefault: boolean, isFree: boolean, price: number, featureBackupEnabled: boolean, featureCustomDomainsEnabled: boolean, featureMaxDbSize: number };
@@ -16454,6 +16497,13 @@ export type UpdateConfigMutationVariables = Exact<{
 
 export type UpdateConfigMutation = { __typename?: 'mutation_root', updateConfig: { __typename?: 'ConfigConfig', id: 'ConfigConfig' } };
 
+export type UnpauseApplicationMutationVariables = Exact<{
+  appId: Scalars['uuid'];
+}>;
+
+
+export type UnpauseApplicationMutation = { __typename?: 'mutation_root', updateApp?: { __typename?: 'apps', id: any } | null };
+
 export type UpdateAppMutationVariables = Exact<{
   id: Scalars['uuid'];
   app: Apps_Set_Input;
@@ -16784,6 +16834,13 @@ export type GetAvatarQueryVariables = Exact<{
 
 export type GetAvatarQuery = { __typename?: 'query_root', user?: { __typename?: 'users', id: any, avatarUrl: string } | null };
 
+export type GetFreeAndActiveProjectsQueryVariables = Exact<{
+  userId: Scalars['uuid'];
+}>;
+
+
+export type GetFreeAndActiveProjectsQuery = { __typename?: 'query_root', freeAndActiveProjects: Array<{ __typename?: 'apps', id: any }> };
+
 export type ProjectFragment = { __typename?: 'apps', id: any, slug: string, name: string, repositoryProductionBranch: string, subdomain: string, isProvisioned: boolean, createdAt: any, desiredState: number, nhostBaseFolder: string, providersUpdated?: boolean | null, config?: { __typename?: 'ConfigConfig', hasura: { __typename?: 'ConfigHasura', adminSecret: string } } | null, featureFlags: Array<{ __typename?: 'featureFlags', description: string, id: any, name: string, value: string }>, appStates: Array<{ __typename?: 'appStateHistory', id: any, appId: any, message?: string | null, stateId: number, createdAt: any }>, region: { __typename?: 'regions', id: any, countryCode: string, awsName: string, city: string }, plan: { __typename?: 'plans', id: any, name: string, isFree: boolean }, githubRepository?: { __typename?: 'githubRepositories', fullName: string } | null, deployments: Array<{ __typename?: 'deployments', id: any, commitSHA: string, commitMessage?: string | null, commitUserName?: string | null, deploymentStartedAt?: any | null, deploymentEndedAt?: any | null, commitUserAvatarUrl?: string | null, deploymentStatus?: string | null }> };
 
 export type GetOneUserQueryVariables = Exact<{
@@ -17729,6 +17786,39 @@ export function useInsertApplicationMutation(baseOptions?: Apollo.MutationHookOp
 export type InsertApplicationMutationHookResult = ReturnType<typeof useInsertApplicationMutation>;
 export type InsertApplicationMutationResult = Apollo.MutationResult<InsertApplicationMutation>;
 export type InsertApplicationMutationOptions = Apollo.BaseMutationOptions<InsertApplicationMutation, InsertApplicationMutationVariables>;
+export const PauseApplicationDocument = gql`
+    mutation PauseApplication($appId: uuid!) {
+  updateApp(pk_columns: {id: $appId}, _set: {desiredState: 6}) {
+    id
+  }
+}
+    `;
+export type PauseApplicationMutationFn = Apollo.MutationFunction<PauseApplicationMutation, PauseApplicationMutationVariables>;
+
+/**
+ * __usePauseApplicationMutation__
+ *
+ * To run a mutation, you first call `usePauseApplicationMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `usePauseApplicationMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [pauseApplicationMutation, { data, loading, error }] = usePauseApplicationMutation({
+ *   variables: {
+ *      appId: // value for 'appId'
+ *   },
+ * });
+ */
+export function usePauseApplicationMutation(baseOptions?: Apollo.MutationHookOptions<PauseApplicationMutation, PauseApplicationMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<PauseApplicationMutation, PauseApplicationMutationVariables>(PauseApplicationDocument, options);
+      }
+export type PauseApplicationMutationHookResult = ReturnType<typeof usePauseApplicationMutation>;
+export type PauseApplicationMutationResult = Apollo.MutationResult<PauseApplicationMutation>;
+export type PauseApplicationMutationOptions = Apollo.BaseMutationOptions<PauseApplicationMutation, PauseApplicationMutationVariables>;
 export const PrefetchNewAppDocument = gql`
     query PrefetchNewApp {
   regions(order_by: {city: asc}) {
@@ -18314,6 +18404,39 @@ export function useUpdateConfigMutation(baseOptions?: Apollo.MutationHookOptions
 export type UpdateConfigMutationHookResult = ReturnType<typeof useUpdateConfigMutation>;
 export type UpdateConfigMutationResult = Apollo.MutationResult<UpdateConfigMutation>;
 export type UpdateConfigMutationOptions = Apollo.BaseMutationOptions<UpdateConfigMutation, UpdateConfigMutationVariables>;
+export const UnpauseApplicationDocument = gql`
+    mutation UnpauseApplication($appId: uuid!) {
+  updateApp(pk_columns: {id: $appId}, _set: {desiredState: 5}) {
+    id
+  }
+}
+    `;
+export type UnpauseApplicationMutationFn = Apollo.MutationFunction<UnpauseApplicationMutation, UnpauseApplicationMutationVariables>;
+
+/**
+ * __useUnpauseApplicationMutation__
+ *
+ * To run a mutation, you first call `useUnpauseApplicationMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useUnpauseApplicationMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [unpauseApplicationMutation, { data, loading, error }] = useUnpauseApplicationMutation({
+ *   variables: {
+ *      appId: // value for 'appId'
+ *   },
+ * });
+ */
+export function useUnpauseApplicationMutation(baseOptions?: Apollo.MutationHookOptions<UnpauseApplicationMutation, UnpauseApplicationMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<UnpauseApplicationMutation, UnpauseApplicationMutationVariables>(UnpauseApplicationDocument, options);
+      }
+export type UnpauseApplicationMutationHookResult = ReturnType<typeof useUnpauseApplicationMutation>;
+export type UnpauseApplicationMutationResult = Apollo.MutationResult<UnpauseApplicationMutation>;
+export type UnpauseApplicationMutationOptions = Apollo.BaseMutationOptions<UnpauseApplicationMutation, UnpauseApplicationMutationVariables>;
 export const UpdateAppDocument = gql`
     mutation updateApp($id: uuid!, $app: apps_set_input!) {
   updateApp(pk_columns: {id: $id}, _set: $app) {
@@ -20072,6 +20195,46 @@ export type GetAvatarQueryResult = Apollo.QueryResult<GetAvatarQuery, GetAvatarQ
 export function refetchGetAvatarQuery(variables: GetAvatarQueryVariables) {
       return { query: GetAvatarDocument, variables: variables }
     }
+export const GetFreeAndActiveProjectsDocument = gql`
+    query GetFreeAndActiveProjects($userId: uuid!) {
+  freeAndActiveProjects: apps(
+    where: {creatorUserId: {_eq: $userId}, plan: {isFree: {_eq: true}}, desiredState: {_eq: 5}}
+  ) {
+    id
+  }
+}
+    `;
+
+/**
+ * __useGetFreeAndActiveProjectsQuery__
+ *
+ * To run a query within a React component, call `useGetFreeAndActiveProjectsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetFreeAndActiveProjectsQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useGetFreeAndActiveProjectsQuery({
+ *   variables: {
+ *      userId: // value for 'userId'
+ *   },
+ * });
+ */
+export function useGetFreeAndActiveProjectsQuery(baseOptions: Apollo.QueryHookOptions<GetFreeAndActiveProjectsQuery, GetFreeAndActiveProjectsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<GetFreeAndActiveProjectsQuery, GetFreeAndActiveProjectsQueryVariables>(GetFreeAndActiveProjectsDocument, options);
+      }
+export function useGetFreeAndActiveProjectsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetFreeAndActiveProjectsQuery, GetFreeAndActiveProjectsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<GetFreeAndActiveProjectsQuery, GetFreeAndActiveProjectsQueryVariables>(GetFreeAndActiveProjectsDocument, options);
+        }
+export type GetFreeAndActiveProjectsQueryHookResult = ReturnType<typeof useGetFreeAndActiveProjectsQuery>;
+export type GetFreeAndActiveProjectsLazyQueryHookResult = ReturnType<typeof useGetFreeAndActiveProjectsLazyQuery>;
+export type GetFreeAndActiveProjectsQueryResult = Apollo.QueryResult<GetFreeAndActiveProjectsQuery, GetFreeAndActiveProjectsQueryVariables>;
+export function refetchGetFreeAndActiveProjectsQuery(variables: GetFreeAndActiveProjectsQueryVariables) {
+      return { query: GetFreeAndActiveProjectsDocument, variables: variables }
+    }
 export const GetOneUserDocument = gql`
     query getOneUser($userId: uuid!) {
   user(id: $userId) {

dashboard/src/utils/discordAnnounce.ts

@@ -4,6 +4,10 @@ import { isDevOrStaging } from './helpers';
  * @param content {string} This string to log on the particular channel.
  */
 export const discordAnnounce = async (content: string) => {
+  if (!process.env.NEXT_PUBLIC_DISCORD_LOGGING) {
+    return;
+  }
+
   const username = isDevOrStaging() ? 'console-next(dev)' : 'console-next';
 
   const params = {

integrations/apollo/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nhost/apollo
 
+## 5.1.1
+
+### Patch Changes
+
+- @nhost/nhost-js@2.1.1
+
 ## 5.1.0
 
 ### Patch Changes

integrations/apollo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/apollo",
-  "version": "5.1.0",
+  "version": "5.1.1",
   "description": "Nhost Apollo Client library",
   "license": "MIT",
   "keywords": [

integrations/react-apollo/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @nhost/react-apollo
 
+## 5.0.12
+
+### Patch Changes
+
+- @nhost/apollo@5.1.1
+- @nhost/react@2.0.11
+
 ## 5.0.11
 
 ### Patch Changes

integrations/react-apollo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/react-apollo",
-  "version": "5.0.11",
+  "version": "5.0.12",
   "description": "Nhost React Apollo client",
   "license": "MIT",
   "keywords": [

integrations/react-urql/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nhost/react-urql
 
+## 2.0.11
+
+### Patch Changes
+
+- @nhost/react@2.0.11
+
 ## 2.0.10
 
 ### Patch Changes

integrations/react-urql/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/react-urql",
-  "version": "2.0.10",
+  "version": "2.0.11",
   "description": "Nhost React URQL client",
   "license": "MIT",
   "keywords": [

packages/hasura-storage-js/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nhost/hasura-storage-js
 
+## 2.0.4
+
+### Patch Changes
+
+- 614f213e: fix(hasura-storage-js): allow image transformation parameters in `getPresignedUrl`
+
 ## 2.0.3
 
 ### Patch Changes

packages/hasura-storage-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/hasura-storage-js",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "Hasura-storage client",
   "license": "MIT",
   "keywords": [
@@ -47,6 +47,7 @@
     "e2e": "start-test e2e:backend http-get://localhost:9695 ci:test",
     "ci:test": "vitest run",
     "e2e:backend": "nhost dev --no-browser",
+    "test": "vitest --config ./vite.unit.config.js",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
     "prettier": "prettier --check src/",

packages/hasura-storage-js/src/hasura-storage-client.ts

@@ -129,6 +129,7 @@ export class HasuraStorageClient {
   async getPresignedUrl(
     params: StorageGetPresignedUrlParams
   ): Promise<StorageGetPresignedUrlResponse> {
+    const { fileId, ...imageTransformationParams } = params
     const { presignedUrl, error } = await this.api.getPresignedUrl(params)
     if (error) {
       return { presignedUrl: null, error }
@@ -138,7 +139,18 @@ export class HasuraStorageClient {
       return { presignedUrl: null, error: new Error('Invalid file id') }
     }
 
-    return { presignedUrl, error: null }
+    const urlWithTransformationParams = appendImageTransformationParameters(
+      presignedUrl.url,
+      imageTransformationParams
+    )
+
+    return {
+      presignedUrl: {
+        ...presignedUrl,
+        url: urlWithTransformationParams
+      },
+      error: null
+    }
   }
 
   /**

packages/hasura-storage-js/src/utils/appendImageTransformationParameters/appendImageTransformationParameters.test.ts

@@ -0,0 +1,41 @@
+import { expect, test } from 'vitest'
+import appendImageTransformationParameters from './appendImageTransformationParameters'
+
+test('should append image transformation parameters to a simple URL', () => {
+  expect(
+    appendImageTransformationParameters('https://example.com/', {
+      width: 100,
+      height: 100,
+      blur: 50,
+      quality: 80
+    })
+  ).toBe('https://example.com/?w=100&h=100&b=50&q=80')
+})
+
+test('should append image transformation parameters to a URL with existing query parameters', () => {
+  expect(
+    appendImageTransformationParameters('https://example.com/?foo=bar', {
+      width: 100,
+      height: 100,
+      blur: 50,
+      quality: 80
+    })
+  ).toBe('https://example.com/?foo=bar&w=100&h=100&b=50&q=80')
+})
+
+test('should not append falsy values', () => {
+  expect(
+    appendImageTransformationParameters('https://example.com/', {
+      width: undefined,
+      height: 100,
+      blur: undefined,
+      quality: 80
+    })
+  ).toBe('https://example.com/?h=100&q=80')
+})
+
+test('should keep the original URL if no transformation parameters are provided', () => {
+  expect(appendImageTransformationParameters('https://example.com/', {})).toBe(
+    'https://example.com/'
+  )
+})

packages/hasura-storage-js/src/utils/appendImageTransformationParameters/appendImageTransformationParameters.ts

@@ -0,0 +1,36 @@
+import { StorageImageTransformationParams } from '../types'
+
+/**
+ * Appends image transformation parameters to the URL. If the URL already
+ * contains query parameters, the transformation parameters are appended to
+ * the existing query parameters.
+ *
+ * @internal
+ * @param url - The URL to append the transformation parameters to.
+ * @param params - The image transformation parameters.
+ * @returns The URL with the transformation parameters appended.
+ */
+export default function appendImageTransformationParameters(
+  url: string,
+  params: StorageImageTransformationParams
+): string {
+  const urlObject = new URL(url)
+
+  // create an object with the transformation parameters by using the first
+  // character of the parameter name as the key
+  const imageTransformationParams = Object.entries(params).reduce(
+    (accumulator, [key, value]) => ({ ...accumulator, [key.charAt(0)]: value }),
+    {} as Record<string, any>
+  )
+
+  // set the query parameters in the URL object
+  Object.entries(imageTransformationParams).forEach(([key, value]) => {
+    if (!value) {
+      return
+    }
+
+    urlObject.searchParams.set(key, value)
+  })
+
+  return urlObject.toString()
+}

packages/hasura-storage-js/src/utils/appendImageTransformationParameters/index.ts

@@ -0,0 +1 @@
+export { default as appendImageTransformationParameters } from './appendImageTransformationParameters'

packages/hasura-storage-js/src/utils/index.ts

@@ -1,13 +1,2 @@
-import { StorageImageTransformationParams } from './types'
-
+export * from './appendImageTransformationParameters'
 export * from './types'
-
-export const appendImageTransformationParameters = (
-  url: string,
-  params: StorageImageTransformationParams
-): string => {
-  const queryParameters = Object.entries(params)
-    .map(([key, value]) => `${key.charAt(0)}=${value}`)
-    .join('&')
-  return queryParameters ? `${url}?${queryParameters}` : url
-}

packages/hasura-storage-js/src/utils/types.ts

@@ -65,9 +65,7 @@ export interface StorageGetUrlParams extends StorageImageTransformationParams {
   fileId: string
 }
 
-// TODO not implemented yet in hasura-storage
-// export interface StorageGetPresignedUrlParams extends StorageImageTransformationParams {
-export interface StorageGetPresignedUrlParams {
+export interface StorageGetPresignedUrlParams extends StorageImageTransformationParams {
   fileId: string
 }
 

packages/hasura-storage-js/vite.unit.config.js

@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite'
+
+import baseConfig from '../../config/vite.lib.config'
+
+const PWD = process.env.PWD
+
+export default defineConfig({
+  ...baseConfig,
+  test: {
+    ...(baseConfig.test || {}),
+    testTimeout: 30000,
+    environment: 'node',
+    include: [`${PWD}/src/**/*.{spec,test}.{ts,tsx}`]
+  }
+})

packages/nextjs/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nhost/nextjs
 
+## 1.13.17
+
+### Patch Changes
+
+- @nhost/react@2.0.11
+
 ## 1.13.16
 
 ### Patch Changes

packages/nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/nextjs",
-  "version": "1.13.16",
+  "version": "1.13.17",
   "description": "Nhost NextJS library",
   "license": "MIT",
   "keywords": [

packages/nhost-js/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @nhost/nhost-js
 
+## 2.1.1
+
+### Patch Changes
+
+- Updated dependencies [614f213e]
+  - @nhost/hasura-storage-js@2.0.4
+
 ## 2.1.0
 
 ### Minor Changes

packages/nhost-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/nhost-js",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "Nhost JavaScript SDK",
   "license": "MIT",
   "keywords": [

packages/react/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nhost/react
 
+## 2.0.11
+
+### Patch Changes
+
+- @nhost/nhost-js@2.1.1
+
 ## 2.0.10
 
 ### Patch Changes

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/react",
-  "version": "2.0.10",
+  "version": "2.0.11",
   "description": "Nhost React library",
   "license": "MIT",
   "keywords": [

packages/vue/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nhost/vue
 
+## 1.13.17
+
+### Patch Changes
+
+- @nhost/nhost-js@2.1.1
+
 ## 1.13.16
 
 ### Patch Changes

packages/vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/vue",
-  "version": "1.13.16",
+  "version": "1.13.17",
   "description": "Nhost Vue library",
   "license": "MIT",
   "keywords": [