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

chore: update versions

dashboard/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @nhost/dashboard
 
+## 0.20.27
+
+### Patch Changes
+
+- fa79b7709: chore(dashboard): tweaks and fixes to the service form and dialog
+- 8df84d782: fix(dashboard): allow resetting custom domains
+  - @nhost/react-apollo@6.0.0
+  - @nhost/nextjs@1.13.39
+
+## 0.20.26
+
+### Patch Changes
+
+- 331ba0376: feat(dashboard): add postgres storage capacity modifier in the settings
+- b7f801874: feat(dashboard): add new settings page for custom domains
+
+## 0.20.25
+
+### Patch Changes
+
+- @nhost/react-apollo@5.0.38
+
 ## 0.20.24
 
 ### Patch Changes

dashboard/package.json

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

dashboard/src/components/common/UpgradeToProBanner/UpgradeToProBanner.tsx

@@ -0,0 +1,100 @@
+import { useDialog } from '@/components/common/DialogProvider';
+import { NhostIcon } from '@/components/presentational/NhostIcon';
+import { Box } from '@/components/ui/v2/Box';
+import { Button } from '@/components/ui/v2/Button';
+import { ArrowSquareOutIcon } from '@/components/ui/v2/icons/ArrowSquareOutIcon';
+import { Link } from '@/components/ui/v2/Link';
+import { Text } from '@/components/ui/v2/Text';
+import { ChangePlanModal } from '@/features/projects/common/components/ChangePlanModal';
+import { useIsCurrentUserOwner } from '@/features/projects/common/hooks/useIsCurrentUserOwner';
+
+import Image from 'next/image';
+
+interface UpgradeToProBannerProps {
+  title: string;
+  description: string;
+}
+
+export default function UpgradeToProBanner({
+  title,
+  description,
+}: UpgradeToProBannerProps) {
+  const { openDialog, openAlertDialog } = useDialog();
+  const isOwner = useIsCurrentUserOwner();
+
+  return (
+    <Box
+      sx={{ backgroundColor: 'primary.light' }}
+      className="flex flex-col p-4 space-y-4 rounded-md lg:flex-row lg:items-center lg:space-y-0"
+    >
+      <div className="flex flex-col justify-between space-y-4">
+        <div className="space-y-2">
+          <div className="flex flex-col space-y-2 xs:flex-row xs:space-y-0 xs:space-x-2">
+            <Text>Available with</Text>
+            <div className="flex flex-row space-x-2">
+              <NhostIcon />
+              <Text sx={{ color: 'primary.main' }} className="font-semibold">
+                Nhost Pro
+              </Text>
+            </div>
+          </div>
+          <Text variant="h3">{title}</Text>
+          <Text>{description}</Text>
+        </div>
+
+        <div className="flex flex-col space-y-2 lg:flex-row lg:items-center lg:space-y-0 lg:space-x-2">
+          <Button
+            className="rounded-md"
+            onClick={() => {
+              if (isOwner) {
+                openDialog({
+                  component: <ChangePlanModal />,
+                  props: {
+                    PaperProps: { className: 'p-0 max-w-xl w-full' },
+                  },
+                });
+              } else {
+                openAlertDialog({
+                  title: "You can't upgrade this project",
+                  payload: (
+                    <Text variant="subtitle1" component="span">
+                      Ask an owner of this workspace to upgrade the project.
+                    </Text>
+                  ),
+                  props: {
+                    secondaryButtonText: 'I understand',
+                    hidePrimaryAction: true,
+                  },
+                });
+              }
+            }}
+          >
+            Upgrade to Pro
+          </Button>
+          <Link
+            href="https://nhost.io/pricing"
+            target="_blank"
+            rel="noopener noreferrer"
+            underline="hover"
+            className="font-medium text-center"
+            sx={{
+              color: 'text.secondary',
+            }}
+          >
+            See all features
+            <ArrowSquareOutIcon className="w-4 h-4 ml-1" />
+          </Link>
+        </div>
+      </div>
+
+      <div className="max-w-xs mx-auto">
+        <Image
+          src="/illustration-unbox.png"
+          width={400}
+          height={260}
+          objectFit="contain"
+        />
+      </div>
+    </Box>
+  );
+}

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

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

dashboard/src/components/layout/SettingsContainer/SettingsContainer.tsx

@@ -128,7 +128,11 @@ export default function SettingsContainer({
             icon}
 
           <div className="grid grid-flow-row gap-1">
-            <Text className="text-lg font-semibold">{title}</Text>
+            {typeof title === 'string' ? (
+              <Text className="text-lg font-semibold">{title}</Text>
+            ) : (
+              title
+            )}
 
             {description && <Text color="secondary">{description}</Text>}
           </div>

dashboard/src/components/layout/SettingsSidebar/SettingsSidebar.tsx

@@ -200,6 +200,14 @@ export default function SettingsSidebar({
             >
               Secrets
             </SettingsNavLink>
+
+            <SettingsNavLink
+              href="/custom-domains"
+              exact={false}
+              onClick={handleSelect}
+            >
+              Custom Domains
+            </SettingsNavLink>
           </List>
         </nav>
       </Box>

dashboard/src/components/presentational/NhostIcon/NhostIcon.tsx

@@ -0,0 +1,35 @@
+import type { ForwardedRef, SVGProps } from 'react';
+import { forwardRef } from 'react';
+
+function NhostIcon(
+  props: SVGProps<SVGSVGElement>,
+  ref: ForwardedRef<SVGSVGElement>,
+) {
+  return (
+    <svg
+      ref={ref}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-label="Logo of Nhost"
+      {...props}
+    >
+      <g clipPath="url(#clip0_9802_20458)">
+        <rect width="24" height="24" fill="#0052CD" />
+        <path
+          d="M17.4656 7.39804L12.4705 4.51369C12.0223 4.25553 11.466 4.25553 11.0169 4.51369C10.5688 4.77276 10.2906 5.25455 10.2906 5.77179V6.14813L9.96517 5.95996C9.51702 5.70179 8.96069 5.70179 8.51163 5.95996C8.06348 6.21903 7.78531 6.70082 7.78531 7.21896V7.5953L7.45988 7.40713C7.01173 7.14897 6.4554 7.14897 6.00634 7.40713C5.55819 7.66621 5.28003 8.14799 5.28003 8.66614V17.7037C5.28003 17.9637 5.43093 18.2055 5.66546 18.3182C5.89908 18.4318 6.1827 18.4009 6.38632 18.24L8.86342 16.2865L12.6832 18.4918C12.7886 18.5527 12.9068 18.5827 13.025 18.5827C13.1431 18.5827 13.2613 18.5518 13.3668 18.4918C13.5777 18.37 13.7086 18.1437 13.7086 17.9001V12.4613C13.7086 11.5687 13.2286 10.7378 12.4559 10.2915L11.2033 9.56789V5.7727C11.2033 5.57998 11.3069 5.4 11.4742 5.30364C11.6414 5.20728 11.8487 5.20728 12.0159 5.30364L17.0111 8.18708C17.5028 8.4707 17.8083 9.00066 17.8083 9.56789V16.3402C17.8083 16.5329 17.7046 16.7129 17.5374 16.8092L16.2138 17.5737V11.0142C16.2138 10.1215 15.7339 9.29064 14.9612 8.84431L11.8859 7.06897V8.12072L14.5058 9.63334C14.9976 9.91696 15.303 10.446 15.303 11.0142V17.9673C15.303 18.21 15.4339 18.4373 15.6448 18.5591C15.7502 18.62 15.8684 18.65 15.9866 18.65C16.1048 18.65 16.2229 18.6191 16.3284 18.5591L17.9937 17.5974C18.4419 17.3383 18.72 16.8565 18.72 16.3383V9.56608C18.7182 8.67614 18.2382 7.84438 17.4656 7.39804ZM11.9987 11.0805C12.4905 11.3641 12.7959 11.8932 12.7959 12.4613V17.5064L9.63246 15.6802L10.6478 14.8803C10.9996 14.603 11.2014 14.1876 11.2014 13.7394V10.6215L11.9987 11.0805ZM10.2906 10.0942V13.7376C10.2906 13.9049 10.2152 14.0603 10.0842 14.163L6.19088 17.2328V8.66523C6.19088 8.47251 6.29451 8.29253 6.46177 8.19617C6.62903 8.09981 6.83629 8.09981 7.00355 8.19617L7.78531 8.64705V15.1057L8.69616 14.3876V7.21896C8.69616 7.02625 8.79979 6.84626 8.96705 6.7499C9.13431 6.65355 9.34157 6.65355 9.50883 6.7499L10.2906 7.20078V9.04157L9.37975 8.51524V9.56789L10.2906 10.0942Z"
+          fill="white"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_9802_20458">
+          <rect width="24" height="24" rx="4" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+
+export default forwardRef(NhostIcon);

dashboard/src/components/presentational/NhostIcon/index.ts

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

dashboard/src/components/ui/v2/icons/ArrowsClockwise/ArrowsClockwise.tsx

@@ -0,0 +1,44 @@
+import type { IconProps } from '@/components/ui/v2/icons';
+
+function ArrowsClockwise(props: IconProps) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      aria-label="Update"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M11.0103 6.23227H14.0103V3.23227"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M4.11084 4.11091C4.62156 3.60019 5.22788 3.19506 5.89517 2.91866C6.56246 2.64226 7.27766 2.5 7.99993 2.5C8.7222 2.5 9.4374 2.64226 10.1047 2.91866C10.772 3.19506 11.3783 3.60019 11.889 4.11091L14.0103 6.23223"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M4.98975 9.76773H1.98975V12.7677"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M11.8892 11.8891C11.3785 12.3998 10.7722 12.8049 10.1049 13.0813C9.43762 13.3577 8.72242 13.5 8.00015 13.5C7.27788 13.5 6.56269 13.3577 5.89539 13.0813C5.2281 12.8049 4.62179 12.3998 4.11107 11.8891L1.98975 9.76776"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+ArrowsClockwise.displayName = 'NhostArrowsClockwise';
+
+export default ArrowsClockwise;

dashboard/src/components/ui/v2/icons/ArrowsClockwise/index.ts

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

dashboard/src/features/authentication/settings/gql/getAuthenticationSettings.gql

@@ -24,6 +24,13 @@ query GetAuthenticationSettings($appId: uuid!) {
           expiresIn
         }
       }
+      resources {
+        networking {
+          ingresses {
+            fqdn
+          }
+        }
+      }
       user {
         email {
           allowed

dashboard/src/features/database/settings/components/DatabaseStorageCapacity/DatabaseStorageCapacity.tsx

@@ -0,0 +1,161 @@
+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 { Box } from '@/components/ui/v2/Box';
+import { Input } from '@/components/ui/v2/Input';
+import { Text } from '@/components/ui/v2/Text';
+import { UpgradeNotification } from '@/features/projects/common/components/UpgradeNotification';
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import {
+  useGetPostgresSettingsQuery,
+  useUpdateConfigMutation,
+} from '@/generated/graphql';
+import { getToastStyleProps } from '@/utils/constants/settings';
+import { getServerError } from '@/utils/getServerError';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useEffect } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import { toast } from 'react-hot-toast';
+import * as Yup from 'yup';
+
+const validationSchema = Yup.object({
+  capacity: Yup.number().required(),
+});
+
+export type AuthDomainFormValues = Yup.InferType<typeof validationSchema>;
+
+export default function AuthDomain() {
+  const { maintenanceActive } = useUI();
+  const { currentProject } = useCurrentWorkspaceAndProject();
+
+  const {
+    data,
+    loading,
+    error,
+    refetch: refetchPostgresSettings,
+  } = useGetPostgresSettingsQuery({
+    variables: { appId: currentProject?.id },
+    fetchPolicy: 'cache-only',
+  });
+
+  const capacity =
+    data?.config?.postgres?.resources?.storage?.capacity ??
+    currentProject.plan.featureMaxDbSize;
+
+  const [updateConfig] = useUpdateConfigMutation();
+
+  const form = useForm<{ capacity: number }>({
+    reValidateMode: 'onSubmit',
+    defaultValues: { capacity },
+    resolver: yupResolver(validationSchema),
+  });
+
+  const { formState, register, reset } = form;
+  const isDirty = Object.keys(formState.dirtyFields).length > 0;
+
+  useEffect(() => {
+    if (data && !loading) {
+      reset({ capacity });
+    }
+  }, [loading, data, reset, capacity]);
+
+  if (loading) {
+    return (
+      <ActivityIndicator
+        delay={1000}
+        label="Loading Auth Domain Settings..."
+        className="justify-center"
+      />
+    );
+  }
+
+  if (error) {
+    throw error;
+  }
+
+  async function handleSubmit(formValues: AuthDomainFormValues) {
+    try {
+      await toast.promise(
+        updateConfig({
+          variables: {
+            appId: currentProject.id,
+            config: {
+              postgres: {
+                resources: {
+                  storage: {
+                    capacity: formValues.capacity,
+                  },
+                },
+              },
+            },
+          },
+        }),
+        {
+          loading: `Database storage capacity is being updated...`,
+          success: `Database storage capacity has been updated successfully.`,
+          error: getServerError(
+            `An error occurred while trying to update the database storage capacity.`,
+          ),
+        },
+        getToastStyleProps(),
+      );
+
+      form.reset(formValues);
+      await refetchPostgresSettings();
+    } catch {
+      // Note: The toast will handle the error.
+    }
+  }
+
+  return (
+    <FormProvider {...form}>
+      <Form onSubmit={handleSubmit}>
+        <SettingsContainer
+          title="Storage capacity"
+          description="Specify the storage capacity for your PostgreSQL database."
+          slotProps={{
+            submitButton: {
+              disabled: !isDirty || maintenanceActive,
+              loading: formState.isSubmitting,
+            },
+          }}
+          className="flex flex-col"
+        >
+          {currentProject.plan.isFree && (
+            <UpgradeNotification message="Unlock by upgrading your project to the Pro plan." />
+          )}
+          <Box className="grid grid-flow-row lg:grid-cols-5">
+            <Input
+              {...register('capacity')}
+              id="capacity"
+              name="capacity"
+              type="number"
+              fullWidth
+              disabled={currentProject.plan.isFree}
+              className="lg:col-span-2"
+              error={Boolean(formState.errors.capacity?.message)}
+              helperText={formState.errors.capacity?.message}
+              slotProps={{
+                inputRoot: {
+                  min: capacity,
+                },
+              }}
+            />
+          </Box>
+          {!currentProject.plan.isFree && (
+            <Box
+              className="grid items-center grid-flow-col gap-1 p-3 rounded-lg shadow-sm place-content-between"
+              sx={{ backgroundColor: 'grey.200' }}
+            >
+              <Text>
+                ⚠️ Please note that once you increase the storage, it cannot be
+                reduced.
+              </Text>
+            </Box>
+          )}
+        </SettingsContainer>
+      </Form>
+    </FormProvider>
+  );
+}

dashboard/src/features/database/settings/components/DatabaseStorageCapacity/index.ts

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

dashboard/src/features/database/settings/gql/getPostgresSettings.gql

@@ -9,6 +9,11 @@ query GetPostgresSettings($appId: uuid!) {
     __typename
     postgres {
       version
+      resources {
+        storage {
+          capacity
+        }
+      }
     }
   }
 }

dashboard/src/features/hasura/settings/gql/getHasuraSettings.gql

@@ -18,6 +18,13 @@ query GetHasuraSettings($appId: uuid!) {
       events {
         httpPoolSize
       }
+      resources {
+        networking {
+          ingresses {
+            fqdn
+          }
+        }
+      }
     }
   }
 }

dashboard/src/features/projects/custom-domains/settings/components/AuthDomain/AuthDomain.tsx

@@ -0,0 +1,153 @@
+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 { Input } from '@/components/ui/v2/Input';
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { VerifyDomain } from '@/features/projects/custom-domains/settings/components/VerifyDomain';
+import {
+  useGetAuthenticationSettingsQuery,
+  useUpdateConfigMutation,
+  type ConfigIngressUpdateInput,
+} from '@/generated/graphql';
+import { getToastStyleProps } from '@/utils/constants/settings';
+import { getServerError } from '@/utils/getServerError';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useEffect, useState } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import { toast } from 'react-hot-toast';
+import * as Yup from 'yup';
+
+const validationSchema = Yup.object({
+  auth_fqdn: Yup.string(),
+});
+
+export type AuthDomainFormValues = Yup.InferType<typeof validationSchema>;
+
+export default function AuthDomain() {
+  const { maintenanceActive } = useUI();
+  const [isVerified, setIsVerified] = useState(false);
+  const { currentProject, refetch: refetchWorkspaceAndProject } =
+    useCurrentWorkspaceAndProject();
+
+  const [updateConfig] = useUpdateConfigMutation();
+
+  const form = useForm<{ auth_fqdn: string }>({
+    reValidateMode: 'onSubmit',
+    defaultValues: { auth_fqdn: null },
+    resolver: yupResolver(validationSchema),
+  });
+
+  const { data, loading, error } = useGetAuthenticationSettingsQuery({
+    variables: {
+      appId: currentProject.id,
+    },
+  });
+
+  const { networking } = data?.config?.auth?.resources || {};
+  const initialValue = networking?.ingresses?.[0]?.fqdn?.[0];
+
+  useEffect(() => {
+    if (!loading && data) {
+      form.reset({ auth_fqdn: initialValue });
+    }
+  }, [data, loading, form, initialValue]);
+
+  if (loading) {
+    return (
+      <ActivityIndicator
+        delay={1000}
+        label="Loading Auth Domain Settings..."
+        className="justify-center"
+      />
+    );
+  }
+
+  if (error) {
+    throw error;
+  }
+
+  const { formState, register, watch } = form;
+  const isDirty = Object.keys(formState.dirtyFields).length > 0;
+
+  const auth_fqdn = watch('auth_fqdn');
+
+  async function handleSubmit(formValues: AuthDomainFormValues) {
+    const ingresses: ConfigIngressUpdateInput[] =
+      formValues.auth_fqdn.length > 0 ? [{ fqdn: [formValues.auth_fqdn] }] : [];
+
+    const updateConfigPromise = updateConfig({
+      variables: {
+        appId: currentProject.id,
+        config: {
+          auth: {
+            resources: {
+              networking: {
+                ingresses,
+              },
+            },
+          },
+        },
+      },
+    });
+
+    try {
+      await toast.promise(
+        updateConfigPromise,
+        {
+          loading: `Auth domain is being updated...`,
+          success: `Auth domain has been updated successfully.`,
+          error: getServerError(
+            `An error occurred while trying to update the auth domain.`,
+          ),
+        },
+        getToastStyleProps(),
+      );
+
+      form.reset(formValues);
+      await refetchWorkspaceAndProject();
+    } catch {
+      // Note: The toast will handle the error.
+    }
+  }
+
+  return (
+    <FormProvider {...form}>
+      <Form onSubmit={handleSubmit}>
+        <SettingsContainer
+          title="Auth Domain"
+          description="Enter below your custom domain for the authentication service."
+          slotProps={{
+            submitButton: {
+              disabled:
+                !isDirty || maintenanceActive || (!isVerified && !initialValue),
+              loading: formState.isSubmitting,
+            },
+          }}
+          className="grid grid-flow-row px-4 gap-y-4 gap-x-4 lg:grid-cols-5"
+        >
+          <Input
+            {...register('auth_fqdn')}
+            id="auth_fqdn"
+            name="auth_fqdn"
+            type="string"
+            fullWidth
+            className="col-span-5 lg:col-span-2"
+            placeholder="auth.mydomain.dev"
+            error={Boolean(formState.errors.auth_fqdn?.message)}
+            helperText={formState.errors.auth_fqdn?.message}
+            slotProps={{ inputRoot: { min: 1, max: 100 } }}
+          />
+          <div className="col-span-5 row-start-2">
+            <VerifyDomain
+              recordType="CNAME"
+              hostname={auth_fqdn}
+              value={`lb.${currentProject.region.awsName}.${currentProject.region.domain}.`}
+              onHostNameVerified={() => setIsVerified(true)}
+            />
+          </div>
+        </SettingsContainer>
+      </Form>
+    </FormProvider>
+  );
+}

dashboard/src/features/projects/custom-domains/settings/components/AuthDomain/index.ts

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

dashboard/src/features/projects/custom-domains/settings/components/DatabaseDomain/DatabaseDomain.tsx

@@ -0,0 +1,61 @@
+import { SettingsContainer } from '@/components/layout/SettingsContainer';
+import { Input } from '@/components/ui/v2/Input';
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { generateAppServiceUrl } from '@/features/projects/common/utils/generateAppServiceUrl';
+import { VerifyDomain } from '@/features/projects/custom-domains/settings/components/VerifyDomain';
+import { useState } from 'react';
+import * as Yup from 'yup';
+
+const validationSchema = Yup.object({
+  database_fqdn: Yup.string().required(),
+});
+
+export type DatabaseDomainFormValues = Yup.InferType<typeof validationSchema>;
+
+export default function DatabaseDomain() {
+  const { currentProject } = useCurrentWorkspaceAndProject();
+
+  const [dbFQDN, setDbFQDN] = useState('');
+
+  const postgresHost = generateAppServiceUrl(
+    currentProject.subdomain,
+    currentProject.region,
+    'db',
+  ).replace('https://', '');
+
+  return (
+    <SettingsContainer
+      title="Database Domain"
+      description="Enter below your custom domain for the PostgreSQL database to verify. Once verified there is no need to save this value as no configuration on our end is required."
+      slotProps={{
+        submitButton: {
+          hidden: true,
+        },
+        footer: {
+          className: 'hidden',
+        },
+      }}
+      className="grid grid-flow-row px-4 gap-y-4 gap-x-4 lg:grid-cols-5"
+    >
+      <Input
+        id="database_fqdn"
+        name="database_fqdn"
+        type="string"
+        fullWidth
+        className="col-span-5 lg:col-span-2"
+        placeholder="db.mydomain.dev"
+        onChange={(e) => {
+          setDbFQDN(e.target.value);
+        }}
+        slotProps={{ inputRoot: { min: 1, max: 100 } }}
+      />
+      <div className="col-span-5 row-start-2">
+        <VerifyDomain
+          recordType="CNAME"
+          hostname={dbFQDN}
+          value={`${postgresHost}.`}
+        />
+      </div>
+    </SettingsContainer>
+  );
+}

dashboard/src/features/projects/custom-domains/settings/components/DatabaseDomain/index.ts

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

dashboard/src/features/projects/custom-domains/settings/components/HasuraDomain/HasuraDomain.tsx

@@ -0,0 +1,155 @@
+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 { Input } from '@/components/ui/v2/Input';
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { VerifyDomain } from '@/features/projects/custom-domains/settings/components/VerifyDomain';
+import {
+  useGetHasuraSettingsQuery,
+  useUpdateConfigMutation,
+  type ConfigIngressUpdateInput,
+} from '@/generated/graphql';
+import { getToastStyleProps } from '@/utils/constants/settings';
+import { getServerError } from '@/utils/getServerError';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useEffect, useState } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import { toast } from 'react-hot-toast';
+import * as Yup from 'yup';
+
+const validationSchema = Yup.object({
+  hasura_fqdn: Yup.string(),
+});
+
+export type HasuraDomainFormValues = Yup.InferType<typeof validationSchema>;
+
+export default function HasuraDomain() {
+  const { maintenanceActive } = useUI();
+  const [isVerified, setIsVerified] = useState(false);
+  const { currentProject, refetch: refetchWorkspaceAndProject } =
+    useCurrentWorkspaceAndProject();
+
+  const [updateConfig] = useUpdateConfigMutation();
+
+  const form = useForm<{ hasura_fqdn: string }>({
+    reValidateMode: 'onSubmit',
+    defaultValues: { hasura_fqdn: null },
+    resolver: yupResolver(validationSchema),
+  });
+
+  const { data, loading, error } = useGetHasuraSettingsQuery({
+    variables: {
+      appId: currentProject.id,
+    },
+  });
+
+  const { networking } = data?.config?.hasura?.resources || {};
+  const initialValue = networking?.ingresses?.[0]?.fqdn?.[0];
+
+  useEffect(() => {
+    if (!loading && data) {
+      form.reset({ hasura_fqdn: initialValue });
+    }
+  }, [data, loading, form, initialValue]);
+
+  if (loading) {
+    return (
+      <ActivityIndicator
+        delay={0}
+        label="Loading Hasura Domain..."
+        className="justify-center"
+      />
+    );
+  }
+
+  if (error) {
+    throw error;
+  }
+
+  const { formState, register, watch } = form;
+  const isDirty = Object.keys(formState.dirtyFields).length > 0;
+
+  const hasura_fqdn = watch('hasura_fqdn');
+
+  async function handleSubmit(formValues: HasuraDomainFormValues) {
+    const ingresses: ConfigIngressUpdateInput[] =
+      formValues.hasura_fqdn.length > 0
+        ? [{ fqdn: [formValues.hasura_fqdn] }]
+        : [];
+
+    const updateConfigPromise = updateConfig({
+      variables: {
+        appId: currentProject.id,
+        config: {
+          hasura: {
+            resources: {
+              networking: {
+                ingresses,
+              },
+            },
+          },
+        },
+      },
+    });
+
+    try {
+      await toast.promise(
+        updateConfigPromise,
+        {
+          loading: `Hasura domain is being updated...`,
+          success: `Hasura domain has been updated successfully.`,
+          error: getServerError(
+            `An error occurred while trying to update the Hasura domain.`,
+          ),
+        },
+        getToastStyleProps(),
+      );
+
+      form.reset(formValues);
+      await refetchWorkspaceAndProject();
+    } catch {
+      // Note: The toast will handle the error.
+    }
+  }
+
+  return (
+    <FormProvider {...form}>
+      <Form onSubmit={handleSubmit}>
+        <SettingsContainer
+          title="Hasura Domain"
+          description="Enter below your custom domain for the Hasura/GraphQL service."
+          slotProps={{
+            submitButton: {
+              disabled:
+                !isDirty || maintenanceActive || (!isVerified && !initialValue),
+              loading: formState.isSubmitting,
+            },
+          }}
+          className="grid grid-flow-row px-4 gap-y-4 gap-x-4 lg:grid-cols-5"
+        >
+          <Input
+            {...register('hasura_fqdn')}
+            id="hasura_fqdn"
+            name="hasura_fqdn"
+            type="string"
+            fullWidth
+            className="col-span-5 lg:col-span-2"
+            placeholder="auth.mydomain.dev"
+            error={Boolean(formState.errors.hasura_fqdn?.message)}
+            helperText={formState.errors.hasura_fqdn?.message}
+            slotProps={{ inputRoot: { min: 1, max: 100 } }}
+          />
+          <div className="col-span-5 row-start-2">
+            <VerifyDomain
+              recordType="CNAME"
+              hostname={hasura_fqdn}
+              value={`lb.${currentProject.region.awsName}.${currentProject.region.domain}.`}
+              onHostNameVerified={() => setIsVerified(true)}
+            />
+          </div>
+        </SettingsContainer>
+      </Form>
+    </FormProvider>
+  );
+}

dashboard/src/features/projects/custom-domains/settings/components/HasuraDomain/index.ts

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

dashboard/src/features/projects/custom-domains/settings/components/RunServiceDomains/RunServiceDomains.tsx

@@ -0,0 +1,88 @@
+import { SettingsContainer } from '@/components/layout/SettingsContainer';
+import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
+import { ArrowSquareOutIcon } from '@/components/ui/v2/icons/ArrowSquareOutIcon';
+import { Link } from '@/components/ui/v2/Link';
+import { Text } from '@/components/ui/v2/Text';
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { RunServicePortDomain } from '@/features/projects/custom-domains/settings/components/RunServicePortDomain';
+import { useGetRunServicesQuery } from '@/utils/__generated__/graphql';
+import { useMemo } from 'react';
+
+export default function RunServiceDomains() {
+  const { currentProject, currentWorkspace } = useCurrentWorkspaceAndProject();
+
+  const {
+    data,
+    loading,
+    // refetch: refetchServices, // TODO refetch after update
+  } = useGetRunServicesQuery({
+    variables: {
+      appID: currentProject.id,
+      resolve: false,
+      limit: 1000, // TODO consider pagination
+      offset: 0,
+    },
+  });
+
+  const services = useMemo(
+    () => data?.app?.runServices.map((service) => service) ?? [],
+    [data],
+  );
+
+  if (loading) {
+    return (
+      <ActivityIndicator
+        delay={1000}
+        label="Loading Run Services Domains..."
+        className="justify-center"
+      />
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-6">
+      {services
+        .filter((service) => service.config?.ports?.length > 0)
+        .map((service) => (
+          <SettingsContainer
+            key={service.id}
+            title={
+              <div className="flex flex-row items-center">
+                <Text className="text-lg font-semibold">
+                  {service.config?.name ?? 'unset'}
+                </Text>
+                <Link
+                  href={`/${currentWorkspace.slug}/${currentProject.slug}/services`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  underline="hover"
+                  className="font-medium"
+                >
+                  <ArrowSquareOutIcon className="mb-1 ml-1 h-4 w-4" />
+                </Link>
+              </div>
+            }
+            description="Enter below your custom domain for the published ports."
+            docsTitle={service.config?.name ?? 'unset'}
+            slotProps={{
+              submitButton: {
+                hidden: true,
+              },
+              footer: {
+                className: 'hidden',
+              },
+            }}
+            className="grid gap-y-4 gap-x-4 px-4"
+          >
+            {service.config?.ports?.map((port) => (
+              <RunServicePortDomain
+                key={String(port.port)}
+                service={service}
+                port={port.port}
+              />
+            ))}
+          </SettingsContainer>
+        ))}
+    </div>
+  );
+}

dashboard/src/features/projects/custom-domains/settings/components/RunServiceDomains/index.ts

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

dashboard/src/features/projects/custom-domains/settings/components/RunServicePortDomain/RunServicePortDomain.tsx

@@ -0,0 +1,159 @@
+import { useUI } from '@/components/common/UIProvider';
+import { Form } from '@/components/form/Form';
+import { Button } from '@/components/ui/v2/Button';
+import { Input } from '@/components/ui/v2/Input';
+import { Text } from '@/components/ui/v2/Text';
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { VerifyDomain } from '@/features/projects/custom-domains/settings/components/VerifyDomain';
+import { useUpdateRunServiceConfigMutation } from '@/generated/graphql';
+import { getToastStyleProps } from '@/utils/constants/settings';
+import { getServerError } from '@/utils/getServerError';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { type RunService } from 'pages/[workspaceSlug]/[appSlug]/services';
+import { useState } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import { toast } from 'react-hot-toast';
+import * as Yup from 'yup';
+
+interface RunServicePortProps {
+  service: RunService;
+  port: number;
+}
+
+const validationSchema = Yup.object({
+  runServicePortFQDN: Yup.string(),
+});
+
+export type RunServicePortFormValues = Yup.InferType<typeof validationSchema>;
+
+export default function RunServicePortDomain({
+  service,
+  port,
+}: RunServicePortProps) {
+  const { maintenanceActive } = useUI();
+  const [loading, setLoading] = useState(false);
+  const [isVerified, setIsVerified] = useState(false);
+  const { currentProject } = useCurrentWorkspaceAndProject();
+
+  const [updateRunServiceConfig] = useUpdateRunServiceConfigMutation();
+
+  const runServicePort = service.config.ports.find((p) => p.port === port);
+  const initialValue = runServicePort?.ingresses?.[0]?.fqdn?.[0];
+
+  const form = useForm<{ runServicePortFQDN: string }>({
+    reValidateMode: 'onSubmit',
+    defaultValues: {
+      runServicePortFQDN: initialValue,
+    },
+    resolver: yupResolver(validationSchema),
+  });
+
+  const { formState, register, watch } = form;
+  const isDirty = Object.keys(formState.dirtyFields).length > 0;
+
+  const runServicePortFQDN = watch('runServicePortFQDN');
+
+  async function handleSubmit(formValues: RunServicePortFormValues) {
+    try {
+      setLoading(true);
+
+      await toast.promise(
+        updateRunServiceConfig({
+          variables: {
+            appID: currentProject.id,
+            serviceID: service.id,
+            config: {
+              ports: service?.config?.ports?.map((p) => {
+                // exclude the `__typename` because the mutation will fail otherwise
+                const { __typename, ...rest } = p;
+
+                if (rest.port === port) {
+                  return {
+                    ...rest,
+                    ingresses:
+                      formValues.runServicePortFQDN.length > 0
+                        ? [{ fqdn: [formValues.runServicePortFQDN] }]
+                        : [],
+                  };
+                }
+
+                return {
+                  ...rest,
+                  // exclude the `__typename` because the mutation will fail otherwise
+                  ingresses: rest.ingresses.map((item) => ({
+                    fqdn: item.fqdn,
+                  })),
+                };
+              }),
+            },
+          },
+        }),
+        {
+          loading: `Port ${port} is being updated...`,
+          success: `Port ${port} has been updated successfully.`,
+          error: getServerError(
+            `An error occurred while trying to update Port ${port}.`,
+          ),
+        },
+        getToastStyleProps(),
+      );
+
+      form.reset(formValues);
+      // TODO refetch the service config
+      // await refetchWorkspaceAndProject();
+    } catch {
+      // Note: The toast will handle the error.
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <FormProvider {...form}>
+      <Form onSubmit={handleSubmit}>
+        <div className="space-y-2">
+          <Text className="text-sm font-semibold">{`${runServicePort.type} <--> ${runServicePort.port}`}</Text>
+          <div className="flex flex-row space-x-4">
+            <Input
+              {...register('runServicePortFQDN')}
+              id="runServicePortFQDN"
+              name="runServicePortFQDN"
+              type="string"
+              fullWidth
+              className=""
+              placeholder={`${service.config?.name ?? 'unset'}-${
+                runServicePort.port
+              }.mydomain.dev`}
+              error={Boolean(formState.errors.runServicePortFQDN?.message)}
+              helperText={formState.errors.runServicePortFQDN?.message}
+              slotProps={{
+                inputRoot: { min: 1, max: 100 },
+              }}
+            />
+            <Button
+              variant="outlined"
+              type="submit"
+              disabled={
+                loading ||
+                !isDirty ||
+                maintenanceActive ||
+                (!isVerified && !initialValue)
+              }
+            >
+              Save
+            </Button>
+          </div>
+        </div>
+
+        <div className="col-span-5 row-start-2 mt-4">
+          <VerifyDomain
+            recordType="CNAME"
+            hostname={runServicePortFQDN}
+            value={`lb.${currentProject.region.awsName}.${currentProject.region.domain}.`}
+            onHostNameVerified={() => setIsVerified(true)}
+          />
+        </div>
+      </Form>
+    </FormProvider>
+  );
+}

dashboard/src/features/projects/custom-domains/settings/components/RunServicePortDomain/index.ts

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

dashboard/src/features/projects/custom-domains/settings/components/VerifyDomain/VerifyDomain.tsx

@@ -0,0 +1,155 @@
+import { Box } from '@/components/ui/v2/Box';
+import { Button } from '@/components/ui/v2/Button';
+import { IconButton } from '@/components/ui/v2/IconButton';
+import { CopyIcon } from '@/components/ui/v2/icons/CopyIcon';
+import { Text } from '@/components/ui/v2/Text';
+import { getToastStyleProps } from '@/utils/constants/settings';
+import { copy } from '@/utils/copy';
+import { useDnsLookupCnameLazyQuery } from '@/utils/__generated__/graphql';
+import { ApolloError } from '@apollo/client';
+import { useState } from 'react';
+import { toast } from 'react-hot-toast';
+
+interface VerifyDomainProps {
+  recordType: string;
+  hostname: string;
+  value: string;
+  onHostNameVerified?: () => void;
+}
+
+export default function VerifyDomain({
+  recordType,
+  hostname,
+  value,
+  onHostNameVerified,
+}: VerifyDomainProps) {
+  const [verificationFailed, setVerificationFailed] = useState(false);
+  const [verificationSucceeded, setVerificationSucceeded] = useState(false);
+
+  const [loading, setLoading] = useState(false);
+  const [fireLookupCNAME] = useDnsLookupCnameLazyQuery();
+
+  const handleVerifyDomain = async () => {
+    setLoading(true);
+
+    try {
+      await toast.promise(
+        fireLookupCNAME({
+          variables: {
+            hostname,
+          },
+        }).then(({ data: { dnsLookupCNAME } }) => {
+          if (dnsLookupCNAME !== value) {
+            throw new Error(`Could not verify ${hostname}`);
+          }
+        }),
+        {
+          loading: `Verifying ${hostname} ...`,
+          success: () => {
+            setVerificationFailed(false);
+            setVerificationSucceeded(true);
+            setLoading(false);
+            onHostNameVerified?.();
+            return `${hostname} has been verified.`;
+          },
+          error: (arg: Error | ApolloError) => {
+            setVerificationFailed(true);
+            setVerificationSucceeded(false);
+            setLoading(false);
+
+            if (arg instanceof 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 trying to verify ${hostname}. Please try again.`
+              );
+            }
+
+            return arg.message;
+          },
+        },
+        getToastStyleProps(),
+      );
+    } catch (error) {
+      // Note: The toast will handle the error.
+    }
+  };
+
+  return (
+    <Box
+      sx={[
+        { backgroundColor: 'primary.light' },
+        verificationFailed && {
+          backgroundColor: 'error.light',
+          color: 'error.main',
+        },
+        verificationSucceeded && {
+          backgroundColor: 'success.light',
+          color: 'success.dark',
+        },
+      ]}
+      className="flex flex-col p-4 space-y-4 rounded-md"
+    >
+      <div className="flex flex-row items-center justify-between">
+        {!verificationFailed && !verificationSucceeded && (
+          <Text>
+            Add the record below in your DNS provider to verify {hostname}
+          </Text>
+        )}
+
+        {verificationSucceeded && (
+          <Text>
+            <span className="font-semibold">{hostname}</span> was verified
+            successfully. Hit save to apply.
+          </Text>
+        )}
+
+        {verificationFailed && (
+          <Text>
+            An error occurred while trying to verify{' '}
+            <span className="font-semibold">{hostname}</span>. Make sure you
+            correctly added the <span className="font-semibold">CNAME</span> and
+            try again.
+          </Text>
+        )}
+      </div>
+
+      <div className="relative flex flex-col text-slate-500">
+        <div className="flex space-x-2">
+          <Text>Record type: </Text>
+          <Text className="font-bold">{recordType}</Text>
+        </div>
+        <div className="flex space-x-2">
+          <Text>Host:</Text>
+          <Text className="font-bold">{hostname}</Text>
+        </div>
+        <div className="flex flex-row space-x-2">
+          <Text>Value:</Text>
+          <Text className="font-bold">{value}</Text>
+          <IconButton
+            aria-label="Copy Personal Access Token"
+            variant="borderless"
+            color="secondary"
+            onClick={() => copy(value, 'CNAME Value')}
+          >
+            <CopyIcon className="w-4 h-4" />
+          </IconButton>
+        </div>
+        <Button
+          disabled={loading || !hostname}
+          onClick={handleVerifyDomain}
+          className="mt-4 sm:absolute sm:bottom-0 sm:right-0 sm:mt-0"
+        >
+          Verify
+        </Button>
+      </div>
+    </Box>
+  );
+}

dashboard/src/features/projects/custom-domains/settings/components/VerifyDomain/index.ts

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

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

@@ -3,6 +3,7 @@ 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 { ArrowsClockwise } from '@/components/ui/v2/icons/ArrowsClockwise';
 import { CopyIcon } from '@/components/ui/v2/icons/CopyIcon';
 import { InfoIcon } from '@/components/ui/v2/icons/InfoIcon';
 import { PlusIcon } from '@/components/ui/v2/icons/PlusIcon';
@@ -344,7 +345,7 @@ export default function ServiceForm({
               <Tooltip title="Name of the service, must be unique per project.">
                 <InfoIcon
                   aria-label="Info"
-                  className="h-4 w-4"
+                  className="w-4 h-4"
                   color="primary"
                 />
               </Tooltip>
@@ -384,7 +385,7 @@ export default function ServiceForm({
               >
                 <InfoIcon
                   aria-label="Info"
-                  className="h-4 w-4"
+                  className="w-4 h-4"
                   color="primary"
                 />
               </Tooltip>
@@ -415,7 +416,7 @@ export default function ServiceForm({
               <Tooltip title="Command to run when to start the service. This is optional as the image may already have a baked-in command.">
                 <InfoIcon
                   aria-label="Info"
-                  className="h-4 w-4"
+                  className="w-4 h-4"
                   color="primary"
                 />
               </Tooltip>
@@ -459,7 +460,7 @@ export default function ServiceForm({
         {createServiceFormError && (
           <Alert
             severity="error"
-            className="grid grid-flow-col items-center justify-between px-4 py-3"
+            className="grid items-center justify-between grid-flow-col px-4 py-3"
           >
             <span className="text-left">
               <strong>Error:</strong> {createServiceFormError.message}
@@ -482,7 +483,7 @@ export default function ServiceForm({
             <Button
               type="submit"
               disabled={isSubmitting}
-              startIcon={<PlusIcon />}
+              startIcon={serviceID ? <ArrowsClockwise /> : <PlusIcon />}
             >
               {serviceID ? 'Update' : 'Create'}
             </Button>

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

@@ -55,7 +55,8 @@ export default function ServiceDetailsDialog({
             .filter((port) => port.publish)
             .map((port) => (
               <InfoCard
-                title={`${port.type}:${port.port}`}
+                key={String(port.port)}
+                title={`${port.type} <--> ${port.port}`}
                 value={getPortURL(port.port)}
               />
             ))}

dashboard/src/gql/app/settings/custom-domains/dnsLookupCNAME.graphql

@@ -0,0 +1,3 @@
+query dnsLookupCNAME($hostname: String!) {
+  dnsLookupCNAME(hostname: $hostname)
+}

dashboard/src/gql/app/settings/updateConfig.graphql

@@ -1,5 +1,12 @@
 mutation UpdateConfig($appId: uuid!, $config: ConfigConfigUpdateInput!) {
   updateConfig(appID: $appId, config: $config) {
     id: __typename
+    postgres {
+      resources {
+        storage {
+          capacity
+        }
+      }
+    }
   }
 }

dashboard/src/gql/fragments/project.gql

@@ -46,6 +46,7 @@ fragment Project on apps {
     name
     price
     isFree
+    featureMaxDbSize
   }
   githubRepository {
     fullName

dashboard/src/gql/services/getRunServices.graphql

@@ -36,10 +36,12 @@ query getRunServices(
           port
           type
           publish
+          ingresses {
+            fqdn
+          }
         }
       }
     }
-
     runServices_aggregate {
       aggregate {
         count

dashboard/src/gql/user/insertFeedback.gql

@@ -1,5 +0,0 @@
-mutation insertFeedbackOne($feedback: feedback_insert_input!) {
-  insertFeedbackOne(object: $feedback) {
-    id
-  }
-}

dashboard/src/pages/[workspaceSlug]/[appSlug]/settings/custom-domains/index.tsx

@@ -0,0 +1,71 @@
+import { UpgradeToProBanner } from '@/components/common/UpgradeToProBanner';
+import { Container } from '@/components/layout/Container';
+import { SettingsLayout } from '@/components/layout/SettingsLayout';
+import { Box } from '@/components/ui/v2/Box';
+import { ArrowSquareOutIcon } from '@/components/ui/v2/icons/ArrowSquareOutIcon';
+import { Link } from '@/components/ui/v2/Link';
+import { Text } from '@/components/ui/v2/Text';
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { AuthDomain } from '@/features/projects/custom-domains/settings/components/AuthDomain';
+import { DatabaseDomain } from '@/features/projects/custom-domains/settings/components/DatabaseDomain';
+import { HasuraDomain } from '@/features/projects/custom-domains/settings/components/HasuraDomain';
+import { RunServiceDomains } from '@/features/projects/custom-domains/settings/components/RunServiceDomains';
+import { type ReactElement } from 'react';
+
+export default function CustomDomains() {
+  const { currentProject } = useCurrentWorkspaceAndProject();
+
+  if (currentProject.plan.isFree) {
+    return (
+      <Container
+        className="grid grid-flow-row gap-6 bg-transparent"
+        rootClassName="bg-transparent"
+      >
+        <UpgradeToProBanner
+          title="Upgrade to Nhost Pro to unlock custom domains"
+          description="In publishing and graphic design, Lorem ipsum is a placeholder text
+          commonly used to demonstrate the visual form of a document or a
+          typeface without relying on meaningful content."
+        />
+      </Container>
+    );
+  }
+
+  return (
+    <Container
+      className="grid max-w-5xl grid-flow-row gap-6 bg-transparent"
+      rootClassName="bg-transparent"
+    >
+      <Box className="flex flex-row items-center gap-4 overflow-hidden rounded-lg border-1 p-4">
+        <div className="flex flex-col space-y-2">
+          <Text className="text-lg font-semibold">Custom Domains</Text>
+
+          <Text color="secondary">
+            Add a custom domain to Auth, Hasura, PostgreSQL, and your Run 
+            services for only a $10 flat fee 🚀 <br /> Learn more about
+            <Link
+              href="https://docs.nhost.io/platform/custom-domains"
+              target="_blank"
+              rel="noopener noreferrer"
+              underline="hover"
+              className="ml-1 font-medium"
+            >
+              Custom Domains
+              <ArrowSquareOutIcon className="ml-1 h-4 w-4" />
+            </Link>
+          </Text>
+        </div>
+      </Box>
+
+      <AuthDomain />
+      <HasuraDomain />
+      <DatabaseDomain />
+
+      <RunServiceDomains />
+    </Container>
+  );
+}
+
+CustomDomains.getLayout = function getLayout(page: ReactElement) {
+  return <SettingsLayout>{page}</SettingsLayout>;
+};

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

@@ -3,6 +3,7 @@ import { SettingsLayout } from '@/components/layout/SettingsLayout';
 import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
 import { DatabaseConnectionInfo } from '@/features/database/settings/components/DatabaseConnectionInfo';
 import { DatabaseServiceVersionSettings } from '@/features/database/settings/components/DatabaseServiceVersionSettings';
+import { DatabaseStorageCapacity } from '@/features/database/settings/components/DatabaseStorageCapacity';
 import { ResetDatabasePasswordSettings } from '@/features/database/settings/components/ResetDatabasePasswordSettings';
 import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
 import { useGetPostgresSettingsQuery } from '@/generated/graphql';
@@ -36,6 +37,7 @@ export default function DatabaseSettingsPage() {
       rootClassName="bg-transparent"
     >
       <DatabaseServiceVersionSettings />
+      <DatabaseStorageCapacity />
       <DatabaseConnectionInfo />
       <ResetDatabasePasswordSettings />
     </Container>

dashboard/src/tests/mocks.ts

@@ -68,6 +68,7 @@ export const mockApplication: Project = {
     name: 'Starter',
     isFree: true,
     price: 0,
+    featureMaxDbSize: 1,
   },
   config: {
     observability: {

docs/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @nhost/docs
 
+## 0.7.0
+
+### Minor Changes
+
+- 5764f46d9: Add docs for Custom Domains
+
+### Patch Changes
+
+- cc8cc8d45: database: added extension http
+
 ## 0.6.2
 
 ### Patch Changes

docs/docs/database/extensions.mdx

@@ -157,3 +157,28 @@ DROP EXTENSION pg_stat_statements;
 ### Resources
 
 * [Documentation](https://www.postgresql.org/docs/14/pgstatstatements.html)
+
+
+## http
+
+HTTP client for PostgreSQL, retrieve a web page from inside the database.
+
+### Managing
+
+To install the extension you can create a migration with the following contents:
+
+```
+SET ROLE postgres;
+CREATE EXTENSION http;
+```
+
+To uninstall it, you can use the following migration:
+
+```
+SET ROLE postgres;
+DROP EXTENSION http;
+```
+
+### Resources
+
+* [GitHub](https://github.com/pramsey/pgsql-http)

docs/docs/platform/custom-domains.mdx

@@ -0,0 +1,73 @@
+---
+title: 'Custom Domains'
+sidebar_position: 10
+image: /img/og/platform/metrics.png
+---
+
+import Tabs from '@theme/Tabs'
+import TabItem from '@theme/TabItem'
+
+Custom domains empower you to offer a tailored and branded experience for your users. Available only as an add-on for projects on the pro and enterprise plans, custom domains not only enhance your brand's visibility but also provide a more professional appearance compared to using Nhost's default domain.
+
+You can configure Custom Domains for Auth, Hasura, PostgreSQL, and your own Run services using both the Nhost Dashboard or the Config file.
+
+The following examples assume we are configuring custom domains at `*.custom-domain.com`.
+
+
+<Tabs groupId="package-manager">
+  <TabItem value="dashboard" label="dashboard" default>
+
+Follow the instructions in the **Custom Domain** section of your project's settings:
+
+1. Add a CNAME record in your DNS provider for each of the services you want a custom domain for,  and click "Verify". The verification might take a few seconds to succeed.
+2. Once the verification succeeds, click "Save" to update your project.
+
+![exposing a port](/img/custom-domains/custom-domains.png)
+
+  </TabItem>
+  <TabItem value="toml" label="toml">
+
+The first step is to add a CNAME record in your DNS provider for each of the services you want a custom domain for. You can find the instructions in the **dashboard** tab.
+
+For Hasura, Auth, and PostgreSQL, custom domains are defined in the default `./nhost/config.toml` as follows: 
+
+```
+[hasura]
+
+[hasura.resources.networking]
+[[hasura.resources.networking.ingresses]]
+fqdn = ['hasura.custom-domain.com']
+
+[auth]
+
+[auth.resources.networking]
+[[auth.resources.networking.ingresses]]
+fqdn = ['auth.custom-domain.com']
+
+[postgres]
+
+[postgres.resources.networking]
+[[postgres.resources.networking.ingresses]]
+fqdn = ['postgres.custom-domain.com']
+```
+
+For Run services, typically in `nhost-service.toml` specific to the service:
+
+```
+name = 'my-service'
+
+[image]
+image = 'docker.io/nhost/my-service'
+
+[[ports]]
+port = 8080
+type= 'http'
+publish = true
+
+[[ports.ingresses]]
+fqdn = ['my-service.custom-domain.com']
+```
+
+  </TabItem>
+</Tabs>
+

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/docs",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",

integrations/apollo/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nhost/apollo
 
+## 5.2.21
+
+### Patch Changes
+
+- f777a3380: fix: apollo-integration: correctly reset accessToken to null after sign-out
+
 ## 5.2.20
 
 ### Patch Changes

integrations/apollo/package.json

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

integrations/apollo/src/index.ts

@@ -189,7 +189,7 @@ export const createApolloClient = ({
     if (['SIGNOUT', 'SIGNED_IN', 'TOKEN_CHANGED'].includes(event.type)) {
       if (
         event.type === 'SIGNOUT' ||
-        (event.type === 'TOKEN_CHANGED' && state.context.accessToken === null)
+        (event.type === 'TOKEN_CHANGED' && state.context.accessToken.value === null)
       ) {
         accessToken = null
 

integrations/react-apollo/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @nhost/react-apollo
 
+## 6.0.0
+
+### Patch Changes
+
+- Updated dependencies [00c363f80]
+- Updated dependencies [66c3193bc]
+  - @nhost/react@2.1.0
+
+## 5.0.38
+
+### Patch Changes
+
+- Updated dependencies [f777a3380]
+  - @nhost/apollo@5.2.21
+
 ## 5.0.37
 
 ### Patch Changes

integrations/react-apollo/package.json

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

integrations/react-urql/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @nhost/react-urql
 
+## 3.0.0
+
+### Patch Changes
+
+- Updated dependencies [00c363f80]
+- Updated dependencies [66c3193bc]
+  - @nhost/react@2.1.0
+
 ## 2.0.33
 
 ### Patch Changes

integrations/react-urql/package.json

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

packages/nextjs/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @nhost/nextjs
 
+## 1.13.39
+
+### Patch Changes
+
+- Updated dependencies [00c363f80]
+- Updated dependencies [66c3193bc]
+  - @nhost/react@2.1.0
+
 ## 1.13.38
 
 ### Patch Changes

packages/nextjs/package.json

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

packages/react/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @nhost/react
 
+## 2.1.0
+
+### Minor Changes
+
+- 66c3193bc: Update useChangePassword hook interface to include ActionLoadingState
+
+### Patch Changes
+
+- 00c363f80: fix(docs): update changeEmail usage reference
+
 ## 2.0.32
 
 ### Patch Changes

packages/react/package.json

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

packages/react/src/useChangeEmail.ts

@@ -30,9 +30,7 @@ export interface ChangeEmailHookResult extends ChangeEmailState {
  * const handleFormSubmit = async (e) => {
  *   e.preventDefault();
  *
- *   await changeEmail({
- *     email: 'new@example.com',
- *   })
+ *   await changeEmail('new@example.com')
  * }
  * ```
  *

packages/react/src/useChangePassword.ts

@@ -1,5 +1,6 @@
 import {
   ActionErrorState,
+  ActionLoadingState,
   ActionSuccessState,
   ChangePasswordHandlerResult,
   changePasswordPromise,
@@ -13,7 +14,7 @@ interface ChangePasswordHandler {
   (password: string): Promise<ChangePasswordHandlerResult>
 }
 
-export interface ChangePasswordHookResult extends ActionErrorState, ActionSuccessState {
+export interface ChangePasswordHookResult extends ActionErrorState, ActionLoadingState, ActionSuccessState {
   /** Requests the password change. Returns a promise with the current context */
   changePassword: ChangePasswordHandler
 }

packages/vue/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nhost/vue
 
+## 1.13.39
+
+### Patch Changes
+
+- 00c363f80: fix(docs): update changeEmail usage reference
+
 ## 1.13.38
 
 ### Patch Changes

packages/vue/package.json

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

packages/vue/src/useChangeEmail.ts

@@ -29,9 +29,7 @@ export interface ChangeEmailComposableResult extends ToRefs<ChangeEmailState> {
  * const handleFormSubmit = async (e) => {
  *   e.preventDefault();
  *
- *   await changeEmail({
- *     email: 'new@example.com',
- *   })
+ *   await changeEmail('new@example.com')
  * }
  * ```
  *