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

chore: update versions

.github/workflows/ci.yaml

@@ -146,7 +146,7 @@ jobs:
         run: echo "NHOST_TEST_DASHBOARD_URL=https://${{ steps.fetch-dashboard-preview-url.outputs.preview_url }}" >> $GITHUB_ENV
       # * Run the `ci` script of the current package of the matrix. Dependencies build is cached by Turborepo
       - name: Run e2e tests
-        timeout-minutes: 7
+        timeout-minutes: 15
         run: pnpm --filter="${{ matrix.package.name }}" run e2e
       - id: file-name
         if: ${{ failure() }}

dashboard/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @nhost/dashboard
 
+## 0.20.7
+
+### Patch Changes
+
+- 4a7ede11e: fix: distinguish files that were not uploaded
+- 202b64723: feat(nhost-run): add support for one-click-install run services
+- 074a0fa11: feat(dashboard): add settings toggle to enable/disable antivirus
+  - @nhost/react-apollo@5.0.33
+  - @nhost/nextjs@1.13.35
+
+## 0.20.6
+
+### Patch Changes
+
+- b20761e97: feat(services): add pricing info and confirmation dialog
+- 90df6d81d: fix(services): handle null values when editing a service
+- aa8508467: fix: query service logs correctly
+  feat: enable multiline support for environment value input
+
+## 0.20.5
+
+### Patch Changes
+
+- 8d7f84b8d: fix: make announcement adapt to theme
+
+## 0.20.4
+
+### Patch Changes
+
+- 3b75bfce2: fix: make announcement close properly
+- f49819075: fix: show correct values when dedicated resources are disabled
+
 ## 0.20.3
 
 ### Patch Changes

dashboard/package.json

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

dashboard/src/components/common/Announcement/Announcement.tsx

@@ -1,7 +1,7 @@
 import { Button } from '@/components/ui/v2/Button';
 import { ArrowRightIcon } from '@/components/ui/v2/icons/ArrowRightIcon';
 import { XIcon } from '@/components/ui/v2/icons/XIcon';
-import Link from 'next/link';
+import { Text } from '@/components/ui/v2/Text';
 import { forwardRef, type ForwardedRef } from 'react';
 import { twMerge } from 'tailwind-merge';
 import AnnouncementContainer, {
@@ -38,11 +38,11 @@ function Announcement(
       <span />
 
       <div className="flex items-center self-center truncate">
-        <Link href={href}>
-          <span className="cursor-pointer truncate hover:underline">
+        <a href={href}>
+          <Text className="cursor-pointer truncate hover:underline">
             {children}
-          </span>
-        </Link>
+          </Text>
+        </a>
         <ArrowRightIcon className="ml-1 h-4 w-4 text-white" />
       </div>
 

dashboard/src/components/common/Announcement/AnnouncementProvider.tsx

@@ -1,3 +1,4 @@
+import { Divider } from '@/components/ui/v2/Divider';
 import {
   createContext,
   useEffect,
@@ -35,7 +36,12 @@ export interface AnnouncementContextProps {
 }
 
 // Note: You can define the active announcement here.
-let announcement: AnnouncementType;
+const announcement: AnnouncementType = {
+  id: 'nhost-run',
+  href: 'https://discord.com/invite/9V7Qb2U',
+  content:
+    'Now you can bring custom and third-party OSS services to run alongside your Nhost projects',
+};
 
 export const AnnouncementContext = createContext<AnnouncementContextProps>({});
 
@@ -68,9 +74,16 @@ export default function AnnouncementProvider({ children }: PropsWithChildren) {
   return (
     <AnnouncementContext.Provider value={announcementValue}>
       {announcement && showAnnouncement && (
-        <Announcement ref={ref} href={announcement.href} onClose={handleClose}>
-          {announcement.content}
-        </Announcement>
+        <>
+          <Announcement
+            ref={ref}
+            href={announcement.href}
+            onClose={handleClose}
+          >
+            {announcement.content}
+          </Announcement>
+          <Divider />
+        </>
       )}
 
       {children}

dashboard/src/components/common/Announcement/index.ts

@@ -1,2 +1,3 @@
 export * from './Announcement';
 export * from './AnnouncementProvider';
+export { default as useAnnouncement } from './useAnnouncement';

dashboard/src/components/common/Announcement/useAnnouncement.ts

@@ -0,0 +1,14 @@
+import { useContext } from 'react';
+import { AnnouncementContext } from './AnnouncementProvider';
+
+export default function useAnnouncement() {
+  const context = useContext(AnnouncementContext);
+
+  if (!context) {
+    throw new Error(
+      'useAnnouncement must be used within an AnnouncementProvider',
+    );
+  }
+
+  return context;
+}

dashboard/src/components/dataGrid/DataGridBody/DataGridBody.tsx

@@ -178,6 +178,22 @@ export default function DataGridBody<T extends object>({
     }
   }
 
+  const getBackgroundCellColor = (
+    row: Row<T>,
+    column: DataBrowserGridColumn<T>,
+  ) => {
+    // Grey out files not uploaded
+    if (!row.values.isUploaded) {
+      return 'grey.200';
+    }
+
+    if (column.isDisabled) {
+      return 'grey.100';
+    }
+
+    return 'background.paper';
+  };
+
   return (
     <div {...getTableBodyProps()} ref={bodyRef} {...props}>
       {rows.length === 0 && !loading && (
@@ -260,9 +276,7 @@ export default function DataGridBody<T extends object>({
                     })}
                     cell={cell}
                     sx={{
-                      backgroundColor: column.isDisabled
-                        ? 'grey.100'
-                        : 'background.paper',
+                      backgroundColor: getBackgroundCellColor(row, column),
                       color: isCellDisabled ? 'text.secondary' : 'text.primary',
                     }}
                     className={twMerge(

dashboard/src/components/layout/Header/Header.tsx

@@ -1,4 +1,3 @@
-import Announcement from '@/components/common/Announcement/Announcement';
 import { FeedbackForm } from '@/components/common/FeedbackForm';
 import { NavLink } from '@/components/common/NavLink';
 import { AccountMenu } from '@/components/layout/AccountMenu';
@@ -8,7 +7,6 @@ import { MobileNav } from '@/components/layout/MobileNav';
 import { Logo } from '@/components/presentational/Logo';
 import { Box } from '@/components/ui/v2/Box';
 import { Chip } from '@/components/ui/v2/Chip';
-import { Divider } from '@/components/ui/v2/Divider';
 import { Dropdown } from '@/components/ui/v2/Dropdown';
 import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
 import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
@@ -47,75 +45,66 @@ export default function Header({ className, ...props }: HeaderProps) {
   }, [isProjectUpdating, refetchProject]);
 
   return (
-    <div>
-      <Announcement href="https://discord.com/invite/9V7Qb2U">
-        You can now run custom and third-party OSS services alongside your Nhost
-        projects, please reach out to us to get access to the private beta
-      </Announcement>
+    <Box
+      component="header"
+      className={twMerge(
+        'z-40 grid w-full transform-gpu grid-flow-col items-center justify-between gap-2 border-b-1 px-4 py-3',
+        className,
+      )}
+      sx={{ backgroundColor: 'background.paper' }}
+      {...props}
+    >
+      <div className="grid grid-flow-col items-center gap-3 ">
+        <NavLink href="/" className="w-12">
+          <Logo className="mx-auto cursor-pointer" />
+        </NavLink>
 
-      <Divider />
-
-      <Box
-        component="header"
-        className={twMerge(
-          'z-40 grid w-full transform-gpu grid-flow-col items-center justify-between gap-2 border-b-1 px-4 py-3',
-          className,
+        {(router.query.workspaceSlug || router.query.appSlug) && (
+          <Breadcrumbs aria-label="Workspace breadcrumbs" />
         )}
-        sx={{ backgroundColor: 'background.paper' }}
-        {...props}
-      >
-        <div className="grid grid-flow-col items-center gap-3 ">
-          <NavLink href="/" className="w-12">
-            <Logo className="mx-auto cursor-pointer" />
-          </NavLink>
 
-          {(router.query.workspaceSlug || router.query.appSlug) && (
-            <Breadcrumbs aria-label="Workspace breadcrumbs" />
-          )}
+        {isProjectUpdating && (
+          <Chip size="small" label="Updating" color="warning" />
+        )}
+      </div>
 
-          {isProjectUpdating && (
-            <Chip size="small" label="Updating" color="warning" />
-          )}
-        </div>
+      <div className="hidden grid-flow-col items-center gap-2 sm:grid">
+        {isPlatform && (
+          <Dropdown.Root>
+            <Dropdown.Trigger
+              hideChevron
+              className="rounded-md px-2.5 py-1.5 text-sm motion-safe:transition-colors"
+            >
+              Feedback
+            </Dropdown.Trigger>
 
-        <div className="hidden grid-flow-col items-center gap-2 sm:grid">
-          {isPlatform && (
-            <Dropdown.Root>
-              <Dropdown.Trigger
-                hideChevron
-                className="rounded-md px-2.5 py-1.5 text-sm motion-safe:transition-colors"
-              >
-                Feedback
-              </Dropdown.Trigger>
+            <Dropdown.Content
+              transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+              anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+            >
+              <FeedbackForm className="max-w-md" />
+            </Dropdown.Content>
+          </Dropdown.Root>
+        )}
 
-              <Dropdown.Content
-                transformOrigin={{ vertical: 'top', horizontal: 'right' }}
-                anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-              >
-                <FeedbackForm className="max-w-md" />
-              </Dropdown.Content>
-            </Dropdown.Root>
-          )}
+        <NavLink
+          underline="none"
+          href="https://docs.nhost.io"
+          className="mr-2 rounded-md px-2.5 py-1.5 text-sm motion-safe:transition-colors"
+          sx={{
+            color: 'text.primary',
+            '&:hover': { backgroundColor: 'grey.200' },
+          }}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Docs
+        </NavLink>
 
-          <NavLink
-            underline="none"
-            href="https://docs.nhost.io"
-            className="mr-2 rounded-md px-2.5 py-1.5 text-sm motion-safe:transition-colors"
-            sx={{
-              color: 'text.primary',
-              '&:hover': { backgroundColor: 'grey.200' },
-            }}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Docs
-          </NavLink>
+        {isPlatform ? <AccountMenu /> : <LocalAccountMenu />}
+      </div>
 
-          {isPlatform ? <AccountMenu /> : <LocalAccountMenu />}
-        </div>
-
-        <MobileNav className="sm:hidden" />
-      </Box>
-    </div>
+      <MobileNav className="sm:hidden" />
+    </Box>
   );
 }

dashboard/src/features/projects/common/hooks/useHostName/index.ts

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

dashboard/src/features/projects/common/hooks/useHostName/useHostName.ts

@@ -0,0 +1,12 @@
+import { useEffect, useState } from 'react';
+
+export default function useHostName() {
+  const [hostName, setHostName] = useState('');
+
+  useEffect(() => {
+    const { port, hostname, protocol } = window.location;
+    setHostName(`${protocol}//${hostname}:${port}`);
+  }, []);
+
+  return hostName;
+}

dashboard/src/features/projects/logs/components/LogsHeader/LogsHeader.tsx

@@ -154,10 +154,12 @@ export default function LogsHeader({
       const services = data.app?.runServices ?? [];
 
       setRunServices(
-        services.map((s) => ({
-          label: s.config.name,
-          value: s.config.name,
-        })),
+        services
+          .filter((s) => !!s.config?.name)
+          .map((s) => ({
+            label: s.config.name,
+            value: `run-${s.config.name}`,
+          })),
       );
     }
   }, [loading, data]);

dashboard/src/features/projects/resources/settings/components/ResourcesConfirmationDialog/ResourcesConfirmationDialog.tsx

@@ -68,11 +68,15 @@ export default function ResourcesConfirmationDialog({
   const totalBillableVCPU = formValues.enabled ? billableResources.vcpu : 0;
   const totalBillableMemory = formValues.enabled ? billableResources.memory : 0;
 
-  const updatedPrice =
-    Math.max(
-      priceForTotalAvailableVCPU,
-      (billableResources.vcpu / RESOURCE_VCPU_MULTIPLIER) * RESOURCE_VCPU_PRICE,
-    ) + proPlan.price;
+  const { enabled } = formValues;
+
+  const updatedPrice = enabled
+    ? Math.max(
+        priceForTotalAvailableVCPU,
+        (billableResources.vcpu / RESOURCE_VCPU_MULTIPLIER) *
+          RESOURCE_VCPU_PRICE,
+      ) + proPlan.price
+    : proPlan.price;
 
   if (!loading && !proPlan) {
     return (
@@ -86,18 +90,30 @@ export default function ResourcesConfirmationDialog({
     throw error;
   }
 
+  const databaseVCPU = enabled ? formValues.database.vcpu : 0;
+  const databaseMemory = enabled ? formValues.database.memory : 0;
+
+  const hasuraVCPU = enabled ? formValues.hasura.vcpu : 0;
+  const hasuraMemory = enabled ? formValues.hasura.memory : 0;
+
+  const authVCPU = enabled ? formValues.auth.vcpu : 0;
+  const authMemory = enabled ? formValues.auth.memory : 0;
+
+  const storageVCPU = enabled ? formValues.storage.vcpu : 0;
+  const storageMemory = enabled ? formValues.storage.memory : 0;
+
   const databaseResources = `${prettifyVCPU(
-    formValues.database.vcpu,
-  )} vCPU + ${prettifyMemory(formValues.database.memory)}`;
-  const hasuraResources = `${prettifyVCPU(
-    formValues.hasura.vcpu,
-  )} vCPU + ${prettifyMemory(formValues.hasura.memory)}`;
-  const authResources = `${prettifyVCPU(
-    formValues.auth.vcpu,
-  )} vCPU + ${prettifyMemory(formValues.auth.memory)}`;
+    databaseVCPU,
+  )} vCPU + ${prettifyMemory(databaseMemory)}`;
+  const hasuraResources = `${prettifyVCPU(hasuraVCPU)} vCPU + ${prettifyMemory(
+    hasuraMemory,
+  )}`;
+  const authResources = `${prettifyVCPU(authVCPU)} vCPU + ${prettifyMemory(
+    authMemory,
+  )}`;
   const storageResources = `${prettifyVCPU(
-    formValues.storage.vcpu,
-  )} vCPU + ${prettifyMemory(formValues.storage.memory)}`;
+    storageVCPU,
+  )} vCPU + ${prettifyMemory(storageMemory)}`;
 
   return (
     <div className="grid grid-flow-row gap-6 px-6 pb-6">

dashboard/src/features/projects/resources/settings/utils/resourceSettingsValidationSchema/resourceSettingsValidationSchema.ts

@@ -155,3 +155,4 @@ export const MIN_SERVICES_CPU = Math.floor(128 / MEM_CPU_RATIO);
 export const MIN_SERVICES_MEM = 128;
 export const MAX_SERVICES_CPU = 7000;
 export const MAX_SERVICES_MEM = Math.floor(MAX_SERVICES_CPU * MEM_CPU_RATIO);
+export const COST_PER_VCPU = 0.05;

dashboard/src/features/services/components/ServiceForm/ServiceForm.tsx

@@ -3,13 +3,17 @@ import { Form } from '@/components/form/Form';
 import { Alert } from '@/components/ui/v2/Alert';
 import { Box } from '@/components/ui/v2/Box';
 import { Button } from '@/components/ui/v2/Button';
+import { CopyIcon } from '@/components/ui/v2/icons/CopyIcon';
 import { InfoIcon } from '@/components/ui/v2/icons/InfoIcon';
+import { PlusIcon } from '@/components/ui/v2/icons/PlusIcon';
 import { Input } from '@/components/ui/v2/Input';
 import { Text } from '@/components/ui/v2/Text';
 import { Tooltip } from '@/components/ui/v2/Tooltip';
 import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { useHostName } from '@/features/projects/common/hooks/useHostName';
 import { InfoCard } from '@/features/projects/overview/components/InfoCard';
 import {
+  COST_PER_VCPU,
   MAX_SERVICES_CPU,
   MAX_SERVICES_MEM,
   MAX_SERVICE_REPLICAS,
@@ -22,7 +26,9 @@ import { PortsFormSection } from '@/features/services/components/ServiceForm/com
 import { ReplicasFormSection } from '@/features/services/components/ServiceForm/components/ReplicasFormSection';
 import { StorageFormSection } from '@/features/services/components/ServiceForm/components/StorageFormSection';
 import type { DialogFormProps } from '@/types/common';
+import { RESOURCE_VCPU_MULTIPLIER } from '@/utils/constants/common';
 import { getToastStyleProps } from '@/utils/constants/settings';
+import { copy } from '@/utils/copy';
 import {
   useInsertRunServiceConfigMutation,
   useInsertRunServiceMutation,
@@ -36,6 +42,7 @@ import { FormProvider, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
 import { parse } from 'shell-quote';
 import * as Yup from 'yup';
+import { ServiceConfirmationDialog } from './components/ServiceConfirmationDialog';
 
 export enum PortTypes {
   HTTP = 'http',
@@ -106,7 +113,8 @@ export default function ServiceForm({
   onCancel,
   location,
 }: ServiceFormProps) {
-  const { onDirtyStateChange } = useDialog();
+  const hostName = useHostName();
+  const { onDirtyStateChange, openDialog, closeDialog } = useDialog();
   const [insertRunService] = useInsertRunServiceMutation();
   const { currentProject } = useCurrentWorkspaceAndProject();
   const [insertRunServiceConfig] = useInsertRunServiceConfigMutation();
@@ -133,6 +141,8 @@ export default function ServiceForm({
     formState: { errors, isSubmitting, dirtyFields },
   } = form;
 
+  const formValues = watch();
+
   const serviceImage = watch('image');
 
   const isDirty = Object.keys(dirtyFields).length > 0;
@@ -141,7 +151,7 @@ export default function ServiceForm({
     onDirtyStateChange(isDirty, location);
   }, [isDirty, location, onDirtyStateChange]);
 
-  const createOrUpdateService = async (values: ServiceFormValues) => {
+  const getFormattedConfig = (values: ServiceFormValues) => {
     const config: ConfigRunServiceConfigInsertInput = {
       name: values.name,
       image: {
@@ -171,7 +181,13 @@ export default function ServiceForm({
       })),
     };
 
-    if (initialData) {
+    return config;
+  };
+
+  const createOrUpdateService = async (values: ServiceFormValues) => {
+    const config = getFormattedConfig(values);
+
+    if (serviceID) {
       // Update service config
       await replaceRunServiceConfig({
         variables: {
@@ -246,10 +262,47 @@ export default function ServiceForm({
     }
   };
 
+  const handleConfirm = (values: ServiceFormValues) => {
+    openDialog({
+      title: 'Confirm Resources',
+      component: (
+        <ServiceConfirmationDialog
+          formValues={values}
+          onCancel={closeDialog}
+          onSubmit={async () => {
+            await handleSubmit(formValues);
+          }}
+        />
+      ),
+    });
+  };
+
+  const pricingExplanation = () => {
+    const vCPUs = `${formValues.compute.cpu / RESOURCE_VCPU_MULTIPLIER} vCPUs`;
+    const mem = `${formValues.compute.memory} MiB Mem`;
+    let details = `${vCPUs} + ${mem}`;
+
+    if (formValues.replicas > 1) {
+      details = `(${details}) x ${formValues.replicas} replicas`;
+    }
+
+    return `Approximate cost for ${details}`;
+  };
+
+  const copyConfig = () => {
+    const config = getFormattedConfig(formValues);
+
+    const base64Config = btoa(JSON.stringify(config));
+
+    const link = `${hostName}/run-one-click-install?config=${base64Config}`;
+
+    copy(link, 'Service Config');
+  };
+
   return (
     <FormProvider {...form}>
       <Form
-        onSubmit={handleSubmit}
+        onSubmit={handleConfirm}
         className="grid grid-flow-row gap-4 px-6 pb-6"
       >
         <Input
@@ -346,6 +399,23 @@ export default function ServiceForm({
           autoComplete="off"
         />
 
+        <Alert
+          severity="info"
+          className="flex items-center justify-between space-x-2"
+        >
+          <span>{pricingExplanation()}</span>
+          <b>
+            $
+            {parseFloat(
+              (
+                formValues.compute.cpu *
+                formValues.replicas *
+                COST_PER_VCPU
+              ).toFixed(2),
+            )}
+          </b>
+        </Alert>
+
         <ComputeFormSection />
 
         <ReplicasFormSection />
@@ -378,9 +448,24 @@ export default function ServiceForm({
           </Alert>
         )}
         <div className="grid grid-flow-row gap-2">
-          <Button type="submit" disabled={isSubmitting}>
-            {initialData ? 'Update' : 'Create'}
-          </Button>
+          <div className="grid grid-cols-2 gap-2">
+            <Button
+              type="submit"
+              disabled={isSubmitting}
+              startIcon={<PlusIcon />}
+            >
+              {serviceID ? 'Update' : 'Create'}
+            </Button>
+            <Button
+              color="secondary"
+              variant="outlined"
+              disabled={isSubmitting}
+              onClick={copyConfig}
+              startIcon={<CopyIcon />}
+            >
+              Copy one-click install link
+            </Button>
+          </div>
 
           <Button variant="outlined" color="secondary" onClick={onCancel}>
             Cancel

dashboard/src/features/services/components/ServiceForm/components/ComputeFormSection/ComputeFormSection.tsx

@@ -48,7 +48,8 @@ export default function ComputeFormSection() {
     <Box className="space-y-4 rounded border-1 p-4">
       <Box className="flex flex-row items-center space-x-2">
         <Text variant="h4" className="font-semibold">
-          vCPUs: {formValues.compute.cpu} / Memory: {formValues.compute.memory}
+          vCPUs: {formValues.compute.cpu / 1000} / Memory:{' '}
+          {formValues.compute.memory}
         </Text>
 
         <Tooltip

dashboard/src/features/services/components/ServiceForm/components/EnvironmentFormSection/EnvironmentFormSection.tsx

@@ -7,6 +7,7 @@ import { Input } from '@/components/ui/v2/Input';
 import { Text } from '@/components/ui/v2/Text';
 import { Tooltip } from '@/components/ui/v2/Tooltip';
 import type { ServiceFormValues } from '@/features/services/components/ServiceForm';
+import { useState } from 'react';
 import { useFieldArray, useFormContext } from 'react-hook-form';
 
 export default function EnvironmentFormSection() {
@@ -15,6 +16,8 @@ export default function EnvironmentFormSection() {
     formState: { errors },
   } = useFormContext<ServiceFormValues>();
 
+  const [focusedInput, setFocusedInput] = useState<string>(null);
+
   const { fields, append, remove } = useFieldArray({
     name: 'environment',
   });
@@ -49,42 +52,42 @@ export default function EnvironmentFormSection() {
 
       <Box className="flex flex-col space-y-4">
         {fields.map((field, index) => (
-          <Box
-            key={field.id}
-            className="flex w-full flex-col space-y-2 xs+:flex-row xs+:space-y-0 xs+:space-x-2"
-          >
-            <Input
-              {...register(`environment.${index}.name`)}
-              id={`${field.id}-name`}
-              label={!index && 'Name'}
-              placeholder={`Key ${index}`}
-              className="w-full"
-              hideEmptyHelperText
-              error={!!errors?.environment?.at(index)}
-              helperText={errors?.environment?.at(index)?.message}
-              fullWidth
-              autoComplete="off"
-            />
-            <Input
-              {...register(`environment.${index}.value`)}
-              id={`${field.id}-value`}
-              label={!index && 'Value'}
-              placeholder={`Value ${index}`}
-              className="w-full"
-              hideEmptyHelperText
-              error={!!errors?.environment?.at(index)}
-              helperText={errors?.environment?.at(index)?.message}
-              fullWidth
-              autoComplete="off"
-            />
-
+          <Box key={field.id} className="flex w-full items-center space-x-2">
+            <div className="flex w-full flex-col space-y-2">
+              <Input
+                {...register(`environment.${index}.name`)}
+                id={`${field.id}-name`}
+                placeholder={`Key ${index}`}
+                className="w-full"
+                hideEmptyHelperText
+                error={!!errors?.environment?.at(index)}
+                helperText={errors?.environment?.at(index)?.message}
+                fullWidth
+                autoComplete="off"
+              />
+              <Input
+                {...register(`environment.${index}.value`)}
+                id={`${field.id}-value`}
+                placeholder={`Value ${index}`}
+                className="w-full"
+                hideEmptyHelperText
+                error={!!errors?.environment?.at(index)}
+                helperText={errors?.environment?.at(index)?.message}
+                fullWidth
+                autoComplete="off"
+                multiline
+                maxRows={focusedInput === `${field.id}-value` ? 1000 : 1}
+                onFocusCapture={() => setFocusedInput(`${field.id}-value`)}
+                onBlurCapture={() => setFocusedInput(null)}
+              />
+            </div>
             <Button
               variant="borderless"
               className=""
               color="error"
               onClick={() => remove(index)}
             >
-              <TrashIcon className="h-4 w-4" />
+              <TrashIcon className="h-6 w-4" />
             </Button>
           </Box>
         ))}

dashboard/src/features/services/components/ServiceForm/components/PortsFormSection/PortsFormSection.tsx

@@ -45,7 +45,7 @@ export default function PortsFormSection() {
     const port = Number(_port) > 0 ? Number(_port) : '[port]';
     const name = _name && _name.length > 0 ? _name : '[name]';
 
-    return `https://${currentProject.subdomain}-${name}-${port}.svc.${currentProject.region.awsName}.${currentProject.region.domain}`;
+    return `https://${currentProject?.subdomain}-${name}-${port}.svc.${currentProject?.region.awsName}.${currentProject?.region.domain}`;
   };
 
   return (

dashboard/src/features/services/components/ServiceForm/components/ServiceConfirmationDialog/ServiceConfirmationDialog.tsx

@@ -0,0 +1,87 @@
+import { Box } from '@/components/ui/v2/Box';
+import { Button } from '@/components/ui/v2/Button';
+import { Divider } from '@/components/ui/v2/Divider';
+import { InfoIcon } from '@/components/ui/v2/icons/InfoIcon';
+import { Text } from '@/components/ui/v2/Text';
+import { Tooltip } from '@/components/ui/v2/Tooltip';
+import { COST_PER_VCPU } from '@/features/projects/resources/settings/utils/resourceSettingsValidationSchema';
+import type { ServiceFormValues } from '@/features/services/components/ServiceForm';
+import { RESOURCE_VCPU_MULTIPLIER } from '@/utils/constants/common';
+
+export interface ServiceConfirmationDialogProps {
+  /**
+   * The updated resources that the user has selected.
+   */
+  formValues: ServiceFormValues;
+  /**
+   * Function to be called when the user clicks the cancel button.
+   */
+  onCancel: () => void;
+  /**
+   * Function to be called when the user clicks the confirm button.
+   */
+  onSubmit: () => Promise<void>;
+}
+
+export default function ServiceConfirmationDialog({
+  formValues,
+  onCancel,
+  onSubmit,
+}: ServiceConfirmationDialogProps) {
+  const approximatePriceForService = parseFloat(
+    (formValues.compute.cpu * formValues.replicas * COST_PER_VCPU).toFixed(2),
+  );
+
+  return (
+    <div className="grid grid-flow-row gap-6 px-6 pb-6">
+      <Box className="grid grid-flow-row gap-4">
+        <Box className="grid grid-flow-row gap-1.5">
+          <Box className="grid grid-flow-col items-center justify-between gap-2">
+            <Box className="grid grid-flow-row gap-0.5">
+              <Text color="secondary">vCPUs</Text>
+            </Box>
+            <Text>{formValues.compute.cpu / RESOURCE_VCPU_MULTIPLIER}</Text>
+          </Box>
+
+          <Box className="grid grid-flow-col items-center justify-between gap-2">
+            <Box className="grid grid-flow-row gap-0.5">
+              <Text color="secondary">Memory</Text>
+            </Box>
+            <Text>{formValues.compute.memory} MiB</Text>
+          </Box>
+
+          <Box className="grid grid-flow-col items-center justify-between gap-2">
+            <Box className="grid grid-flow-row gap-0.5">
+              <Text color="secondary">Replicas</Text>
+            </Box>
+            <Text>{formValues.replicas}</Text>
+          </Box>
+        </Box>
+
+        <Divider />
+
+        <Box className="grid grid-flow-col justify-between gap-2">
+          <Box className="grid grid-flow-col items-center gap-1.5">
+            <Text className="font-medium">Approximate Cost</Text>
+
+            <Tooltip title="$0.0012/minute for every 1 vCPU and 2 GiB of RAM">
+              <InfoIcon aria-label="Info" className="h-4 w-4" color="primary" />
+            </Tooltip>
+          </Box>
+
+          <Text>${approximatePriceForService}/mo</Text>
+        </Box>
+      </Box>
+
+      <Box className="grid grid-flow-row gap-2">
+        <Button color="primary" onClick={onSubmit} autoFocus>
+          Confirm
+        </Button>
+
+        <Button variant="borderless" color="secondary" onClick={onCancel}>
+          Cancel
+        </Button>
+      </Box>
+    </div>
+  );
+}

dashboard/src/features/services/components/ServiceForm/components/ServiceConfirmationDialog/index.ts

@@ -0,0 +1,2 @@
+export * from './ServiceConfirmationDialog';
+export { default as ServiceConfirmationDialog } from './ServiceConfirmationDialog';

dashboard/src/features/services/components/ServicesList/ServicesList.tsx

@@ -77,17 +77,17 @@ export default function ServicesList({
             ...service.config,
             image: service.config?.image?.image,
             command: service.config?.command?.join(' '),
-            ports: service.config?.ports.map((item) => ({
+            ports: service.config?.ports?.map((item) => ({
               port: item.port,
               type: item.type as PortTypes,
               publish: item.publish,
             })),
-            compute: service.config?.resources.compute ?? {
+            compute: service.config?.resources?.compute ?? {
               cpu: 62,
               memory: 128,
             },
-            replicas: service.config?.resources.replicas,
-            storage: service.config?.resources.storage,
+            replicas: service.config?.resources?.replicas,
+            storage: service.config?.resources?.storage,
           }}
           onSubmit={() => onCreateOrUpdate()}
         />

dashboard/src/features/storage/settings/components/HasuraStorageAVSettings/HasuraStorageAVSettings.tsx

@@ -0,0 +1,121 @@
+import { useUI } from '@/components/common/UIProvider';
+import { Form } from '@/components/form/Form';
+import { SettingsContainer } from '@/components/layout/SettingsContainer';
+import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import {
+  GetHasuraSettingsDocument,
+  useGetStorageSettingsQuery,
+  useUpdateConfigMutation,
+} from '@/generated/graphql';
+import { getToastStyleProps } from '@/utils/constants/settings';
+import { getServerError } from '@/utils/getServerError';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { FormProvider, useForm } from 'react-hook-form';
+import { toast } from 'react-hot-toast';
+import * as Yup from 'yup';
+
+const validationSchema = Yup.object({
+  enabled: Yup.boolean(),
+});
+
+export type HasuraStorageAVFormValues = Yup.InferType<typeof validationSchema>;
+
+export default function HasuraStorageAVSettings() {
+  const { maintenanceActive } = useUI();
+  const { currentProject, refetch: refetchWorkspaceAndProject } =
+    useCurrentWorkspaceAndProject();
+  const [updateConfig] = useUpdateConfigMutation({
+    refetchQueries: [GetHasuraSettingsDocument],
+  });
+
+  const { data, loading, error } = useGetStorageSettingsQuery({
+    variables: { appId: currentProject?.id },
+    fetchPolicy: 'cache-first',
+  });
+
+  const { server } = data?.config?.storage?.antivirus || {};
+
+  const form = useForm<HasuraStorageAVFormValues>({
+    reValidateMode: 'onSubmit',
+    defaultValues: {
+      enabled: !!server,
+    },
+    resolver: yupResolver(validationSchema),
+  });
+
+  if (loading) {
+    return (
+      <ActivityIndicator
+        delay={1000}
+        label="Loading AV settings..."
+        className="justify-center"
+      />
+    );
+  }
+
+  if (error) {
+    throw error;
+  }
+
+  async function handleSubmit(formValues: HasuraStorageAVFormValues) {
+    let antivirus = null;
+
+    if (formValues.enabled) {
+      antivirus = {
+        server: 'tcp://run-clamav:3310',
+      };
+    }
+
+    const updateConfigPromise = updateConfig({
+      variables: {
+        appId: currentProject.id,
+        config: {
+          storage: {
+            antivirus,
+          },
+        },
+      },
+    });
+
+    try {
+      await toast.promise(
+        updateConfigPromise,
+        {
+          loading: `Antivirus settings are being updated...`,
+          success: `Antivirus settings have been updated successfully.`,
+          error: getServerError(
+            `An error occurred while trying to update Antivirus settings.`,
+          ),
+        },
+        getToastStyleProps(),
+      );
+
+      form.reset(formValues);
+      await refetchWorkspaceAndProject();
+    } catch {
+      // Note: The toast will handle the error.
+    }
+  }
+
+  return (
+    <FormProvider {...form}>
+      <Form onSubmit={handleSubmit}>
+        <SettingsContainer
+          title="Antivirus"
+          description="Enable or disable Antivirus."
+          slotProps={{
+            submitButton: {
+              disabled: !form.formState.isDirty || maintenanceActive,
+              loading: form.formState.isSubmitting,
+            },
+          }}
+          switchId="enabled"
+          docsTitle="enabling or disabling Antivirus"
+          showSwitch
+          className="hidden"
+        />
+      </Form>
+    </FormProvider>
+  );
+}

dashboard/src/features/storage/settings/components/HasuraStorageAVSettings/index.ts

@@ -0,0 +1,2 @@
+export * from './HasuraStorageAVSettings';
+export { default as HasuraStorageAVSettings } from './HasuraStorageAVSettings';

dashboard/src/features/storage/settings/gql/getStorageSettings.gql

@@ -4,6 +4,9 @@ query GetStorageSettings($appId: uuid!) {
     __typename
     storage {
       version
+      antivirus {
+        server
+      }
     }
   }
 }

dashboard/src/pages/[workspaceSlug]/[appSlug]/services/index.tsx

@@ -13,20 +13,35 @@ import type { GetRunServicesQuery } from '@/utils/__generated__/graphql';
 import { useGetRunServicesQuery } from '@/utils/__generated__/graphql';
 
 import { UpgradeNotification } from '@/features/projects/common/components/UpgradeNotification';
-import { ServiceForm } from '@/features/services/components/ServiceForm';
+import {
+  ServiceForm,
+  type PortTypes,
+} from '@/features/services/components/ServiceForm';
 import ServicesList from '@/features/services/components/ServicesList/ServicesList';
 import { useRouter } from 'next/router';
-import { useEffect, useMemo, useRef, useState, type ReactElement } from 'react';
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactElement,
+} from 'react';
 
 export type RunService = Omit<
   GetRunServicesQuery['app']['runServices'][0],
   '__typename'
 >;
 
+export type RunServiceConfig = Omit<
+  GetRunServicesQuery['app']['runServices'][0]['config'],
+  '__typename'
+>;
+
 export default function ServicesPage() {
   const limit = useRef(25);
   const router = useRouter();
-  const { openDrawer } = useDialog();
+  const { openDrawer, openAlertDialog } = useDialog();
   const { currentProject } = useCurrentWorkspaceAndProject();
   const isPlanFree = currentProject.plan.isFree;
 
@@ -66,6 +81,63 @@ export default function ServicesPage() {
     [data],
   );
 
+  const checkConfigFromQuery = useCallback(
+    (base64Config: string) => {
+      if (router.query?.config) {
+        try {
+          const decodedConfig = atob(base64Config);
+          const parsedConfig: RunServiceConfig = JSON.parse(decodedConfig);
+
+          openDrawer({
+            title: (
+              <Box className="flex flex-row items-center space-x-2">
+                <CubeIcon className="h-5 w-5" />
+                <Text>Create a new run service</Text>
+              </Box>
+            ),
+            component: (
+              <ServiceForm
+                initialData={{
+                  ...parsedConfig,
+                  compute: parsedConfig?.resources?.compute ?? {
+                    cpu: 62,
+                    memory: 128,
+                  },
+                  image: parsedConfig?.image?.image,
+                  command: parsedConfig?.command?.join(' '),
+                  ports: parsedConfig?.ports.map((item) => ({
+                    port: item.port,
+                    type: item.type as PortTypes,
+                    publish: item.publish,
+                  })),
+                  replicas: parsedConfig?.resources?.replicas,
+                  storage: parsedConfig?.resources?.storage,
+                }}
+                onSubmit={refetchServices}
+              />
+            ),
+          });
+        } catch (error) {
+          openAlertDialog({
+            title: 'Configuration not set properly',
+            payload: 'The service configuration was not properly encoded',
+            props: {
+              primaryButtonText: 'Ok',
+              hideSecondaryAction: true,
+            },
+          });
+        }
+      }
+    },
+    [router.query.config, openDrawer, refetchServices, openAlertDialog],
+  );
+
+  useEffect(() => {
+    if (router.query?.config) {
+      checkConfigFromQuery(router.query?.config as string);
+    }
+  }, [checkConfigFromQuery, router.query]);
+
   const openCreateServiceDialog = () => {
     openDrawer({
       title: (

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

@@ -3,6 +3,7 @@ import { SettingsLayout } from '@/components/layout/SettingsLayout';
 import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
 import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
 import { StorageServiceVersionSettings } from '@/features/storage/settings/components/HasuraServiceVersionSettings';
+import { HasuraStorageAVSettings } from '@/features/storage/settings/components/HasuraStorageAVSettings';
 import { useGetStorageSettingsQuery } from '@/utils/__generated__/graphql';
 import type { ReactElement } from 'react';
 
@@ -34,6 +35,7 @@ export default function StorageSettingsPage() {
       rootClassName="bg-transparent"
     >
       <StorageServiceVersionSettings />
+      <HasuraStorageAVSettings />
     </Container>
   );
 }

dashboard/src/pages/run-one-click-install.tsx

@@ -0,0 +1,218 @@
+import { useDialog } from '@/components/common/DialogProvider';
+import { AuthenticatedLayout } from '@/components/layout/AuthenticatedLayout';
+import { Container } from '@/components/layout/Container';
+import { RetryableErrorBoundary } from '@/components/presentational/RetryableErrorBoundary';
+import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
+import { Box } from '@/components/ui/v2/Box';
+import { Button } from '@/components/ui/v2/Button';
+import { Input } from '@/components/ui/v2/Input';
+import { List } from '@/components/ui/v2/List';
+import { ListItem } from '@/components/ui/v2/ListItem';
+import { Text } from '@/components/ui/v2/Text';
+import { InfoCard } from '@/features/projects/overview/components/InfoCard';
+import {
+  useGetAllWorkspacesAndProjectsQuery,
+  type GetAllWorkspacesAndProjectsQuery,
+} from '@/utils/__generated__/graphql';
+import { Divider } from '@mui/material';
+import { useUserData } from '@nhost/nextjs';
+import debounce from 'lodash.debounce';
+import Image from 'next/image';
+import { useRouter } from 'next/router';
+import type { ChangeEvent, ReactElement } from 'react';
+import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
+
+type Workspace = Omit<
+  GetAllWorkspacesAndProjectsQuery['workspaces'][0],
+  '__typename'
+>;
+
+export default function SelectWorkspaceAndProject() {
+  const user = useUserData();
+  const router = useRouter();
+  const { openAlertDialog } = useDialog();
+
+  const { data, loading } = useGetAllWorkspacesAndProjectsQuery({
+    skip: !user,
+  });
+
+  const workspaces: Workspace[] = data?.workspaces || [];
+
+  const projects = workspaces.flatMap((workspace) =>
+    workspace.projects.map((project) => ({
+      workspaceName: workspace.name,
+      projectName: project.name,
+      value: `${workspace.slug}/${project.slug}`,
+      isFree: project.plan.isFree,
+    })),
+  );
+
+  const [filter, setFilter] = useState('');
+
+  const handleFilterChange = useMemo(
+    () =>
+      debounce((event: ChangeEvent<HTMLInputElement>) => {
+        setFilter(event.target.value);
+      }, 200),
+    [],
+  );
+
+  useEffect(() => () => handleFilterChange.cancel(), [handleFilterChange]);
+
+  const checkConfigFromQuery = useCallback(
+    (base64Config: string) => {
+      try {
+        JSON.parse(atob(base64Config));
+      } catch (error) {
+        openAlertDialog({
+          title: 'Configuration not set properly',
+          payload:
+            'Either the link is wrong or the configuration is not properly encoded',
+          props: {
+            primaryButtonText: 'Ok',
+            hideSecondaryAction: true,
+            onPrimaryAction: async () => {
+              await router.push('/');
+            },
+          },
+        });
+      }
+    },
+    [openAlertDialog, router],
+  );
+
+  useEffect(() => {
+    checkConfigFromQuery(router.query?.config as string);
+  }, [checkConfigFromQuery, router.query]);
+
+  const goToServices = async (project: {
+    workspaceName: string;
+    projectName: string;
+    value: string;
+    isFree: boolean;
+  }) => {
+    if (!project) {
+      openAlertDialog({
+        title: 'Please select a workspace and a project',
+        payload:
+          'You must select a workspace and a project before proceeding to create the run service',
+        props: {
+          primaryButtonText: 'Ok',
+          hideSecondaryAction: true,
+        },
+      });
+
+      return;
+    }
+
+    if (project.isFree) {
+      openAlertDialog({
+        title: 'The project must have a pro plan',
+        payload: 'Creating run services is only availabel for pro projects',
+        props: {
+          primaryButtonText: 'Ok',
+          hideSecondaryAction: true,
+        },
+      });
+
+      return;
+    }
+
+    await router.push({
+      pathname: `/${project.value}/services`,
+      // Keep the same query params that got us here
+      query: router.query,
+    });
+  };
+
+  const projectsToDisplay = filter
+    ? projects.filter((project) =>
+        project.projectName.toLowerCase().includes(filter.toLowerCase()),
+      )
+    : projects;
+
+  if (loading) {
+    return (
+      <ActivityIndicator
+        delay={500}
+        label="Loading workspaces and projects..."
+      />
+    );
+  }
+
+  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" className="">
+          New Run Service
+        </Text>
+
+        <InfoCard
+          title="Please select the workspace and the project where you want to create the service"
+          disableCopy
+          value=""
+        />
+
+        <div>
+          <div className="mb-2 flex w-full">
+            <Input
+              placeholder="Search..."
+              onChange={handleFilterChange}
+              fullWidth
+              autoFocus
+            />
+          </div>
+          <RetryableErrorBoundary>
+            {projectsToDisplay.length === 0 ? (
+              <Box className="h-import py-2">
+                <Text variant="subtitle2">No results found.</Text>
+              </Box>
+            ) : (
+              <List className="h-import overflow-y-auto">
+                {projectsToDisplay.map((project, index) => (
+                  <Fragment key={project.value}>
+                    <ListItem.Root
+                      className="grid grid-flow-col justify-start gap-2  py-2.5"
+                      secondaryAction={
+                        <Button
+                          variant="borderless"
+                          color="primary"
+                          onClick={() => goToServices(project)}
+                        >
+                          Proceed
+                        </Button>
+                      }
+                    >
+                      <ListItem.Avatar>
+                        <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>
+                      </ListItem.Avatar>
+                      <ListItem.Text
+                        primary={project.projectName}
+                        secondary={`${project.workspaceName} / ${project.projectName}`}
+                      />
+                    </ListItem.Root>
+
+                    {index < projects.length - 1 && <Divider component="li" />}
+                  </Fragment>
+                ))}
+              </List>
+            )}
+          </RetryableErrorBoundary>
+        </div>
+      </div>
+    </Container>
+  );
+}
+
+SelectWorkspaceAndProject.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AuthenticatedLayout title="New Run Service">{page}</AuthenticatedLayout>
+  );
+};

dashboard/src/utils/__generated__/graphql.ts

@@ -1805,6 +1805,7 @@ export type ConfigStandardOauthProviderWithScopeUpdateInput = {
 /** Configuration for storage service */
 export type ConfigStorage = {
   __typename?: 'ConfigStorage';
+  antivirus?: Maybe<ConfigStorageAntivirus>;
   /** Resources for the service */
   resources?: Maybe<ConfigResources>;
   /**
@@ -1818,20 +1819,43 @@ export type ConfigStorage = {
   version?: Maybe<Scalars['String']>;
 };
 
+export type ConfigStorageAntivirus = {
+  __typename?: 'ConfigStorageAntivirus';
+  server?: Maybe<Scalars['String']>;
+};
+
+export type ConfigStorageAntivirusComparisonExp = {
+  _and?: InputMaybe<Array<ConfigStorageAntivirusComparisonExp>>;
+  _not?: InputMaybe<ConfigStorageAntivirusComparisonExp>;
+  _or?: InputMaybe<Array<ConfigStorageAntivirusComparisonExp>>;
+  server?: InputMaybe<ConfigStringComparisonExp>;
+};
+
+export type ConfigStorageAntivirusInsertInput = {
+  server?: InputMaybe<Scalars['String']>;
+};
+
+export type ConfigStorageAntivirusUpdateInput = {
+  server?: InputMaybe<Scalars['String']>;
+};
+
 export type ConfigStorageComparisonExp = {
   _and?: InputMaybe<Array<ConfigStorageComparisonExp>>;
   _not?: InputMaybe<ConfigStorageComparisonExp>;
   _or?: InputMaybe<Array<ConfigStorageComparisonExp>>;
+  antivirus?: InputMaybe<ConfigStorageAntivirusComparisonExp>;
   resources?: InputMaybe<ConfigResourcesComparisonExp>;
   version?: InputMaybe<ConfigStringComparisonExp>;
 };
 
 export type ConfigStorageInsertInput = {
+  antivirus?: InputMaybe<ConfigStorageAntivirusInsertInput>;
   resources?: InputMaybe<ConfigResourcesInsertInput>;
   version?: InputMaybe<Scalars['String']>;
 };
 
 export type ConfigStorageUpdateInput = {
+  antivirus?: InputMaybe<ConfigStorageAntivirusUpdateInput>;
   resources?: InputMaybe<ConfigResourcesUpdateInput>;
   version?: InputMaybe<Scalars['String']>;
 };
@@ -19750,7 +19774,7 @@ export type GetStorageSettingsQueryVariables = Exact<{
 }>;
 
 
-export type GetStorageSettingsQuery = { __typename?: 'query_root', config?: { __typename: 'ConfigConfig', id: 'ConfigConfig', storage?: { __typename?: 'ConfigStorage', version?: string | null } | null } | null };
+export type GetStorageSettingsQuery = { __typename?: 'query_root', config?: { __typename: 'ConfigConfig', id: 'ConfigConfig', storage?: { __typename?: 'ConfigStorage', version?: string | null, antivirus?: { __typename?: 'ConfigStorageAntivirus', server?: string | null } | null } | null } | null };
 
 export type DeleteApplicationMutationVariables = Exact<{
   appId: Scalars['uuid'];
@@ -21063,6 +21087,9 @@ export const GetStorageSettingsDocument = gql`
     __typename
     storage {
       version
+      antivirus {
+        server
+      }
     }
   }
 }

examples/react-apollo/nhost/nhost.toml

@@ -28,10 +28,10 @@ httpPoolSize = 100
 version = 16
 
 [auth]
-version = '0.20.2'
+version = '0.21.2'
 
 [auth.redirections]
-clientUrl = 'http://localhost:3000'
+clientUrl = 'https://react-apollo.example.nhost.io/'
 
 [auth.signUp]
 enabled = true
@@ -94,13 +94,17 @@ enabled = false
 enabled = false
 
 [auth.method.oauth.github]
-enabled = false
+enabled = true
+clientId = '{{ secrets.GITHUB_CLIENT_ID }}'
+clientSecret = '{{ secrets.GITHUB_CLIENT_SECRET }}'
 
 [auth.method.oauth.gitlab]
 enabled = false
 
 [auth.method.oauth.google]
-enabled = false
+enabled = true
+clientId = '{{ secrets.GOOGLE_CLIENT_ID }}'
+clientSecret = '{{ secrets.GOOGLE_CLIENT_SECRET }}'
 
 [auth.method.oauth.linkedin]
 enabled = false
@@ -124,7 +128,11 @@ enabled = false
 enabled = false
 
 [auth.method.webauthn]
-enabled = false
+enabled = true
+
+[auth.method.webauthn.relyingParty]
+name = 'apollo-example'
+origins = ['https://react-apollo.example.nhost.io']
 
 [auth.method.webauthn.attestation]
 timeout = 60000

examples/react-apollo/nhost/overlays/local.json

@@ -0,0 +1,12 @@
+[
+  {
+    "op": "replace",
+    "path": "/auth/method/webauthn/relyingParty/origins/0",
+    "value": "http://localhost:3000"
+  },
+  {
+    "op": "replace",
+    "path": "/auth/redirections/clientUrl",
+    "value": "http://localhost:3000"
+  }
+]

flake.nix

@@ -8,15 +8,15 @@
   outputs = { self, nixpkgs, flake-utils, nix-filter }:
     flake-utils.lib.eachDefaultSystem (system:
       let
-        version = "v1.1.0";
+        version = "v1.5.2";
         dist = {
           aarch64-darwin = rec {
             url = "https://github.com/nhost/cli/releases/download/${version}/cli-${version}-darwin-arm64.tar.gz";
-            sha256 = "sha256-tF40CEkA357yzg2Gmc9ubjHJ5FlI9qQTdVdWNY/+f+Y=";
+            sha256 = "0rakx9lpbj5m3jfra5r2iw065x800i951843l3mxbwk9m1hzm185";
           };
           x86_64-linux = rec {
             url = "https://github.com/nhost/cli/releases/download/${version}/cli-${version}-linux-amd64.tar.gz";
-            sha256 = "sha256-KLv06dI7A+5KGJ5F8xM1qC+oqHRmJ4kMaifLvaTFqak=";
+            sha256 = "19x83fpvazwzpnrxi0qh6mh14wwhlw77qd7vvc3633dxa5hdigc4";
           };
         };
         overlays = [

integrations/apollo/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nhost/apollo
 
+## 5.2.16
+
+### Patch Changes
+
+- @nhost/nhost-js@2.2.14
+
 ## 5.2.15
 
 ### Patch Changes

integrations/apollo/package.json

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

integrations/react-apollo/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @nhost/react-apollo
 
+## 5.0.33
+
+### Patch Changes
+
+- @nhost/apollo@5.2.16
+- @nhost/react@2.0.29
+
 ## 5.0.32
 
 ### Patch Changes

integrations/react-apollo/package.json

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

integrations/react-urql/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nhost/react-urql
 
+## 2.0.30
+
+### Patch Changes
+
+- @nhost/react@2.0.29
+
 ## 2.0.29
 
 ### Patch Changes

integrations/react-urql/package.json

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

packages/hasura-storage-js/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nhost/hasura-storage-js
 
+## 2.2.3
+
+### Patch Changes
+
+- 39de0063b: fix(hasura-storage-js): fix upload response status code check
+
 ## 2.2.2
 
 ### Patch Changes

packages/hasura-storage-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/hasura-storage-js",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "description": "Hasura-storage client",
   "license": "MIT",
   "keywords": [

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

@@ -87,10 +87,14 @@ export const fetchUpload = async (
     xhr.responseType = 'json'
 
     xhr.onload = () => {
-      if (xhr.status < 200 && xhr.status >= 300) {
+      if (xhr.status < 200 || xhr.status >= 300) {
         return resolve({
           fileMetadata: null,
-          error: { error: xhr.statusText, message: xhr.statusText, status: xhr.status }
+          error: {
+            error: xhr.response?.error ?? xhr.response,
+            message: xhr.response?.error?.message ?? xhr.response,
+            status: xhr.status
+          }
         })
       }
       return resolve({ fileMetadata: xhr.response, error: null })

packages/nextjs/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nhost/nextjs
 
+## 1.13.35
+
+### Patch Changes
+
+- @nhost/react@2.0.29
+
 ## 1.13.34
 
 ### Patch Changes

packages/nextjs/package.json

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

packages/nhost-js/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @nhost/nhost-js
 
+## 2.2.14
+
+### Patch Changes
+
+- Updated dependencies [39de0063b]
+  - @nhost/hasura-storage-js@2.2.3
+
 ## 2.2.13
 
 ### Patch Changes

packages/nhost-js/package.json

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

packages/react/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nhost/react
 
+## 2.0.29
+
+### Patch Changes
+
+- @nhost/nhost-js@2.2.14
+
 ## 2.0.28
 
 ### Patch Changes

packages/react/package.json

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

packages/vue/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nhost/vue
 
+## 1.13.34
+
+### Patch Changes
+
+- @nhost/nhost-js@2.2.14
+
 ## 1.13.33
 
 ### Patch Changes

packages/vue/package.json

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