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

chore: update versions

.changeset/config.json

@@ -5,6 +5,5 @@
   "linked": [],
   "access": "restricted",
   "baseBranch": "main",
-  "updateInternalDependencies": "patch",
-  "ignore": []
-}
+  "updateInternalDependencies": "patch"
+}

.github/workflows/changesets.yaml

@@ -42,6 +42,7 @@ jobs:
           commit: 'chore: update versions'
           title: 'chore: update versions'
           publish: pnpm run release
+          createGithubReleases: false
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
@@ -62,12 +63,39 @@ jobs:
     uses: ./.github/workflows/dashboard.yaml
     secrets: inherit
 
+  publish-vercel:
+    name: Publish to Vercel
+    runs-on: ubuntu-latest
+    needs:
+      - test
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - name: Install Node and dependencies
+        uses: ./.github/actions/install-dependencies
+        with:
+          TURBO_TOKEN: ${{ env.TURBO_TOKEN }}
+          TURBO_TEAM: ${{ env.TURBO_TEAM }}
+      - name: Setup Vercel CLI
+        run: pnpm add -g vercel
+      - name: Trigger a Vercel deployment
+        env:
+          VERCEL_ORG_ID: ${{ secrets.DASHBOARD_VERCEL_TEAM_ID }}
+          VERCEL_PROJECT_ID: ${{ secrets.DASHBOARD_VERCEL_PROJECT_ID }}
+        run: |
+          vercel pull --environment=production --token=${{ secrets.DASHBOARD_VERCEL_DEPLOY_TOKEN }}
+          vercel build --prod --token=${{ secrets.DASHBOARD_VERCEL_DEPLOY_TOKEN }}
+          vercel deploy --prebuilt --prod --token=${{ secrets.DASHBOARD_VERCEL_DEPLOY_TOKEN }}
+
   publish-docker:
     name: Publish to Docker Hub
     runs-on: ubuntu-latest
     needs:
       - test
       - version
+      - publish-vercel
     steps:
       - name: Checkout repository
         uses: actions/checkout@v3
@@ -113,42 +141,6 @@ jobs:
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
           push: true
-      - name: Create GitHub Release
-        uses: taiki-e/create-gh-release-action@v1
-        with:
-          changelog: dashboard/CHANGELOG.md
-          token: ${{ secrets.GITHUB_TOKEN }}
-          prefix: ${{ env.DASHBOARD_PACKAGE }}@
-          ref: refs/tags/${{ env.DASHBOARD_PACKAGE }}@${{ needs.version.outputs.dashboardVersion }}
-      - name: Remove tag on failure
-        if: failure()
-        run: git push --delete origin ${{ env.DASHBOARD_PACKAGE }}@${{ needs.version.outputs.dashboardVersion }}
-
-  publish-vercel:
-    name: Publish to Vercel
-    runs-on: ubuntu-latest
-    needs:
-      - publish-docker
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v3
-        with:
-          fetch-depth: 0
-      - name: Install Node and dependencies
-        uses: ./.github/actions/install-dependencies
-        with:
-          TURBO_TOKEN: ${{ env.TURBO_TOKEN }}
-          TURBO_TEAM: ${{ env.TURBO_TEAM }}
-      - name: Setup Vercel CLI
-        run: pnpm add -g vercel
-      - name: Trigger a Vercel deployment
-        env:
-          VERCEL_ORG_ID: ${{ secrets.DASHBOARD_VERCEL_TEAM_ID }}
-          VERCEL_PROJECT_ID: ${{ secrets.DASHBOARD_VERCEL_PROJECT_ID }}
-        run: |
-          vercel pull --environment=production --token=${{ secrets.DASHBOARD_VERCEL_DEPLOY_TOKEN }}
-          vercel build --prod --token=${{ secrets.DASHBOARD_VERCEL_DEPLOY_TOKEN }}
-          vercel deploy --prebuilt --prod --token=${{ secrets.DASHBOARD_VERCEL_DEPLOY_TOKEN }}
 
   bump-cli:
     name: Bump Dashboard version in the Nhost CLI

.github/workflows/codeql-analysis.yml

@@ -0,0 +1,56 @@
+name: "CodeQL"
+
+on:
+  push: {}
+  pull_request: {}
+  schedule:
+    - cron: '20 23 * * 3'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [ 'javascript' ]
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
+        # Learn more about CodeQL language support at https://git.io/codeql-language-support
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v2
+      with:
+        languages: ${{ matrix.language }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+        # queries: ./path/to/local/query, your-org/your-repo/queries@main
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v2
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 https://git.io/JvXDl
+
+    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+    #    and modify them (or add more) to build your code if your project
+    #    uses a compiled language
+
+    #- run: |
+    #   make bootstrap
+    #   make release
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v2

.gitignore

@@ -19,10 +19,8 @@ logs/
 coverage/
 dist/
 umd/
-lib/
 node_modules/
 tmp/
-.docz/
 .pnpm-store
 .turbo
 .env
@@ -32,7 +30,6 @@ out/
 # Custom
 *.min.js
 *.map
-todo.md
 
 # Config files that are not part of the repository root anymore. Should be removed in the future.
 /.eslintignore

.vscode/settings.json

@@ -2,5 +2,6 @@
   "editor.codeActionsOnSave": {
     "source.organizeImports": true
   },
-  "eslint.workingDirectories": ["./dashboard"]
+  "eslint.workingDirectories": ["./dashboard"],
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

dashboard/CHANGELOG.md

@@ -1,5 +1,116 @@
 # @nhost/dashboard
 
+## 0.20.24
+
+### Patch Changes
+
+- e10389ecf: fix(dashboard): disable run tab when developing locally
+  - @nhost/react-apollo@5.0.37
+
+## 0.20.23
+
+### Patch Changes
+
+- c01568a7d: chore(dashboard): show alert to update oauth providers
+
+## 0.20.22
+
+### Patch Changes
+
+- c3efb7ec8: feat(dashboard): query latest announcement from platform
+
+## 0.20.21
+
+### Patch Changes
+
+- 3e46d3873: chore: update link to node18 announcement
+
+## 0.20.20
+
+### Patch Changes
+
+- @nhost/react-apollo@5.0.36
+- @nhost/nextjs@1.13.38
+
+## 0.20.19
+
+### Patch Changes
+
+- 75c4c8ae3: feat(dashboard): make env value input multiline
+
+## 0.20.18
+
+### Patch Changes
+
+- 425d485f8: fix(dashboard): make sure dedicated resources pricing follows total resources
+
+## 0.20.17
+
+### Patch Changes
+
+- ae324f67f: fix(dashboard): remove unused graphql fields
+
+## 0.20.16
+
+### Patch Changes
+
+- df5b4302c: chore(dashboard): remove run feature flag
+- bf4a1f6c2: feat(dashboard): fetch auth, postgres, hasura and storage versions from dashboard
+- 34fc08ca7: fix(dashboard/run): show correct private registry in service details
+- 885d10620: chore(dashboard): change feedback to contact us
+
+## 0.20.15
+
+### Patch Changes
+
+- ed16c8b5d: feat(run): add a confirmation dialog when deleting a run service
+- 216990888: fix(run): center loading indicator when selecting a project
+
+## 0.20.14
+
+### Patch Changes
+
+- 9fbea9787: feat: add node18 announcement
+
+## 0.20.13
+
+### Patch Changes
+
+- e84acf469: fix(run): handle subdomain undefined error when creating a new service
+
+## 0.20.12
+
+### Patch Changes
+
+- b7c799d62: feat(run): add dialog to copy registry and URLs
+
+## 0.20.11
+
+### Patch Changes
+
+- 8903e6abd: fix(dashboard): show correct egress limit in usage stats
+
+## 0.20.10
+
+### Patch Changes
+
+- 666a75a23: feat(dashboard): add functions execution time and egress volume to usage stats
+
+## 0.20.9
+
+### Patch Changes
+
+- 5e1e80aa8: fix(dashboard): show correct locales in user details
+  - @nhost/react-apollo@5.0.35
+  - @nhost/nextjs@1.13.37
+
+## 0.20.8
+
+### Patch Changes
+
+- @nhost/react-apollo@5.0.34
+- @nhost/nextjs@1.13.36
+
 ## 0.20.7
 
 ### Patch Changes

dashboard/e2e/overview/overview.test.ts

@@ -30,7 +30,7 @@ test('should show a sidebar with menu items', async () => {
   const navLocator = page.getByRole('navigation', { name: /main navigation/i });
   await expect(navLocator).toBeVisible();
   await expect(navLocator.getByRole('list').getByRole('listitem')).toHaveCount(
-    11,
+    12,
   );
   await expect(
     navLocator.getByRole('link', { name: /overview/i }),

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/dashboard",
-  "version": "0.20.7",
+  "version": "0.20.24",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -106,6 +106,7 @@
     "@testing-library/user-event": "^14.4.3",
     "@types/ace": "^0.0.48",
     "@types/bcryptjs": "^2.4.2",
+    "@types/jest": "^29.5.3",
     "@types/lodash.debounce": "^4.0.7",
     "@types/node": "^16.11.7",
     "@types/pluralize": "^0.0.30",

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

@@ -1,62 +0,0 @@
-import { Button } from '@/components/ui/v2/Button';
-import { ArrowRightIcon } from '@/components/ui/v2/icons/ArrowRightIcon';
-import { XIcon } from '@/components/ui/v2/icons/XIcon';
-import { Text } from '@/components/ui/v2/Text';
-import { forwardRef, type ForwardedRef } from 'react';
-import { twMerge } from 'tailwind-merge';
-import AnnouncementContainer, {
-  type AnnouncementContainerProps,
-} from './AnnouncementContainer';
-
-export interface AnnouncementProps extends AnnouncementContainerProps {
-  /**
-   * Function called when the announcement is closed.
-   */
-  onClose?: VoidFunction;
-  /**
-   * The href to use for the announcement link.
-   */
-  href: string;
-}
-
-function Announcement(
-  { children, slotProps, onClose, href, ...props }: AnnouncementProps,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  return (
-    <AnnouncementContainer
-      {...props}
-      ref={ref}
-      className="grid grid-flow-col justify-between gap-4"
-      slotProps={{
-        root: {
-          ...(slotProps?.root || {}),
-          className: twMerge('w-full py-1.5', slotProps?.root?.className),
-        },
-      }}
-    >
-      <span />
-
-      <div className="flex items-center self-center truncate">
-        <a href={href}>
-          <Text className="cursor-pointer truncate hover:underline">
-            {children}
-          </Text>
-        </a>
-        <ArrowRightIcon className="ml-1 h-4 w-4 text-white" />
-      </div>
-
-      <Button
-        variant="borderless"
-        onClick={onClose}
-        aria-label="Close announcement"
-        size="small"
-        className="rounded-sm p-1"
-      >
-        <XIcon className="opacity-65 h-4 w-4" />
-      </Button>
-    </AnnouncementContainer>
-  );
-}
-
-export default forwardRef(Announcement);

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

@@ -1,66 +0,0 @@
-import {
-  createElement,
-  forwardRef,
-  type DetailedHTMLProps,
-  type ElementType,
-  type ForwardedRef,
-  type HTMLProps,
-  type PropsWithoutRef,
-} from 'react';
-import { twMerge } from 'tailwind-merge';
-
-export interface AnnouncementContainerProps
-  extends PropsWithoutRef<
-    DetailedHTMLProps<HTMLProps<HTMLDivElement>, HTMLDivElement>
-  > {
-  /**
-   * Custom component to render as.
-   */
-  component?: ElementType<any>;
-  /**
-   * Props passed to component slots.
-   */
-  slotProps?: {
-    /**
-     * Props passed to the root component.
-     */
-    root?: DetailedHTMLProps<HTMLProps<HTMLDivElement>, HTMLDivElement>;
-    /**
-     * Props passed to the content component.
-     */
-    content?: DetailedHTMLProps<HTMLProps<HTMLDivElement>, HTMLDivElement>;
-  };
-}
-
-function AnnouncementContainer(
-  {
-    component = 'div',
-    className,
-    children,
-    slotProps,
-    ...props
-  }: AnnouncementContainerProps,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  return createElement(
-    component,
-    {
-      ...props,
-      ...(slotProps?.root || {}),
-      ref,
-      className: twMerge('w-full overflow-hidden', slotProps?.root?.className),
-    },
-    <div
-      {...(slotProps?.content || {})}
-      className={twMerge(
-        'mx-auto max-w-7xl px-5',
-        className,
-        slotProps?.content?.className,
-      )}
-    >
-      {children}
-    </div>,
-  );
-}
-
-export default forwardRef(AnnouncementContainer);

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

@@ -1,92 +0,0 @@
-import { Divider } from '@/components/ui/v2/Divider';
-import {
-  createContext,
-  useEffect,
-  useMemo,
-  useState,
-  type PropsWithChildren,
-  type ReactNode,
-} from 'react';
-import { useInView } from 'react-intersection-observer';
-import Announcement from './Announcement';
-
-interface AnnouncementType {
-  id: string;
-  content: ReactNode;
-  href: string;
-}
-
-export interface AnnouncementContextProps {
-  /**
-   * The announcement to show.
-   */
-  announcement?: AnnouncementType;
-  /**
-   * Whether or not to show the announcement.
-   */
-  showAnnouncement?: boolean;
-  /**
-   * Function to close the announcement.
-   */
-  handleClose?: () => void;
-  /**
-   * Whether or not the announcement is in view.
-   */
-  inView?: boolean;
-}
-
-// Note: You can define the active announcement here.
-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>({});
-
-export default function AnnouncementProvider({ children }: PropsWithChildren) {
-  const { ref, inView } = useInView();
-  const [showAnnouncement, setShowAnnouncement] = useState(false);
-
-  useEffect(() => {
-    if (
-      typeof window === 'undefined' ||
-      !announcement ||
-      window.localStorage.getItem(announcement.id) === '1'
-    ) {
-      return;
-    }
-
-    setShowAnnouncement(true);
-  }, []);
-
-  function handleClose() {
-    setShowAnnouncement(false);
-    window.localStorage.setItem(announcement?.id, '1');
-  }
-
-  const announcementValue = useMemo(
-    () => ({ showAnnouncement, announcement, handleClose, inView }),
-    [inView, showAnnouncement],
-  );
-
-  return (
-    <AnnouncementContext.Provider value={announcementValue}>
-      {announcement && showAnnouncement && (
-        <>
-          <Announcement
-            ref={ref}
-            href={announcement.href}
-            onClose={handleClose}
-          >
-            {announcement.content}
-          </Announcement>
-          <Divider />
-        </>
-      )}
-
-      {children}
-    </AnnouncementContext.Provider>
-  );
-}

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

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

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

@@ -1,14 +0,0 @@
-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/common/ContactUs/ContactUs.tsx

@@ -0,0 +1,70 @@
+import { Link } from '@/components/ui/v2/Link';
+import { Text } from '@/components/ui/v2/Text';
+import type { DetailedHTMLProps, HTMLProps } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+export interface ContactUsProps
+  extends DetailedHTMLProps<HTMLProps<HTMLDivElement>, HTMLDivElement> {}
+
+export default function FeedbackForm({ className, ...props }: ContactUsProps) {
+  return (
+    <div
+      className={twMerge(
+        'grid max-w-md grid-flow-row gap-2 py-4 px-5',
+        className,
+      )}
+      {...props}
+    >
+      <Text variant="h3" component="h2">
+        Contact us
+      </Text>
+
+      <Text>
+        To report issues with Nhost, please open a GitHub issue in the{' '}
+        <Link
+          href="https://github.com/nhost/nhost/issues/new"
+          target="_blank"
+          rel="noopener noreferrer"
+          underline="hover"
+        >
+          nhost/nhost
+        </Link>{' '}
+        repository.
+      </Text>
+      <Text>
+        For issues related to the CLI, please visit the{' '}
+        <Link
+          href="https://github.com/nhost/cli/issues/new"
+          target="_blank"
+          rel="noopener noreferrer"
+          underline="hover"
+        >
+          nhost/cli
+        </Link>{' '}
+        repository.
+      </Text>
+      <Text>
+        If you need assistance or have any questions, feel free to join us on{' '}
+        <Link
+          href="https://discord.com/invite/9V7Qb2U"
+          target="_blank"
+          rel="noopener noreferrer"
+          underline="hover"
+        >
+          Discord
+        </Link>
+        . Alternatively, if you prefer, you can also open a{' '}
+        <Link
+          href="https://github.com/nhost/nhost/discussions/new/choose"
+          target="_blank"
+          rel="noopener noreferrer"
+          underline="hover"
+        >
+          GitHub discussion
+        </Link>
+        .
+      </Text>
+      <Text>We&apos;re here to help, so don&apos;t hesitate to reach out!</Text>
+    </div>
+  );
+}

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

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

dashboard/src/components/common/DepricationNotice/DepricationNotice.tsx

@@ -0,0 +1,28 @@
+import { Alert } from '@/components/ui/v2/Alert';
+import { Text } from '@/components/ui/v2/Text';
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+
+export default function DepricationNotice() {
+  const { currentProject } = useCurrentWorkspaceAndProject();
+
+  return (
+    !currentProject?.providersUpdated && (
+      <Alert severity="warning" className="grid place-content-center">
+        <Text color="warning" className="max-w-3xl text-sm">
+          On December 1st the old backend domain will cease to work. You need to
+          make sure your client is instantiated using the subdomain and region
+          and update your oauth2 settings. You can find more information{' '}
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            className="underline"
+            href="https://github.com/nhost/nhost/discussions/2303"
+          >
+            here
+          </a>
+          .
+        </Text>
+      </Alert>
+    )
+  );
+}

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

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

dashboard/src/components/common/FeedbackForm/FeedbackForm.tsx

@@ -1,148 +0,0 @@
-import { Avatar } from '@/components/ui/v2/Avatar';
-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 { useInsertFeedbackOneMutation } from '@/utils/__generated__/graphql';
-import { useUserData } from '@nhost/nextjs';
-import Image from 'next/image';
-import type { DetailedHTMLProps, HTMLProps } from 'react';
-import { useState } from 'react';
-import { twMerge } from 'tailwind-merge';
-
-export interface FeedbackFormProps
-  extends DetailedHTMLProps<HTMLProps<HTMLDivElement>, HTMLDivElement> {}
-
-// TODO: Use `react-hook-form` here instead of the custom form implementation
-export default function FeedbackForm({
-  className,
-  ...props
-}: FeedbackFormProps) {
-  const { currentProject } = useCurrentWorkspaceAndProject();
-  const [insertFeedback, { loading }] = useInsertFeedbackOneMutation();
-  const user = useUserData();
-
-  const [feedback, setFeedback] = useState('');
-  const [feedbackSent, setFeedbackSent] = useState(false);
-
-  function handleClose() {
-    setTimeout(() => {
-      setFeedbackSent(false);
-    }, 500);
-  }
-
-  async function handleSubmit(e: React.SyntheticEvent<HTMLFormElement>) {
-    e.preventDefault();
-
-    const feedbackWithProjectInfo = [
-      currentProject && `Project ID: ${currentProject.id}`,
-      typeof window !== 'undefined' && `URL: ${window.location.href}`,
-      feedback,
-    ]
-      .filter(Boolean)
-      .join('\n\n');
-
-    try {
-      await insertFeedback({
-        variables: {
-          feedback: {
-            feedback: feedbackWithProjectInfo,
-          },
-        },
-      });
-      setFeedbackSent(true);
-      setFeedback('');
-    } catch (error) {
-      // TODO: Display error to user and use a logging solution
-    }
-  }
-
-  if (feedbackSent) {
-    return (
-      <div
-        className={twMerge(
-          'grid max-w-md grid-flow-row justify-center gap-4 py-4 px-5 text-center',
-          className,
-        )}
-        {...props}
-      >
-        <Image
-          src="/assets/FeedbackReceived.svg"
-          alt="Light bulb with a checkmark"
-          width={72}
-          height={72}
-        />
-
-        <div className="grid grid-flow-row gap-2">
-          <Text variant="h3" component="h2" className="text-center">
-            Feedback Received
-          </Text>
-
-          <Text>
-            Thanks for sending us your thoughts! Feel free to send more feedback
-            as you explore the beta, and stay tuned for updates.
-          </Text>
-        </div>
-
-        <Button
-          variant="outlined"
-          color="secondary"
-          className="mt-2 text-sm+ font-normal"
-          onClick={handleClose}
-        >
-          Go Back
-        </Button>
-      </div>
-    );
-  }
-
-  return (
-    <div
-      className={twMerge(
-        'grid max-w-md grid-flow-row gap-2 py-4 px-5',
-        className,
-      )}
-      {...props}
-    >
-      <Text variant="h3" component="h2">
-        Leave Feedback
-      </Text>
-
-      <Text>
-        Nhost is still in beta and not everything is in place yet, but we&apos;d
-        love to know what you think of it so far.
-      </Text>
-
-      <form onSubmit={handleSubmit} className="grid grid-flow-row gap-2">
-        <div className="grid grid-flow-col place-content-between gap-2">
-          <Text className="font-medium">
-            What do you think we should improve?
-          </Text>
-
-          <Avatar
-            className="h-6 w-6 rounded-full"
-            alt={user?.displayName}
-            src={user?.avatarUrl}
-          >
-            {user?.displayName}
-          </Avatar>
-        </div>
-
-        <Input
-          multiline
-          value={feedback}
-          onChange={(event) => setFeedback(event.target.value)}
-          placeholder="Your feedback"
-          rows={6}
-          required
-          fullWidth
-          hideEmptyHelperText
-        />
-
-        <Button type="submit" disabled={!feedback} loading={loading}>
-          Send Feedback
-        </Button>
-      </form>
-    </div>
-  );
-}

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

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

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

@@ -1,4 +1,4 @@
-import { FeedbackForm } from '@/components/common/FeedbackForm';
+import { ContactUs } from '@/components/common/ContactUs';
 import { NavLink } from '@/components/common/NavLink';
 import { AccountMenu } from '@/components/layout/AccountMenu';
 import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
@@ -75,14 +75,14 @@ export default function Header({ className, ...props }: HeaderProps) {
               hideChevron
               className="rounded-md px-2.5 py-1.5 text-sm motion-safe:transition-colors"
             >
-              Feedback
+              Contact us
             </Dropdown.Trigger>
 
             <Dropdown.Content
               transformOrigin={{ vertical: 'top', horizontal: 'right' }}
               anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
             >
-              <FeedbackForm className="max-w-md" />
+              <ContactUs className="max-w-md" />
             </Dropdown.Content>
           </Dropdown.Root>
         )}

dashboard/src/components/layout/MobileNav/MobileNav.tsx

@@ -1,4 +1,4 @@
-import { FeedbackForm } from '@/components/common/FeedbackForm';
+import { ContactUs } from '@/components/common/ContactUs';
 import { NavLink } from '@/components/common/NavLink';
 import { ThemeSwitcher } from '@/components/common/ThemeSwitcher';
 import { Nav } from '@/components/presentational/Nav';
@@ -171,7 +171,7 @@ export default function MobileNav({ className, ...props }: MobileNavProps) {
                       className="w-full"
                       role={undefined}
                     >
-                      <ListItem.Text>Feedback</ListItem.Text>
+                      <ListItem.Text>Contact us</ListItem.Text>
                     </ListItem.Button>
                   </ListItem.Root>
                 </Dropdown.Trigger>
@@ -180,7 +180,7 @@ export default function MobileNav({ className, ...props }: MobileNavProps) {
                   transformOrigin={{ vertical: 'top', horizontal: 'center' }}
                   anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
                 >
-                  <FeedbackForm className="max-w-md" />
+                  <ContactUs className="max-w-md" />
                 </Dropdown.Content>
               </Dropdown.Root>
             )}

dashboard/src/components/layout/SettingsLayout/SettingsLayout.tsx

@@ -1,3 +1,4 @@
+import DepricationNotice from '@/components/common/DepricationNotice/DepricationNotice';
 import type { ProjectLayoutProps } from '@/components/layout/ProjectLayout';
 import { ProjectLayout } from '@/components/layout/ProjectLayout';
 import type { SettingsSidebarProps } from '@/components/layout/SettingsSidebar';
@@ -45,44 +46,47 @@ export default function SettingsLayout({
 
       <Box
         sx={{ backgroundColor: 'background.default' }}
-        className="flex flex-col flex-auto w-full overflow-scroll overflow-x-hidden"
+        className="flex w-full flex-auto flex-col overflow-scroll overflow-x-hidden"
       >
         <RetryableErrorBoundary>
-          {hasGitRepo && (
-            <Alert
-              severity="warning"
-              className="grid grid-flow-row gap-2 place-content-center"
-            >
-              <Text color="warning" className="text-sm ">
-                As you have a connected repository, make sure to synchronize
-                your changes with{' '}
-                <code
-                  className={twMerge(
-                    'rounded-md px-2 py-px',
-                    theme.palette.mode === 'dark'
-                      ? 'bg-brown text-copper'
-                      : 'bg-slate-200 text-slate-700',
-                  )}
-                >
-                  nhost config pull
-                </code>{' '}
-                or they may be reverted with the next push.
-                <br />
-                If there are multiple projects linked to the same repository and
-                you only want these changes to apply to a subset of them, please
-                check out{' '}
-                <a
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="underline"
-                  href="https://docs.nhost.io/cli/overlays"
-                >
-                  docs.nhost.io/cli/overlays
-                </a>{' '}
-                for guidance.
-              </Text>
-            </Alert>
-          )}
+          <div className="flex flex-col space-y-2">
+            <DepricationNotice />
+            {hasGitRepo && (
+              <Alert
+                severity="warning"
+                className="grid grid-flow-row place-content-center gap-2"
+              >
+                <Text color="warning" className="text-sm ">
+                  As you have a connected repository, make sure to synchronize
+                  your changes with{' '}
+                  <code
+                    className={twMerge(
+                      'rounded-md px-2 py-px',
+                      theme.palette.mode === 'dark'
+                        ? 'bg-brown text-copper'
+                        : 'bg-slate-200 text-slate-700',
+                    )}
+                  >
+                    nhost config pull
+                  </code>{' '}
+                  or they may be reverted with the next push.
+                  <br />
+                  If there are multiple projects linked to the same repository
+                  and you only want these changes to apply to a subset of them,
+                  please check out{' '}
+                  <a
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="underline"
+                    href="https://docs.nhost.io/cli/overlays"
+                  >
+                    docs.nhost.io/cli/overlays
+                  </a>{' '}
+                  for guidance.
+                </Text>
+              </Alert>
+            )}
+          </div>
           {children}
         </RetryableErrorBoundary>
       </Box>

dashboard/src/components/settings/ProvidersUpdatedAlert.tsx

@@ -0,0 +1,100 @@
+import { useDialog } from '@/components/common/DialogProvider';
+import { Alert } from '@/components/ui/v2/Alert';
+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 { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { getToastStyleProps } from '@/utils/constants/settings';
+import { useConfirmProvidersUpdatedMutation } from '@/utils/__generated__/graphql';
+import { useTheme } from '@mui/material';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+
+export default function ProvidersUpdatedAlert() {
+  const theme = useTheme();
+  const { openAlertDialog } = useDialog();
+  const [confirmed, setConfirmed] = useState(true);
+  const { currentProject } = useCurrentWorkspaceAndProject();
+
+  const [confirmProvidersUpdated] = useConfirmProvidersUpdatedMutation({
+    variables: { id: currentProject?.id },
+  });
+
+  async function handleSubmitConfirmation() {
+    const confirmProvidersUpdatedPromise = confirmProvidersUpdated();
+
+    await toast.promise(
+      confirmProvidersUpdatedPromise,
+      {
+        loading: 'Confirming...',
+        success: 'Your settings have been updated successfully.',
+        error: 'An error occurred while trying to confirm the message.',
+      },
+      getToastStyleProps(),
+    );
+
+    setConfirmed(false);
+  }
+
+  function handleOpenConfirmationDialog() {
+    openAlertDialog({
+      title: 'Confirm all providers updated?',
+      payload: (
+        <Text variant="subtitle1" component="span">
+          Please make sure to update all providers before continuing. Your
+          sign-in flows might break if you don&apos;t.
+        </Text>
+      ),
+      props: {
+        onPrimaryAction: handleSubmitConfirmation,
+      },
+    });
+  }
+
+  if (!confirmed) {
+    return null;
+  }
+
+  return (
+    <Alert
+      severity="warning"
+      className="grid items-center grid-flow-row gap-2 p-4 place-items-center lg:grid-flow-col lg:place-content-between"
+    >
+      <div className="grid grid-flow-row gap-1 text-left">
+        <Text className="font-semibold">
+          Please update the Redirect URL for all providers being used
+        </Text>
+
+        <Text className="text-sm+">
+          We are deprecating your project&apos;s old DNS name in favor of
+          individual DNS names for each service. Please make sure to update your
+          providers to use the new auth specific URL under <b>Redirect URL</b>{' '}
+          before the 1st of February 2023.{' '}
+          <Link
+            href="https://github.com/nhost/nhost/discussions/1319"
+            target="_blank"
+            rel="noopener noreferrer"
+            underline="hover"
+            className="font-medium"
+          >
+            Read the discussion here.
+            <ArrowSquareOutIcon className="w-4 h-4 ml-1" />
+          </Link>
+        </Text>
+      </div>
+
+      <Button
+        variant="borderless"
+        className={
+          theme.palette.mode === 'dark'
+            ? 'text-white hover:bg-brown'
+            : 'text-black hover:bg-orange-300'
+        }
+        onClick={handleOpenConfirmationDialog}
+      >
+        I have updated all Redirect URLs
+      </Button>
+    </Alert>
+  );
+}

dashboard/src/components/settings/index.ts

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

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

@@ -7,14 +7,15 @@ import MaterialLinearProgress, {
 
 export interface LinearProgressProps extends MaterialLinearProgressProps {}
 
-const LinearProgress = styled(MaterialLinearProgress)(({ theme }) => ({
+const LinearProgress = styled(MaterialLinearProgress)(({ theme, value }) => ({
   height: 12,
   borderRadius: 1,
   [`&.${linearProgressClasses.colorPrimary}`]: {
     backgroundColor: theme.palette.grey[300],
   },
   [`& .${linearProgressClasses.bar}`]: {
-    backgroundColor: theme.palette.primary.main,
+    backgroundColor:
+      value >= 100 ? theme.palette.error.dark : theme.palette.primary.main,
   },
 }));
 

dashboard/src/features/authentication/settings/components/AuthServiceVersionSettings/AuthServiceVersionSettings.tsx

@@ -7,7 +7,9 @@ import { filterOptions } from '@/components/ui/v2/Autocomplete';
 import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
 import {
   GetAuthenticationSettingsDocument,
+  Software_Type_Enum,
   useGetAuthenticationSettingsQuery,
+  useGetSoftwareVersionsQuery,
   useUpdateConfigMutation,
 } from '@/generated/graphql';
 import { getToastStyleProps } from '@/utils/constants/settings';
@@ -28,15 +30,6 @@ export type AuthServiceVersionFormValues = Yup.InferType<
   typeof validationSchema
 >;
 
-const AVAILABLE_AUTH_VERSIONS = [
-  '0.21.2',
-  '0.20.1',
-  '0.20.0',
-  '0.19.3',
-  '0.19.2',
-  '0.19.1',
-];
-
 export default function AuthServiceVersionSettings() {
   const { maintenanceActive } = useUI();
   const { currentProject } = useCurrentWorkspaceAndProject();
@@ -49,9 +42,16 @@ export default function AuthServiceVersionSettings() {
     fetchPolicy: 'cache-only',
   });
 
+  const { data: authVersionsData } = useGetSoftwareVersionsQuery({
+    variables: {
+      software: Software_Type_Enum.Auth,
+    },
+  });
+
   const { version } = data?.config?.auth || {};
+  const versions = authVersionsData?.softwareVersions || [];
   const availableVersions = Array.from(
-    new Set(AVAILABLE_AUTH_VERSIONS).add(version),
+    new Set(versions.map((el) => el.version)).add(version),
   )
     .sort()
     .reverse()

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

@@ -38,6 +38,10 @@ query GetAuthenticationSettings($appId: uuid!) {
           default
           rating
         }
+        locale {
+          allowed
+          default
+        }
       }
       version
     }

dashboard/src/features/authentication/users/components/EditUserForm/EditUserForm.tsx

@@ -24,6 +24,7 @@ import { copy } from '@/utils/copy';
 import { getServerError } from '@/utils/getServerError';
 import {
   RemoteAppGetUsersDocument,
+  useGetProjectLocalesQuery,
   useGetRolesPermissionsQuery,
   useUpdateRemoteAppUserMutation,
 } from '@/utils/__generated__/graphql';
@@ -146,6 +147,14 @@ export default function EditUserForm({
     dataRoles?.config?.auth?.user?.roles?.allowed,
   );
 
+  const { data } = useGetProjectLocalesQuery({
+    variables: {
+      appId: currentProject?.id,
+    },
+  });
+
+  const allowedLocales = data?.config?.auth?.user?.locale?.allowed || [];
+
   /**
    * This will change the `disabled` field in the user to its opposite.
    * If the user is disabled, it will be enabled and vice versa.
@@ -374,12 +383,11 @@ export default function EditUserForm({
               error={!!errors.locale}
               helperText={errors?.locale?.message}
             >
-              <Option key="en" value="en">
-                en
-              </Option>
-              <Option key="fr" value="fr">
-                fr
-              </Option>
+              {allowedLocales.map((locale) => (
+                <Option key={locale} value={locale}>
+                  {locale}
+                </Option>
+              ))}
             </ControlledSelect>
           </Box>
           <Box

dashboard/src/features/database/dataGrid/components/ColumnAutocomplete/ColumnAutocomplete.test.tsx

@@ -2,8 +2,9 @@ import permissionVariablesQuery from '@/tests/msw/mocks/graphql/permissionVariab
 import hasuraMetadataQuery from '@/tests/msw/mocks/rest/hasuraMetadataQuery';
 import tableQuery from '@/tests/msw/mocks/rest/tableQuery';
 import { render, screen } from '@/tests/testUtils';
+import '@testing-library/jest-dom';
 import { setupServer } from 'msw/node';
-import { test, vi } from 'vitest';
+import { afterAll, afterEach, beforeAll, test, vi } from 'vitest';
 import ColumnAutocomplete from './ColumnAutocomplete';
 
 const server = setupServer(

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

@@ -7,7 +7,9 @@ import { filterOptions } from '@/components/ui/v2/Autocomplete';
 import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
 import {
   GetPostgresSettingsDocument,
+  Software_Type_Enum,
   useGetPostgresSettingsQuery,
+  useGetSoftwareVersionsQuery,
   useUpdateConfigMutation,
 } from '@/generated/graphql';
 import { getToastStyleProps } from '@/utils/constants/settings';
@@ -30,15 +32,6 @@ export type DatabaseServiceVersionFormValues = Yup.InferType<
   typeof validationSchema
 >;
 
-const AVAILABLE_POSTGRES_VERSIONS = [
-  '14.6-20230705-1',
-  '14.6-20230613-1',
-  '14.6-20230525',
-  '14.6-20230406-2',
-  '14.6-20230406-1',
-  '14.6-20230404',
-];
-
 export default function DatabaseServiceVersionSettings() {
   const { maintenanceActive } = useUI();
   const { currentProject } = useCurrentWorkspaceAndProject();
@@ -51,9 +44,16 @@ export default function DatabaseServiceVersionSettings() {
     fetchPolicy: 'cache-only',
   });
 
+  const { data: databaseVersionsData } = useGetSoftwareVersionsQuery({
+    variables: {
+      software: Software_Type_Enum.PostgreSql,
+    },
+  });
+
   const { version } = data?.config?.postgres || {};
+  const databaseVersions = databaseVersionsData?.softwareVersions || [];
   const availableVersions = Array.from(
-    new Set(AVAILABLE_POSTGRES_VERSIONS).add(version),
+    new Set(databaseVersions.map((el) => el.version)).add(version),
   )
     .sort()
     .reverse()

dashboard/src/features/hasura/settings/components/HasuraServiceVersionSettings/HasuraServiceVersionSettings.tsx

@@ -7,7 +7,9 @@ import { filterOptions } from '@/components/ui/v2/Autocomplete';
 import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
 import {
   GetHasuraSettingsDocument,
+  Software_Type_Enum,
   useGetHasuraSettingsQuery,
+  useGetSoftwareVersionsQuery,
   useUpdateConfigMutation,
 } from '@/generated/graphql';
 import { getToastStyleProps } from '@/utils/constants/settings';
@@ -30,16 +32,6 @@ export type HasuraServiceVersionFormValues = Yup.InferType<
   typeof validationSchema
 >;
 
-const AVAILABLE_HASURA_VERSIONS = [
-  'v2.29.0-ce',
-  'v2.28.2-ce',
-  'v2.27.0-ce',
-  'v2.25.1-ce',
-  'v2.25.0-ce',
-  'v2.24.1-ce',
-  'v2.15.2',
-];
-
 export default function HasuraServiceVersionSettings() {
   const { maintenanceActive } = useUI();
   const { currentProject, refetch: refetchWorkspaceAndProject } =
@@ -53,9 +45,16 @@ export default function HasuraServiceVersionSettings() {
     fetchPolicy: 'cache-only',
   });
 
+  const { data: hasuraVersionsData } = useGetSoftwareVersionsQuery({
+    variables: {
+      software: Software_Type_Enum.Hasura,
+    },
+  });
+
   const { version } = data?.config?.hasura || {};
+  const versions = hasuraVersionsData?.softwareVersions || [];
   const availableVersions = Array.from(
-    new Set(AVAILABLE_HASURA_VERSIONS).add(version),
+    new Set(versions.map((el) => el.version)).add(version),
   )
     .sort()
     .reverse()

dashboard/src/features/projects/common/components/Announcements/Announcements.tsx

@@ -0,0 +1,47 @@
+import { List } from '@/components/ui/v2/List';
+import { ListItem } from '@/components/ui/v2/ListItem';
+import { Text } from '@/components/ui/v2/Text';
+import { useGetAnnouncementsQuery } from '@/utils/__generated__/graphql';
+import formatDistance from 'date-fns/formatDistance';
+
+export default function Announcements() {
+  const { data, loading, error } = useGetAnnouncementsQuery();
+
+  const announcements = data?.announcements || [];
+
+  if (loading || error) {
+    return null;
+  }
+
+  return (
+    <section>
+      <Text color="secondary" className="mb-2">
+        Latest announcements
+      </Text>
+
+      <List className="relative space-y-4 border-l border-gray-200 dark:border-gray-700">
+        {announcements.map((item) => (
+          <ListItem.Root key={item.id} className="ml-4">
+            <div className="flex flex-col">
+              <time className="mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">
+                {formatDistance(new Date(item.createdAt), new Date(), {
+                  addSuffix: true,
+                })}
+              </time>
+              <a href={item.href} target="_blank" rel="noopener noreferrer">
+                <ListItem.Button
+                  dense
+                  aria-label={`View ${item.content}`}
+                  className="!p-1"
+                >
+                  <p className="text-sm">{item.content}</p>
+                </ListItem.Button>
+              </a>
+            </div>
+            <div className="absolute top-[0.15rem] -ml-[1.4rem] h-3 w-3 rounded-full border border-white bg-gray-200 dark:border-gray-900 dark:bg-gray-700" />
+          </ListItem.Root>
+        ))}
+      </List>
+    </section>
+  );
+}

dashboard/src/features/projects/common/components/Announcements/index.ts

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

dashboard/src/features/projects/common/components/AppLoader/AppLoader.tsx

@@ -1,4 +1,4 @@
-import { FeedbackForm } from '@/components/common/FeedbackForm';
+import { ContactUs } from '@/components/common/ContactUs';
 import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
 import { Button } from '@/components/ui/v2/Button';
 import { Dropdown } from '@/components/ui/v2/Dropdown';
@@ -99,7 +99,7 @@ export default function AppLoader({
             anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
             transformOrigin={{ vertical: 'top', horizontal: 'center' }}
           >
-            <FeedbackForm />
+            <ContactUs />
           </Dropdown.Content>
         </Dropdown.Root>
       )}

dashboard/src/features/projects/common/components/ApplicationErrored/ApplicationErrored.tsx

@@ -1,4 +1,4 @@
-import { FeedbackForm } from '@/components/common/FeedbackForm';
+import { ContactUs } from '@/components/common/ContactUs';
 import { Container } from '@/components/layout/Container';
 import { Modal } from '@/components/ui/v1/Modal';
 import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
@@ -250,7 +250,7 @@ export default function ApplicationErrored() {
               anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
               transformOrigin={{ vertical: 'top', horizontal: 'center' }}
             >
-              <FeedbackForm />
+              <ContactUs />
             </Dropdown.Content>
           </Dropdown.Root>
 

dashboard/src/features/projects/common/components/ApplicationUnknown/ApplicationUnknown.tsx

@@ -1,4 +1,4 @@
-import { FeedbackForm } from '@/components/common/FeedbackForm';
+import { ContactUs } from '@/components/common/ContactUs';
 import { Container } from '@/components/layout/Container';
 import { Modal } from '@/components/ui/v1/Modal';
 import { Button } from '@/components/ui/v2/Button';
@@ -65,7 +65,7 @@ export default function ApplicationUnknown() {
               anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
               transformOrigin={{ vertical: 'top', horizontal: 'center' }}
             >
-              <FeedbackForm />
+              <ContactUs />
             </Dropdown.Content>
           </Dropdown.Root>
 

dashboard/src/features/projects/common/components/DeleteServiceModal/DeleteServiceModal.tsx

@@ -0,0 +1,116 @@
+import { Box } from '@/components/ui/v2/Box';
+import { Button } from '@/components/ui/v2/Button';
+import { Checkbox } from '@/components/ui/v2/Checkbox';
+import { Text } from '@/components/ui/v2/Text';
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { getToastStyleProps } from '@/utils/constants/settings';
+import {
+  useDeleteRunServiceConfigMutation,
+  useDeleteRunServiceMutation,
+} from '@/utils/__generated__/graphql';
+import type { ApolloError } from '@apollo/client';
+import { type RunService } from 'pages/[workspaceSlug]/[appSlug]/services';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import { twMerge } from 'tailwind-merge';
+
+export interface DeleteServiceModalProps {
+  service: RunService;
+  onDelete?: () => Promise<any>;
+  close: () => void;
+}
+
+export default function DeleteServiceModal({
+  service,
+  onDelete,
+  close,
+}: DeleteServiceModalProps) {
+  const [remove, setRemove] = useState(false);
+  const [loadingRemove, setLoadingRemove] = useState(false);
+  const { currentProject } = useCurrentWorkspaceAndProject();
+  const [deleteRunService] = useDeleteRunServiceMutation();
+  const [deleteRunServiceConfig] = useDeleteRunServiceConfigMutation();
+
+  const deleteServiceAndConfig = async () => {
+    await deleteRunService({ variables: { serviceID: service.id } });
+    await deleteRunServiceConfig({
+      variables: { appID: currentProject.id, serviceID: service.id },
+    });
+    await onDelete?.();
+    close();
+  };
+
+  async function handleClick() {
+    setLoadingRemove(true);
+
+    await toast.promise(
+      deleteServiceAndConfig(),
+      {
+        loading: 'Deleting the service...',
+        success: `The service has been deleted successfully.`,
+        error: (arg: ApolloError) => {
+          // we need to get the internal error message from the GraphQL error
+          const { internal } = arg.graphQLErrors[0]?.extensions || {};
+          const { message } = (internal as Record<string, any>)?.error || {};
+
+          // we use the default Apollo error message if we can't find the
+          // internal error message
+          return (
+            message ||
+            arg.message ||
+            'An error occurred while deleting the service. Please try again.'
+          );
+        },
+      },
+      getToastStyleProps(),
+    );
+  }
+
+  return (
+    <Box className={twMerge('w-full rounded-lg p-6 text-left')}>
+      <div className="grid grid-flow-row gap-1">
+        <Text variant="h3" component="h2">
+          Delete Service {service?.config?.name}
+        </Text>
+
+        <Text variant="subtitle2">
+          Are you sure you want to delete this service?
+        </Text>
+
+        <Text
+          variant="subtitle2"
+          className="font-bold"
+          sx={{ color: (theme) => `${theme.palette.error.main} !important` }}
+        >
+          This cannot be undone.
+        </Text>
+
+        <Box className="my-4">
+          <Checkbox
+            id="accept-1"
+            label={`I'm sure I want to delete ${service?.config?.name}`}
+            className="py-2"
+            checked={remove}
+            onChange={(_event, checked) => setRemove(checked)}
+            aria-label="Confirm Delete Project #1"
+          />
+        </Box>
+
+        <div className="grid grid-flow-row gap-2">
+          <Button
+            color="error"
+            onClick={handleClick}
+            disabled={!remove}
+            loading={loadingRemove}
+          >
+            Delete Service
+          </Button>
+
+          <Button variant="outlined" color="secondary" onClick={close}>
+            Cancel
+          </Button>
+        </div>
+      </div>
+    </Box>
+  );
+}

dashboard/src/features/projects/common/components/DeleteServiceModal/index.ts

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

dashboard/src/features/projects/common/components/WorkspaceSidebar/WorkspaceSidebar.tsx

@@ -8,6 +8,7 @@ import { PlusCircleIcon } from '@/components/ui/v2/icons/PlusCircleIcon';
 import { List } from '@/components/ui/v2/List';
 import { ListItem } from '@/components/ui/v2/ListItem';
 import { Text } from '@/components/ui/v2/Text';
+import { Announcements } from '@/features/projects/common/components/Announcements';
 import { EditWorkspaceNameForm } from '@/features/projects/workspaces/components/EditWorkspaceNameForm';
 import type { Workspace } from '@/types/application';
 import Image from 'next/image';
@@ -38,6 +39,8 @@ export default function WorkspaceSidebar({
       )}
       {...props}
     >
+      <Announcements />
+
       <section className="grid grid-flow-row gap-2">
         <Text color="secondary">My Workspaces</Text>
 

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

@@ -111,7 +111,6 @@ export default function useCurrentWorkspaceAndProject(): UseCurrentWorkspaceAndP
         awsName: null,
         domain: null,
       },
-      isProvisioned: true,
       createdAt: new Date().toISOString(),
       desiredState: ApplicationStatus.Live,
       featureFlags: [],

dashboard/src/features/projects/common/hooks/useProjectRoutes/useProjectRoutes.tsx

@@ -14,7 +14,6 @@ import type { SvgIconProps } from '@/components/ui/v2/icons/SvgIcon';
 import { UserIcon } from '@/components/ui/v2/icons/UserIcon';
 import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
 import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
-import { useHypertune } from '@/hooks/useHypertune';
 import type { ReactElement } from 'react';
 
 export interface ProjectRoute {
@@ -58,26 +57,8 @@ export interface ProjectRoute {
 export default function useProjectRoutes() {
   const isPlatform = useIsPlatform();
   const { maintenanceActive } = useUI();
-  const {
-    currentWorkspace,
-    currentProject,
-    loading: currentProjectLoading,
-  } = useCurrentWorkspaceAndProject();
-
-  const hypertune = useHypertune();
-
-  const enableServices =
-    currentWorkspace &&
-    hypertune
-      .root({
-        context: {
-          workSpace: {
-            id: currentWorkspace.id,
-          },
-        },
-      })
-      .enableServices({})
-      .get(false);
+  const { currentProject, loading: currentProjectLoading } =
+    useCurrentWorkspaceAndProject();
 
   const nhostRoutes: ProjectRoute[] = [
     {
@@ -118,7 +99,7 @@ export default function useProjectRoutes() {
     },
   ];
 
-  let allRoutes: ProjectRoute[] = [
+  const allRoutes: ProjectRoute[] = [
     {
       relativePath: '/',
       exact: true,
@@ -156,18 +137,15 @@ export default function useProjectRoutes() {
       label: 'Storage',
       icon: <StorageIcon />,
     },
-  ];
-
-  if (enableServices) {
-    allRoutes.push({
+    {
       relativePath: '/services',
       exact: false,
       label: 'Run',
       icon: <ServicesIcon />,
-    });
-  }
-
-  allRoutes = [...allRoutes, ...nhostRoutes];
+      disabled: !isPlatform,
+    },
+    ...nhostRoutes,
+  ];
 
   return {
     nhostRoutes,

dashboard/src/features/projects/environmentVariables/settings/components/BaseEnvironmentVariableForm/BaseEnvironmentVariableForm.tsx

@@ -128,6 +128,8 @@ export default function BaseEnvironmentVariableForm({
           error={!!errors.value}
           helperText={errors?.value?.message}
           fullWidth
+          multiline
+          rows={5}
           autoComplete="off"
           autoFocus={mode === 'edit'}
         />

dashboard/src/features/projects/overview/components/OverviewMetrics/OverviewMetrics.tsx

@@ -41,11 +41,6 @@ export default function OverviewMetrics() {
         numberOfDecimals: 0,
       }),
     },
-    {
-      label: 'Egress Volume',
-      tooltip: 'Amount of data your services have sent to users',
-      value: prettifySize(data?.egressVolume?.value || 0),
-    },
     {
       label: 'Logs',
       tooltip: 'Amount of logs stored',

dashboard/src/features/projects/overview/components/OverviewUsage/OverviewUsage.tsx

@@ -96,7 +96,7 @@ export function OverviewUsageMetrics() {
     remoteAppMetricsData?.filesAggregate?.aggregate?.sum?.size || 0;
   const totalStorage = currentProject?.plan?.isFree
     ? 1 * 1000 ** 3 // 1 GB
-    : 10 * 1000 ** 3; // 10 GB
+    : 50 * 1000 ** 3; // 10 GB
 
   // metrics for users
   const usedUsers = remoteAppMetricsData?.usersAggregate?.aggregate?.count || 0;
@@ -105,6 +105,16 @@ export function OverviewUsageMetrics() {
   // metrics for functions
   const usedFunctions = functionsInfoData?.app.metadataFunctions.length || 0;
   const totalFunctions = currentProject?.plan?.isFree ? 10 : 50;
+  const usedFunctionsDuration = projectMetrics?.functionsDuration.value || 0;
+  const totalFunctionsDuration = currentProject?.plan?.isFree
+    ? 3600 // 1 hour
+    : 3600 * 10; // 10 hours
+
+  // metrics for egress
+  const usedEgressVolume = projectMetrics?.egressVolume.value || 0;
+  const totalEgressVolume = currentProject?.plan?.isFree
+    ? 5 * 1000 ** 3 // 5 GB
+    : 50 * 1000 ** 3; // 50 GB
 
   if (metricsLoading) {
     return (
@@ -112,7 +122,9 @@ export function OverviewUsageMetrics() {
         <UsageProgress label="Database" percentage={0} />
         <UsageProgress label="Storage" percentage={0} />
         <UsageProgress label="Users" percentage={0} />
-        <UsageProgress label="Functions" percentage={0} />
+        <UsageProgress label="Number of Functions" percentage={0} />
+        <UsageProgress label="Functions Execution Time" percentage={0} />
+        <UsageProgress label="Egress Volume" percentage={0} />
       </div>
     );
   }
@@ -139,6 +151,18 @@ export function OverviewUsageMetrics() {
           used={usedFunctions}
           percentage={100}
         />
+
+        <UsageProgress
+          label="Functions"
+          used={usedFunctionsDuration}
+          percentage={100}
+        />
+
+        <UsageProgress
+          label="Egress"
+          used={usedEgressVolume}
+          percentage={100}
+        />
       </div>
     );
   }
@@ -167,11 +191,25 @@ export function OverviewUsageMetrics() {
       />
 
       <UsageProgress
-        label="Functions"
+        label="Number of Functions"
         used={usedFunctions}
         total={totalFunctions}
         percentage={(usedFunctions / totalFunctions) * 100}
       />
+
+      <UsageProgress
+        label="Functions Execution Time"
+        used={Math.trunc(usedFunctionsDuration)}
+        total={`${totalFunctionsDuration} seconds`}
+        percentage={(usedFunctionsDuration / totalFunctionsDuration) * 100}
+      />
+
+      <UsageProgress
+        label="Egress Volume"
+        used={prettifySize(usedEgressVolume)}
+        total={prettifySize(totalEgressVolume)}
+        percentage={(usedEgressVolume / totalEgressVolume) * 100}
+      />
     </div>
   );
 }

dashboard/src/features/projects/permissions/settings/utils/getAllPermissionVariables/getAllPermissionVariables.test.ts

@@ -1,4 +1,5 @@
 import type { PermissionVariable } from '@/types/application';
+import { expect, test } from 'vitest';
 import getAllPermissionVariables from './getAllPermissionVariables';
 
 test('should convert permission variable object to array', () => {

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

@@ -4,7 +4,6 @@ import { ArrowRightIcon } from '@/components/ui/v2/icons/ArrowRightIcon';
 import { Slider, sliderClasses } from '@/components/ui/v2/Slider';
 import { Text } from '@/components/ui/v2/Text';
 import { useProPlan } from '@/features/projects/common/hooks/useProPlan';
-import { calculateBillableResources } from '@/features/projects/resources/settings/utils/calculateBillableResources';
 import { getAllocatedResources } from '@/features/projects/resources/settings/utils/getAllocatedResources';
 import { prettifyMemory } from '@/features/projects/resources/settings/utils/prettifyMemory';
 import { prettifyVCPU } from '@/features/projects/resources/settings/utils/prettifyVCPU';
@@ -63,34 +62,7 @@ export default function TotalResourcesFormFragment({
     (formValues.totalAvailableVCPU / RESOURCE_VCPU_MULTIPLIER) *
     RESOURCE_VCPU_PRICE;
 
-  const billableResources = calculateBillableResources(
-    {
-      replicas: formValues.database?.replicas,
-      vcpu: formValues.database?.vcpu,
-      memory: formValues.database?.memory,
-    },
-    {
-      replicas: formValues.hasura?.replicas,
-      vcpu: formValues.hasura?.vcpu,
-      memory: formValues.hasura?.memory,
-    },
-    {
-      replicas: formValues.auth?.replicas,
-      vcpu: formValues.auth?.vcpu,
-      memory: formValues.auth?.memory,
-    },
-    {
-      replicas: formValues.storage?.replicas,
-      vcpu: formValues.storage?.vcpu,
-      memory: formValues.storage?.memory,
-    },
-  );
-
-  const updatedPrice =
-    Math.max(
-      priceForTotalAvailableVCPU,
-      (billableResources.vcpu / RESOURCE_VCPU_MULTIPLIER) * RESOURCE_VCPU_PRICE,
-    ) + proPlan.price;
+  const updatedPrice = priceForTotalAvailableVCPU + proPlan.price;
 
   const { vcpu: allocatedVCPU, memory: allocatedMemory } =
     getAllocatedResources(formValues);

dashboard/src/features/projects/resources/settings/utils/getAllocatedResources/getAllocatedResources.test.ts

@@ -1,4 +1,4 @@
-import { test } from 'vitest';
+import { expect, test } from 'vitest';
 import getAllocatedResources from './getAllocatedResources';
 
 test('should return the total number of allocated resources', () => {

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

@@ -43,6 +43,7 @@ import { toast } from 'react-hot-toast';
 import { parse } from 'shell-quote';
 import * as Yup from 'yup';
 import { ServiceConfirmationDialog } from './components/ServiceConfirmationDialog';
+import { ServiceDetailsDialog } from './components/ServiceDetailsDialog';
 
 export enum PortTypes {
   HTTP = 'http',
@@ -94,7 +95,7 @@ export interface ServiceFormProps extends DialogFormProps {
   /**
    * if there is initialData then it's an update operation
    */
-  initialData?: ServiceFormValues;
+  initialData?: ServiceFormValues & { subdomain?: string }; // subdomain is only set on the backend
 
   /**
    * Function to be called when the operation is cancelled.
@@ -119,6 +120,10 @@ export default function ServiceForm({
   const { currentProject } = useCurrentWorkspaceAndProject();
   const [insertRunServiceConfig] = useInsertRunServiceConfigMutation();
   const [replaceRunServiceConfig] = useReplaceRunServiceConfigMutation();
+  const [detailsServiceId, setDetailsServiceId] = useState('');
+  const [detailsServiceSubdomain, setDetailsServiceSubdomain] = useState(
+    initialData?.subdomain,
+  );
 
   const [createServiceFormError, setCreateServiceFormError] =
     useState<Error | null>(null);
@@ -196,11 +201,13 @@ export default function ServiceForm({
           config,
         },
       });
+
+      setDetailsServiceId(serviceID);
     } else {
       // Insert service config
       const {
         data: {
-          insertRunService: { id: newServiceID },
+          insertRunService: { id: newServiceID, subdomain },
         },
       } = await insertRunService({
         variables: {
@@ -227,6 +234,9 @@ export default function ServiceForm({
           },
         },
       });
+
+      setDetailsServiceId(newServiceID);
+      setDetailsServiceSubdomain(subdomain);
     }
   };
 
@@ -254,8 +264,6 @@ export default function ServiceForm({
         getToastStyleProps(),
       );
 
-      // await refetchWorkspaceAndProject();
-      // refestch the services
       onSubmit?.();
     } catch {
       // Note: The toast will handle the error.
@@ -277,6 +285,28 @@ export default function ServiceForm({
     });
   };
 
+  useEffect(() => {
+    (async () => {
+      if (detailsServiceId) {
+        openDialog({
+          title: 'Service Details',
+          component: (
+            <ServiceDetailsDialog
+              serviceID={detailsServiceId}
+              subdomain={detailsServiceSubdomain}
+              ports={formValues.ports}
+            />
+          ),
+          props: {
+            PaperProps: {
+              className: 'max-w-2xl',
+            },
+          },
+        });
+      }
+    })();
+  }, [detailsServiceId, detailsServiceSubdomain, formValues, openDialog]);
+
   const pricingExplanation = () => {
     const vCPUs = `${formValues.compute.cpu / RESOURCE_VCPU_MULTIPLIER} vCPUs`;
     const mem = `${formValues.compute.memory} MiB Mem`;

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

@@ -32,20 +32,20 @@ export default function PortsFormSection() {
     name: 'ports',
   });
 
-  const formValues = useWatch<ServiceFormValues>();
+  const formValues = useWatch<ServiceFormValues & { subdomain: string }>();
 
   const onChangePortType = (value: string | undefined, index: number) =>
     setValue(`ports.${index}.type`, value as PortTypes);
 
   const showURL = (index: number) =>
+    formValues.subdomain &&
     formValues.ports[index]?.type === PortTypes.HTTP &&
     formValues.ports[index]?.publish;
 
-  const getPortURL = (_port: string | number, _name: string) => {
+  const getPortURL = (_port: string | number, subdomain: string) => {
     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://${subdomain}-${port}.svc.${currentProject?.region.awsName}.${currentProject?.region.domain}`;
   };
 
   return (
@@ -144,7 +144,7 @@ export default function PortsFormSection() {
                 title="URL"
                 value={getPortURL(
                   formValues.ports[index]?.port,
-                  formValues.name,
+                  formValues.subdomain,
                 )}
               />
             )}

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

@@ -0,0 +1,75 @@
+import { useDialog } from '@/components/common/DialogProvider';
+import { Button } from '@/components/ui/v2/Button';
+import { Text } from '@/components/ui/v2/Text';
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { InfoCard } from '@/features/projects/overview/components/InfoCard';
+import type { ConfigRunServicePort } from '@/utils/__generated__/graphql';
+
+export interface ServiceDetailsDialogProps {
+  /**
+   * The id of the service
+   */
+  serviceID: string;
+
+  /**
+   * The subdomain of the service
+   */
+  subdomain: string;
+
+  /**
+   * The service ports
+   * We use partial here because `port` is set as required in ConfigRunServicePort
+   */
+  ports: Partial<ConfigRunServicePort>[];
+}
+
+export default function ServiceDetailsDialog({
+  serviceID,
+  subdomain,
+  ports,
+}: ServiceDetailsDialogProps) {
+  const { currentProject } = useCurrentWorkspaceAndProject();
+
+  const { closeDialog } = useDialog();
+
+  const getPortURL = (_port: string | number) => {
+    const port = Number(_port) > 0 ? Number(_port) : '[port]';
+
+    return `https://${subdomain}-${port}.svc.${currentProject?.region.awsName}.${currentProject?.region.domain}`;
+  };
+
+  return (
+    <div className="flex flex-col gap-4 px-6 pb-6">
+      <div className="flex flex-col gap-2">
+        <Text color="secondary">Private registry</Text>
+        <InfoCard
+          title=""
+          value={`registry.${currentProject.region.awsName}.${currentProject.region.domain}/${serviceID}`}
+        />
+      </div>
+
+      {ports?.length > 0 && (
+        <div className="flex flex-col gap-2">
+          <Text color="secondary">Ports</Text>
+          {ports
+            .filter((port) => port.publish)
+            .map((port) => (
+              <InfoCard
+                title={`${port.type}:${port.port}`}
+                value={getPortURL(port.port)}
+              />
+            ))}
+        </div>
+      )}
+
+      <Button
+        className="w-full"
+        color="primary"
+        onClick={() => closeDialog()}
+        autoFocus
+      >
+        OK
+      </Button>
+    </div>
+  );
+}

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

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

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

@@ -10,21 +10,14 @@ import { TrashIcon } from '@/components/ui/v2/icons/TrashIcon';
 import { UserIcon } from '@/components/ui/v2/icons/UserIcon';
 import { Text } from '@/components/ui/v2/Text';
 import { Tooltip } from '@/components/ui/v2/Tooltip';
-import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { DeleteServiceModal } from '@/features/projects/common/components/DeleteServiceModal';
 import {
   ServiceForm,
   type PortTypes,
 } from '@/features/services/components/ServiceForm';
-import { getToastStyleProps } from '@/utils/constants/settings';
 import { copy } from '@/utils/copy';
-import {
-  useDeleteRunServiceConfigMutation,
-  useDeleteRunServiceMutation,
-} from '@/utils/__generated__/graphql';
-import type { ApolloError } from '@apollo/client';
 import { formatDistanceToNow } from 'date-fns';
 import type { RunService } from 'pages/[workspaceSlug]/[appSlug]/services';
-import { toast } from 'react-hot-toast';
 
 interface ServicesListProps {
   /**
@@ -51,16 +44,7 @@ export default function ServicesList({
   onCreateOrUpdate,
   onDelete,
 }: ServicesListProps) {
-  const { openDrawer } = useDialog();
-  const [deleteRunService] = useDeleteRunServiceMutation();
-  const { currentProject } = useCurrentWorkspaceAndProject();
-  const [deleteRunServiceConfig] = useDeleteRunServiceConfigMutation();
-
-  const deleteServiceAndConfig = async (appID: string, serviceID: string) => {
-    await deleteRunService({ variables: { serviceID } });
-    await deleteRunServiceConfig({ variables: { appID, serviceID } });
-    await onDelete?.();
-  };
+  const { openDrawer, openDialog, closeDialog } = useDialog();
 
   const viewService = async (service: RunService) => {
     openDrawer({
@@ -76,6 +60,7 @@ export default function ServicesList({
           initialData={{
             ...service.config,
             image: service.config?.image?.image,
+            subdomain: service.subdomain,
             command: service.config?.command?.join(' '),
             ports: service.config?.ports?.map((item) => ({
               port: item.port,
@@ -95,28 +80,16 @@ export default function ServicesList({
     });
   };
 
-  const deleteService = async (serviceID: string) => {
-    await toast.promise(
-      deleteServiceAndConfig(currentProject.id, serviceID),
-      {
-        loading: 'Deleteing the service...',
-        success: `The service has been deleted successfully.`,
-        error: (arg: ApolloError) => {
-          // we need to get the internal error message from the GraphQL error
-          const { internal } = arg.graphQLErrors[0]?.extensions || {};
-          const { message } = (internal as Record<string, any>)?.error || {};
-
-          // we use the default Apollo error message if we can't find the
-          // internal error message
-          return (
-            message ||
-            arg.message ||
-            'An error occurred while deleting the service. Please try again.'
-          );
-        },
-      },
-      getToastStyleProps(),
-    );
+  const deleteService = async (service: RunService) => {
+    openDialog({
+      component: (
+        <DeleteServiceModal
+          service={service}
+          close={closeDialog}
+          onDelete={onDelete}
+        />
+      ),
+    });
   };
 
   return (
@@ -203,7 +176,7 @@ export default function ServicesList({
               <Dropdown.Item
                 className="grid grid-flow-col items-center gap-2 p-2 text-sm+ font-medium"
                 sx={{ color: 'error.main' }}
-                onClick={() => deleteService(service.id)}
+                onClick={() => deleteService(service)}
               >
                 <TrashIcon className="h-4 w-4" />
                 <Text className="font-medium" color="error">

dashboard/src/features/storage/settings/components/HasuraServiceVersionSettings/StorageServiceVersionSettings.tsx

@@ -7,6 +7,8 @@ import { filterOptions } from '@/components/ui/v2/Autocomplete';
 import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
 import {
   GetStorageSettingsDocument,
+  Software_Type_Enum,
+  useGetSoftwareVersionsQuery,
   useGetStorageSettingsQuery,
   useUpdateConfigMutation,
 } from '@/generated/graphql';
@@ -30,8 +32,6 @@ export type StorageServiceVersionFormValues = Yup.InferType<
   typeof validationSchema
 >;
 
-const AVAILABLE_STORAGE_VERSIONS = ['0.3.5', '0.3.4', '0.3.3', '0.3.2'];
-
 export default function StorageServiceVersionSettings() {
   const { maintenanceActive } = useUI();
   const { currentProject } = useCurrentWorkspaceAndProject();
@@ -44,9 +44,16 @@ export default function StorageServiceVersionSettings() {
     fetchPolicy: 'cache-only',
   });
 
+  const { data: storageVersionsData } = useGetSoftwareVersionsQuery({
+    variables: {
+      software: Software_Type_Enum.Storage,
+    },
+  });
+
   const { version } = data?.config?.storage || {};
+  const versions = storageVersionsData?.softwareVersions || [];
   const availableVersions = Array.from(
-    new Set(AVAILABLE_STORAGE_VERSIONS).add(version),
+    new Set(versions.map((el) => el.version)).add(version),
   )
     .sort()
     .reverse()

dashboard/src/gql/app/getProjectLocales.graphql

@@ -0,0 +1,12 @@
+query getProjectLocales($appId: uuid!) {
+  config(appID: $appId, resolve: true) {
+    auth {
+      user {
+        locale {
+          allowed
+          default
+        }
+      }
+    }
+  }
+}

dashboard/src/gql/app/getProjectMetrics.gql

@@ -17,6 +17,9 @@ query GetProjectMetrics(
   ) {
     value
   }
+  functionsDuration: getFunctionsDuration(appID: $appId, from: $from, to: $to) {
+    value
+  }
   postgresVolumeCapacity: getPostgresVolumeCapacity(appID: $appId) {
     value
   }

dashboard/src/gql/fragments/project.gql

@@ -4,7 +4,6 @@ fragment Project on apps {
   name
   repositoryProductionBranch
   subdomain
-  isProvisioned
   createdAt
   desiredState
   nhostBaseFolder

dashboard/src/gql/platform/getAnnouncements.gql

@@ -0,0 +1,14 @@
+query getAnnouncements($limit: Int) {
+  announcements(
+    order_by: { createdAt: desc }
+    limit: $limit
+    where: {
+      _or: [{ expiresAt: { _is_null: true } }, { expiresAt: { _gt: now } }]
+    }
+  ) {
+    id
+    href
+    content
+    createdAt
+  }
+}

dashboard/src/gql/platform/getSoftwareVersions.gql

@@ -0,0 +1,9 @@
+query getSoftwareVersions($software: software_type_enum!) {
+  softwareVersions(
+    where: { software: { _eq: $software } }
+    order_by: { version: desc }
+  ) {
+    version
+    software
+  }
+}

dashboard/src/gql/services/getRunService.graphql

@@ -1,6 +1,7 @@
 query getRunService($id: uuid!, $resolve: Boolean!) {
   runService(id: $id) {
     id
+    subdomain
     config(resolve: $resolve) {
       name
       image {

dashboard/src/gql/services/getRunServices.graphql

@@ -9,6 +9,7 @@ query getRunServices(
       id
       createdAt
       updatedAt
+      subdomain
       config(resolve: $resolve) {
         name
         image {

dashboard/src/gql/services/inserRunService.graphql

@@ -1,6 +1,6 @@
 mutation insertRunService($object: run_service_insert_input!) {
   insertRunService(object: $object) {
     id
-    appID
+    subdomain
   }
 }

dashboard/src/gql/settings/confirmProvidersUpdated.gql

@@ -0,0 +1,5 @@
+mutation confirmProvidersUpdated($id: uuid!) {
+  updateApp(pk_columns: { id: $id }, _set: { providersUpdated: true }) {
+    id
+  }
+}

dashboard/src/pages/[workspaceSlug]/[appSlug]/backups.tsx

@@ -1,3 +1,4 @@
+import DepricationNotice from '@/components/common/DepricationNotice/DepricationNotice';
 import { Container } from '@/components/layout/Container';
 import { ProjectLayout } from '@/components/layout/ProjectLayout';
 import { RetryableErrorBoundary } from '@/components/presentational/RetryableErrorBoundary';
@@ -67,5 +68,10 @@ export default function BackupsPage() {
 }
 
 BackupsPage.getLayout = function getLayout(page: ReactElement) {
-  return <ProjectLayout>{page}</ProjectLayout>;
+  return (
+    <ProjectLayout>
+      <DepricationNotice />
+      {page}
+    </ProjectLayout>
+  );
 };

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

@@ -1,3 +1,4 @@
+import DepricationNotice from '@/components/common/DepricationNotice/DepricationNotice';
 import { InlineCode } from '@/components/presentational/InlineCode';
 import { DataBrowserEmptyState } from '@/features/database/dataGrid/components/DataBrowserEmptyState';
 import { DataBrowserLayout } from '@/features/database/dataGrid/components/DataBrowserLayout';
@@ -35,5 +36,10 @@ export default function DataBrowserDatabaseDetailsPage() {
 DataBrowserDatabaseDetailsPage.getLayout = function getLayout(
   page: ReactElement,
 ) {
-  return <DataBrowserLayout>{page}</DataBrowserLayout>;
+  return (
+    <DataBrowserLayout>
+      <DepricationNotice />
+      {page}
+    </DataBrowserLayout>
+  );
 };

dashboard/src/pages/[workspaceSlug]/[appSlug]/deployments/[deploymentId].tsx

@@ -1,3 +1,4 @@
+import DepricationNotice from '@/components/common/DepricationNotice/DepricationNotice';
 import { Container } from '@/components/layout/Container';
 import { ProjectLayout } from '@/components/layout/ProjectLayout';
 import type { DeploymentStatus } from '@/components/presentational/StatusCircle';
@@ -105,7 +106,7 @@ export default function DeploymentDetailsPage() {
             <Text color="secondary">{relativeDateOfDeployment}</Text>
           </div>
         </div>
-        <div className=" flex items-center">
+        <div className="flex items-center ">
           <Link
             className="self-center font-mono font-medium"
             target="_blank"
@@ -139,7 +140,7 @@ export default function DeploymentDetailsPage() {
 
           {deployment.deploymentLogs.map((log) => (
             <div key={log.id} className="flex font-mono">
-              <div className=" mr-2 flex-shrink-0">
+              <div className="mr-2 flex-shrink-0 ">
                 {format(parseISO(log.createdAt), 'HH:mm:ss')}:
               </div>
               <div className="break-all">{log.message}</div>
@@ -152,5 +153,10 @@ export default function DeploymentDetailsPage() {
 }
 
 DeploymentDetailsPage.getLayout = function getLayout(page: ReactElement) {
-  return <ProjectLayout>{page}</ProjectLayout>;
+  return (
+    <ProjectLayout>
+      <DepricationNotice />
+      {page}
+    </ProjectLayout>
+  );
 };

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

@@ -1,3 +1,4 @@
+import DepricationNotice from '@/components/common/DepricationNotice/DepricationNotice';
 import { useUI } from '@/components/common/UIProvider';
 import { Container } from '@/components/layout/Container';
 import { ProjectLayout } from '@/components/layout/ProjectLayout';
@@ -67,5 +68,10 @@ export default function DeploymentsPage() {
 }
 
 DeploymentsPage.getLayout = function getLayout(page: ReactElement) {
-  return <ProjectLayout>{page}</ProjectLayout>;
+  return (
+    <ProjectLayout>
+      <DepricationNotice />
+      {page}
+    </ProjectLayout>
+  );
 };

dashboard/src/pages/[workspaceSlug]/[appSlug]/graphql.tsx

@@ -1,3 +1,4 @@
+import DepricationNotice from '@/components/common/DepricationNotice/DepricationNotice';
 import { ProjectLayout } from '@/components/layout/ProjectLayout';
 import { LoadingScreen } from '@/components/presentational/LoadingScreen';
 import { RetryableErrorBoundary } from '@/components/presentational/RetryableErrorBoundary';
@@ -351,6 +352,7 @@ GraphQLPage.getLayout = function getLayout(page: ReactElement) {
         },
       }}
     >
+      <DepricationNotice />
       {page}
     </ProjectLayout>
   );

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

@@ -1,3 +1,4 @@
+import DepricationNotice from '@/components/common/DepricationNotice/DepricationNotice';
 import { Container } from '@/components/layout/Container';
 import { ProjectLayout } from '@/components/layout/ProjectLayout';
 import { LoadingScreen } from '@/components/presentational/LoadingScreen';
@@ -114,5 +115,10 @@ export default function HasuraPage() {
 }
 
 HasuraPage.getLayout = function getLayout(page: ReactElement) {
-  return <ProjectLayout>{page}</ProjectLayout>;
+  return (
+    <ProjectLayout>
+      <DepricationNotice />
+      {page}
+    </ProjectLayout>
+  );
 };

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

@@ -1,3 +1,4 @@
+import DepricationNotice from '@/components/common/DepricationNotice/DepricationNotice';
 import { ProjectLayout } from '@/components/layout/ProjectLayout';
 import { ApplicationErrored } from '@/features/projects/common/components/ApplicationErrored';
 import { ApplicationLive } from '@/features/projects/common/components/ApplicationLive';
@@ -49,5 +50,10 @@ export default function AppIndexPage() {
 }
 
 AppIndexPage.getLayout = function getLayout(page: ReactElement) {
-  return <ProjectLayout>{page}</ProjectLayout>;
+  return (
+    <ProjectLayout>
+      <DepricationNotice />
+      {page}
+    </ProjectLayout>
+  );
 };

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

@@ -1,3 +1,4 @@
+import DepricationNotice from '@/components/common/DepricationNotice/DepricationNotice';
 import { ProjectLayout } from '@/components/layout/ProjectLayout';
 import { RetryableErrorBoundary } from '@/components/presentational/RetryableErrorBoundary';
 import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
@@ -134,5 +135,10 @@ export default function LogsPage() {
 }
 
 LogsPage.getLayout = function getLayout(page: ReactElement) {
-  return <ProjectLayout>{page}</ProjectLayout>;
+  return (
+    <ProjectLayout>
+      <DepricationNotice />
+      {page}
+    </ProjectLayout>
+  );
 };

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

@@ -1,3 +1,4 @@
+import DepricationNotice from '@/components/common/DepricationNotice/DepricationNotice';
 import { Container } from '@/components/layout/Container';
 import { ProjectLayout } from '@/components/layout/ProjectLayout';
 import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
@@ -126,5 +127,10 @@ export default function MetricsPage() {
 }
 
 MetricsPage.getLayout = function getLayout(page: ReactElement) {
-  return <ProjectLayout>{page}</ProjectLayout>;
+  return (
+    <ProjectLayout>
+      <DepricationNotice />
+      {page}
+    </ProjectLayout>
+  );
 };

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

@@ -12,6 +12,7 @@ import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/
 import type { GetRunServicesQuery } from '@/utils/__generated__/graphql';
 import { useGetRunServicesQuery } from '@/utils/__generated__/graphql';
 
+import DepricationNotice from '@/components/common/DepricationNotice/DepricationNotice';
 import { UpgradeNotification } from '@/features/projects/common/components/UpgradeNotification';
 import {
   ServiceForm,
@@ -43,7 +44,7 @@ export default function ServicesPage() {
   const router = useRouter();
   const { openDrawer, openAlertDialog } = useDialog();
   const { currentProject } = useCurrentWorkspaceAndProject();
-  const isPlanFree = currentProject.plan.isFree;
+  const isPlanFree = currentProject?.plan?.isFree;
 
   const [currentPage, setCurrentPage] = useState(
     parseInt(router.query.page as string, 10) || 1,
@@ -258,5 +259,10 @@ export default function ServicesPage() {
 }
 
 ServicesPage.getLayout = function getLayout(page: ReactElement) {
-  return <ProjectLayout>{page}</ProjectLayout>;
+  return (
+    <ProjectLayout>
+      <DepricationNotice />
+      {page}
+    </ProjectLayout>
+  );
 };

dashboard/src/pages/[workspaceSlug]/[appSlug]/settings/sign-in-methods/index.tsx

@@ -1,5 +1,6 @@
 import { Container } from '@/components/layout/Container';
 import { SettingsLayout } from '@/components/layout/SettingsLayout';
+import { ProvidersUpdatedAlert } from '@/components/settings';
 import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
 import { AnonymousSignInSettings } from '@/features/authentication/settings/components/AnonymousSignInSettings';
 import { AppleProviderSettings } from '@/features/authentication/settings/components/AppleProviderSettings';
@@ -54,6 +55,7 @@ export default function SettingsSignInMethodsPage() {
       <WebAuthnSettings />
       <AnonymousSignInSettings />
       <SMSSettings />
+      {!currentProject.providersUpdated && <ProvidersUpdatedAlert />}
       <AppleProviderSettings />
       <AzureADProviderSettings />
       <DiscordProviderSettings />

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

@@ -1,3 +1,4 @@
+import DepricationNotice from '@/components/common/DepricationNotice/DepricationNotice';
 import { ProjectLayout } from '@/components/layout/ProjectLayout';
 import { LoadingScreen } from '@/components/presentational/LoadingScreen';
 import { RetryableErrorBoundary } from '@/components/presentational/RetryableErrorBoundary';
@@ -44,6 +45,7 @@ StoragePage.getLayout = function getLayout(page: ReactElement) {
     <ProjectLayout
       mainContainerProps={{ sx: { backgroundColor: 'background.default' } }}
     >
+      <DepricationNotice />
       {page}
     </ProjectLayout>
   );

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

@@ -1,3 +1,4 @@
+import DepricationNotice from '@/components/common/DepricationNotice/DepricationNotice';
 import { useDialog } from '@/components/common/DialogProvider';
 import { Pagination } from '@/components/common/Pagination';
 import { Container } from '@/components/layout/Container';
@@ -390,6 +391,7 @@ export default function UsersPage() {
 UsersPage.getLayout = function getLayout(page: ReactElement) {
   return (
     <ProjectLayout contentContainerProps={{ className: 'h-full' }}>
+      <DepricationNotice />
       {page}
     </ProjectLayout>
   );

dashboard/src/pages/_app.tsx

@@ -1,4 +1,3 @@
-import AnnouncementProvider from '@/components/common/Announcement/AnnouncementProvider';
 import { DialogProvider } from '@/components/common/DialogProvider';
 import { UIProvider } from '@/components/common/UIProvider';
 import { RetryableErrorBoundary } from '@/components/presentational/RetryableErrorBoundary';
@@ -106,9 +105,7 @@ function MyApp({
               >
                 <RetryableErrorBoundary>
                   <DialogProvider>
-                    <AnnouncementProvider>
-                      {getLayout(<Component {...pageProps} />)}
-                    </AnnouncementProvider>
+                    {getLayout(<Component {...pageProps} />)}
                   </DialogProvider>
                 </RetryableErrorBoundary>
               </ThemeProvider>

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

@@ -133,10 +133,12 @@ export default function SelectWorkspaceAndProject() {
 
   if (loading) {
     return (
-      <ActivityIndicator
-        delay={500}
-        label="Loading workspaces and projects..."
-      />
+      <div className="flex w-full justify-center">
+        <ActivityIndicator
+          delay={500}
+          label="Loading workspaces and projects..."
+        />
+      </div>
     );
   }
 

dashboard/src/tests/mocks.ts

@@ -48,7 +48,6 @@ export const mockApplication: Project = {
   slug: 'test-application',
   appStates: [],
   subdomain: '',
-  isProvisioned: true,
   region: {
     awsName: 'us-east-1',
     city: 'New York',

docs/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @nhost/docs
 
+## 0.6.2
+
+### Patch Changes
+
+- 4fe4a1696: return `refreshToken` immediately after signIn and signUp
+
+## 0.6.1
+
+### Patch Changes
+
+- 612d75496: updated postgres and graphql documentation
+- 3b3e83a21: fix(docs): correct rendering of mermaid diagrams in dark mode
+- 765b398b2: added jit settings documentation
+- 30aae1557: minor fix to performance documentation
+- a3efc1d13: docs: added storage/antivirus documentation
+
+## 0.6.0
+
+### Minor Changes
+
+- 9aaa407d2: Fix messaging around Run's private beta
+
+## 0.5.1
+
+### Patch Changes
+
+- 819e1e97d: update fqdn format for nhost run
+
 ## 0.5.0
 
 ### Minor Changes

docs/docs/database/extensions.mdx

@@ -0,0 +1,159 @@
+---
+title: 'Extensions'
+sidebar_position: 4
+---
+
+## postgis
+
+PostGIS extends the capabilities of the PostgreSQL relational database by adding support storing, indexing and querying geographic data.
+
+### Managing
+
+To install the extension you can create a migration with the following contents:
+
+```
+SET ROLE postgres;
+CREATE EXTENSION postgis;
+```
+
+To uninstall it, you can use the following migration:
+
+```
+SET ROLE postgres;
+DROP EXTENSION postgis;
+```
+
+### Resources
+
+* [Official website](https://postgis.net)
+
+## pgvector
+
+Open-source vector similarity search for Postgres. Store your vectors with the rest of your data. Supports:
+
+* exact and approximate nearest neighbor search
+* L2 distance, inner product, and cosine distance
+* any language with a Postgres client
+
+Plus ACID compliance, point-in-time recovery, JOINs, and all of the other great features of Postgres
+
+### Managing
+
+To install the extension you can create a migration with the following contents:
+
+```
+SET ROLE postgres;
+CREATE EXTENSION vector;
+```
+
+To uninstall it, you can use the following migration:
+
+```
+SET ROLE postgres;
+DROP EXTENSION vector;
+```
+
+### Resources
+
+* [GitHub](https://github.com/pgvector/pgvector)
+
+## pg_cron
+
+pg_cron is a simple cron-based job scheduler for PostgreSQL (10 or higher) that runs inside the database as an extension. It uses the same syntax as regular cron, but it allows you to schedule PostgreSQL commands directly from the database. You can also use '[1-59] seconds' to schedule a job based on an interval.
+
+### Managing
+
+To install the extension you can create a migration with the following contents:
+
+```
+SET ROLE postgres;
+CREATE EXTENSION pg_cron;
+```
+
+To uninstall it, you can use the following migration:
+
+```
+SET ROLE postgres;
+DROP EXTENSION pg_cron;
+```
+
+### Resources
+
+* [GitHub](https://github.com/citusdata/pg_cron)
+
+## hypopg
+
+HypoPG is a PostgreSQL extension adding support for hypothetical indexes.
+
+An hypothetical -- or virtual -- index is an index that doesn't really exists, and thus doesn't cost CPU, disk or any resource to create. They're useful to know if specific indexes can increase performance for problematic queries, since you can know if PostgreSQL will use these indexes or not without having to spend resources to create them.
+
+### Managing
+
+To install the extension you can create a migration with the following contents:
+
+```
+SET ROLE postgres;
+CREATE EXTENSION hypopg;
+```
+
+To uninstall it, you can use the following migration:
+
+```
+SET ROLE postgres;
+DROP EXTENSION hypopg;
+```
+
+### Resources
+
+* [GitHub](https://github.com/HypoPG/hypopg)
+* [Documentation](https://hypopg.readthedocs.io)
+
+## timescaledb
+
+TimescaleDB is an open-source database designed to make SQL scalable for time-series data. It is engineered up from PostgreSQL and packaged as a PostgreSQL extension, providing automatic partitioning across time and space (partitioning key), as well as full SQL support.
+
+### Managing
+
+To install the extension you can create a migration with the following contents:
+
+```
+SET ROLE postgres;
+CREATE EXTENSION timescaledb;
+```
+
+To uninstall it, you can use the following migration:
+
+```
+SET ROLE postgres;
+DROP EXTENSION timescaledb;
+```
+
+### Resources
+
+* [GitHub](https://github.com/timescale/timescaledb)
+* [Documentation](https://docs.timescale.com)
+* [Website](https://www.timescale.com)
+
+## pg_stat_statements
+
+The pg_stat_statements module provides a means for tracking planning and execution statistics of all SQL statements executed by a server.
+
+### Managing
+
+To install the extension you can create a migration with the following contents:
+
+```
+SET ROLE postgres;
+CREATE EXTENSION pg_stat_statements;
+```
+
+To uninstall it, you can use the following migration:
+
+```
+SET ROLE postgres;
+DROP EXTENSION pg_stat_statements;
+```
+
+### Resources
+
+* [Documentation](https://www.postgresql.org/docs/14/pgstatstatements.html)

docs/docs/database/performance.mdx

@@ -0,0 +1,89 @@
+---
+title: 'Performance'
+sidebar_position: 4
+---
+
+Ensuring a healthy and performant PostgreSQL service is crucial as it directly impacts the overall response time and stability of your backend. Since Postgres serves as the centerpiece of your backend, prioritize the optimization and maintenance of your Postgres service to achieve the desired performance and reliability.
+
+In case your Postgres service is not meeting your performance expectations, you can explore the following options:
+
+1.	Consider upgrading your [dedicated compute](/platform/compute) resources to provide more processing power and memory to the Postgres server.
+
+2.	Fine-tune the configuration parameters of Postgres to optimize its performance. Adjust settings such as `shared_buffers`, `work_mem`, and `effective_cache_size` to better align with your workload and server resources.
+
+3.	Identify and analyze slow-performing queries using tools like query logs or query monitoring extensions. Optimize or rewrite these queries to improve their efficiency.
+
+4.	Evaluate the usage of indexes in your database. Identify queries that could benefit from additional indexes and strategically add them to improve query performance.
+
+By implementing these steps, you can effectively address performance concerns and enhance the overall performance of your Postgres service.
+
+## Upgrade to our latest postgres image
+
+Before trying anything else, always upgrade to our latest postgres image first. You can find our availables images in the dashbhoard, under your database settings.
+
+## Upgrading dedicated compute
+
+Increasing CPU and memory is the simplest way to address performance issues. You can read more about compute resources [here](/platform/compute).
+
+## Fine-tune configuration parameters
+
+When optimizing your Postgres setup, you can consider adjusting various Postgres settings. You can find a list of these parameters [here](/database/settings). Keep in mind that the optimal values for these parameters will depend on factors such as available resources, workload, and data distribution.
+
+To help you get started, you can use [pgtune](https://pgtune.leopard.in.ua) as a reference tool. Pgtune can generate recommended configuration settings based on your system specifications. By providing information about your system, it can suggest parameter values that may be a good starting point for optimization.
+
+However, it's important to note that the generated settings from pgtune are not guaranteed to be the best for your specific environment. It's always recommended to review and customize the suggested settings based on your particular requirements, performance testing, and ongoing monitoring of your Postgres database.
+
+## Identifying slow queries
+
+Monitoring slow queries is a highly effective method for tackling performance issues. Several tools leverage [pg_stat_statements](https://www.postgresql.org/docs/14/pgstatstatements.html), a PostgreSQL extension, to provide constant monitoring. You can employ these tools to identify and address slow queries in real-time.
+
+### pghero
+
+[PgHero](https://github.com/ankane/pghero) is one of such tools you can use to idenfity and address slow queries. You can easily run pghero alongside your postgres with [Nhost Run](/run):
+
+1. First, make sure the extension [pg_stat_statements](/database/extensions#pg_stat_statements) is enabled.
+
+2. Click on this [one-click install link](https://app.nhost.io:/run-one-click-install?config=eyJuYW1lIjoicGdoZXJvIiwiaW1hZ2UiOnsiaW1hZ2UiOiJkb2NrZXIuaW8vYW5rYW5lL3BnaGVybzpsYXRlc3QifSwiY29tbWFuZCI6W10sInJlc291cmNlcyI6eyJjb21wdXRlIjp7ImNwdSI6MTI1LCJtZW1vcnkiOjI1Nn0sInN0b3JhZ2UiOltdLCJyZXBsaWNhcyI6MX0sImVudmlyb25tZW50IjpbeyJuYW1lIjoiREFUQUJBU0VfVVJMIiwidmFsdWUiOiJwb3N0Z3JlczovL3Bvc3RncmVzOltQQVNTV09SRF1AcG9zdGdyZXMtc2VydmljZTo1NDMyL1tTVUJET01BSU5dP3NzbG1vZGU9ZGlzYWJsZSJ9LHsibmFtZSI6IlBHSEVST19VU0VSTkFNRSIsInZhbHVlIjoiW1VTRVJdIn0seyJuYW1lIjoiUEdIRVJPX1BBU1NXT1JEIiwidmFsdWUiOiJbUEFTU1dPUkRdIn1dLCJwb3J0cyI6W3sicG9ydCI6ODA4MCwidHlwZSI6Imh0dHAiLCJwdWJsaXNoIjp0cnVlfV19)
+
+3. Select your project:
+![select your project](/img/database/performance/pghero_01.png)
+
+4. Replace the placeholders with your postgres password, subdomain and a user and password to protect your pghero service. Finally, click on create.
+![fill run service details](/img/database/performance/pghero_02.png)
+
+5. After confirming the service, copy the URL:
+![run service details](/img/database/performance/pghero_03.png)
+
+6. Finally, you can open the link you just copied to access pghero:
+
+![pghero](/img/database/performance/pghero_04.png)
+
+
+:::info
+When you create a new service, it can take a few minutes for the DNS (Domain Name System) to propagate. If your browser displays an error stating that it couldn't find the server or website, simply wait for a couple of minutes and then try again.
+:::
+
+After successfully setting up pghero, it will begin displaying slow queries, suggesting index proposals, and offering other valuable information. Utilize this data to enhance your service's performance.
+
+## Adding indexes
+
+Indexes can significantly enhance the speed of data retrieval. However, it's essential to be aware that they introduce additional overhead during mutations. Therefore, understanding your workload is crucial before opting to add an index.
+
+There are tools you can use to help analyze your workload and detect missing indexes.
+
+### pghero
+
+[PgHero](https://github.com/ankane/pghero), in addition to help with slow queries, can also help finding missing and duplicate indexes. See previous section on how to deploy pghero with [Nhost Run](/run).
+
+### dexter
+
+[Dexter](https://github.com/ankane/dexter) can leverage both [pg_stat_statements](https://www.postgresql.org/docs/14/pgstatstatements.html) and [hypopg](https://hypopg.readthedocs.io/en/rel1_stable/) to find and evaluate indexes. You can run dexter directly from your machine:
+
+1. Enable [hypopg](/database/extensions#hypopg)
+2. Execute the command `docker run --rm -it ankane/dexter [POSTGRES_CONN_STRING] --pg-stat-statements`
+
+```
+$ docker run --rm -it ankane/dexter [POSTGRES_CONN_STRING] --pg-stat-statements
+Processing 1631 new query fingerprints
+No new indexes found
+```

docs/docs/database/settings.mdx

@@ -0,0 +1,84 @@
+---
+title: 'Settings'
+sidebar_position: 3
+---
+
+import Tabs from '@theme/Tabs'
+import TabItem from '@theme/TabItem'
+
+Below you can find the official schema (cue) and an example to configure your postgres database:
+
+<Tabs groupId="package-manager">
+  <TabItem value="schema" label="schema">
+
+```cue
+#Postgres: {
+	version: string | *"14.6-20230705-1"
+
+	// Resources for the service, optional
+	resources?: #Resources & {
+		replicas: 1
+	}
+
+    // postgres settings of the same name in camelCase, optional
+	settings?: {
+        jit:                           "off" | "on" | *"on"
+		maxConnections:                int32 | *100
+		sharedBuffers:                 string | *"128MB"
+		effectiveCacheSize:            string | *"4GB"
+		maintenanceWorkMem:            string | *"64MB"
+		checkpointCompletionTarget:    number | *0.9
+		walBuffers:                    int32 | *-1
+		defaultStatisticsTarget:       int32 | *100
+		randomPageCost:                number | *4.0
+		effectiveIOConcurrency:        int32 | *1
+		workMem:                       string | *"4MB"
+		hugePages:                     string | *"try"
+		minWalSize:                    string | *"80MB"
+		maxWalSize:                    string | *"1GB"
+		maxWorkerProcesses:            int32 | *8
+		maxParallelWorkersPerGather:   int32 | *2
+		maxParallelWorkers:            int32 | *8
+		maxParallelMaintenanceWorkers: int32 | *2
+	}
+}
+```
+  </TabItem>
+  <TabItem value="toml" label="toml" default>
+
+```toml
+[postgres]
+version = '14.6-20230925-1'
+
+[postgres.resources.compute]
+cpu = 1000
+memory = 2048
+
+[postgres.settings]
+jit = "off"
+maxConnections = 100
+sharedBuffers = '256MB'
+effectiveCacheSize = '768MB'
+maintenanceWorkMem = '64MB'
+checkpointCompletionTarget = 0.9
+walBuffers = -1
+defaultStatisticsTarget = 100
+randomPageCost = 1.1
+effectiveIOConcurrency = 200
+workMem = '1310kB'
+hugePages = 'off'
+minWalSize = '80MB'
+maxWalSize = '1GB'
+maxWorkerProcesses = 8
+maxParallelWorkersPerGather = 2
+maxParallelWorkers = 8
+maxParallelMaintenanceWorkers = 2
+```
+
+  </TabItem>
+</Tabs>
+
+
+:::info
+At the time of writing this document postgres settings are only supported via the [configuration file](https://nhost.io/blog/config).
+:::

docs/docs/graphql/permissions.mdx

@@ -144,6 +144,14 @@ One of the most common permission requirements is that authenticated users shoul
 1. Select the **columns** you want the user to be able to read. In our case, we'll allow the user to read all columns.
 1. Click **Save**.
 
+## Known issues
+
+### Permissions are slow
+
+In certain situations, permission checks can cause significant delays. One way to identify this issue is by comparing the execution time of a GraphQL query when performed as an admin versus as a regular user. To resolve such cases, disabling the Just-in-Time (JIT) compilation in [Postgres](/database/settings) can be beneficial.
+
+[Github issue](https://github.com/hasura/graphql-engine/issues/3672)
+
 ## Next Steps
 
 Hasura has more in-depth documentation related to permissions that you can learn from:

docs/docs/graphql/settings.mdx

@@ -0,0 +1,174 @@
+---
+title: 'Settings'
+sidebar_position: 3
+---
+
+import Tabs from '@theme/Tabs'
+import TabItem from '@theme/TabItem'
+
+Below you can find the official schema (cue) and an example to configure your graphql service:
+
+<Tabs groupId="package-manager">
+  <TabItem value="schema" label="schema">
+
+```cue
+// Configuration for hasura service
+#Hasura: {
+	// Version of hasura, you can see available versions in the URL below:
+	// https://hub.docker.com/r/hasura/graphql-engine/tags
+	version: string | *"v2.33.4-ce"
+
+	// JWT Secrets configuration
+	jwtSecrets: [#JWTSecret]
+
+	// Admin secret
+	adminSecret: string
+
+	// Webhook secret
+	webhookSecret: string
+
+	// Configuration for hasura services
+	// Reference: https://hasura.io/docs/latest/deployment/graphql-engine-flags/reference/
+	settings: {
+		// HASURA_GRAPHQL_CORS_DOMAIN
+		corsDomain: [...#Url] | *["*"]
+		// HASURA_GRAPHQL_DEV_MODE
+		devMode: bool | *true
+		// HASURA_GRAPHQL_ENABLE_ALLOWLIST
+		enableAllowList: bool | *false
+		// HASURA_GRAPHQL_ENABLE_CONSOLE
+		enableConsole: bool | *true
+		// HASURA_GRAPHQL_ENABLE_REMOTE_SCHEMA_PERMISSIONS
+		enableRemoteSchemaPermissions: bool | *false
+		// HASURA_GRAPHQL_ENABLED_APIS
+		enabledAPIs: [...#HasuraAPIs] | *["metadata", "graphql", "pgdump", "config"]
+
+		// HASURA_GRAPHQL_LIVE_QUERIES_MULTIPLEXED_REFETCH_INTERVAL
+		liveQueriesMultiplexedRefetchInterval: uint32 | *1000
+	}
+
+	logs: {
+		// HASURA_GRAPHQL_LOG_LEVEL
+		level: "debug" | "info" | "error" | *"warn"
+	}
+
+	events: {
+		// HASURA_GRAPHQL_EVENTS_HTTP_POOL_SIZE
+		httpPoolSize: uint32 & >=1 & <=100 | *100
+	}
+
+	// Resources for the service
+	resources?: #Resources
+}
+```
+  </TabItem>
+  <TabItem value="toml" label="toml" default>
+
+```toml
+[hasura]
+version = ''
+adminSecret = 'adminsecret'
+webhookSecret = 'webhooksecret'
+
+[[hasura.jwtSecrets]]
+type = 'HS256'
+key = 'secret'
+
+[hasura.settings]
+corsDomain = ['*']
+devMode = false
+enableAllowList = true
+enableConsole = true
+enableRemoteSchemaPermissions = true
+enabledAPIs = ['metadata']
+liveQueriesMultiplexedRefetchInterval = 1000
+
+[hasura.logs]
+level = 'warn'
+
+[hasura.events]
+httpPoolSize = 10
+
+[hasura.resources]
+replicas = 1
+
+[hasura.resources.compute]
+cpu = 500
+memory = 1024
+```
+  </TabItem>
+</Tabs>
+
+### JWT Secret
+
+All formats supported by [hasura](https://hasura.io/docs/latest/auth/authentication/jwt/) should be supported:
+
+<Tabs groupId="package-manager">
+  <TabItem value="schema" label="schema" default>
+
+```cue
+#JWTSecret:
+	({
+		type: "HS384" | "HS512" | "RS256" | "RS384" | "RS512" | "Ed25519" | *"HS256"
+		key:  string
+	} |
+	{
+		jwk_url: #Url | *null
+	}) &
+	{
+		claims_format?: "stringified_json" | *"json"
+		audience?:      string
+		issuer?:        string
+		allowed_skew?:  uint32
+		header?:        string
+	} & {
+		claims_map?: [...#ClaimMap]
+
+	} &
+	({
+		claims_namespace: string | *"https://hasura.io/jwt/claims"
+	} |
+	{
+		claims_namespace_path: string
+	} | *{})
+
+#ClaimMap: {
+	claim: string
+	{
+		value: string
+	} | {
+		path:     string
+		default?: string
+	}
+} & {
+}
+```
+  </TabItem>
+  <TabItem value="toml" label="toml">
+
+```toml
+# example 1
+[[hasura.jwtSecrets]]
+type = 'HS256'
+key = 'secret'
+
+# example 2
+[[hasura.jwtSecrets]]
+jwk_url = 'https:/....'
+
+# example 3
+[[hasura.jwtSecrets]]
+jwk_url = "https://......"
+issuer = "https://my-auth-server.com"
+
+[[hasura.jwtSecrets.claims_map]]
+claim = "x-some-claim"
+value = "some-value"
+
+[[hasura.jwtSecrets.claims_map]]
+claim = "x-other-claim"
+path = "$.user.claim.id"
+default = "default-value"
+```
+  </TabItem>
+</Tabs>

docs/docs/run/4_networking.mdx

@@ -112,8 +112,8 @@ Currently, only services of type `http` can be exposed to the internet.
 
 2. Once the service of type `http` is published, you can connect to it using a URL with the following format:
 
-  `https://<subdomain>-<svc_name>-<port>.svc.<region>.nhost.run`
+  `https://<run_service_subdomain>-<port>.svc.<region>.nhost.run`
 
   For example:
 
-  `https://zlbmqjfczuwqvsquujno-mysvc-3000.svc.eu-central-1.nhost.run`
+  `https://zlbmqjfczuwqvsquujno-3000.svc.eu-central-1.nhost.run`

docs/docs/run/index.mdx

@@ -12,7 +12,7 @@ Nhost Run enables you to seamlessly incorporate your custom software within your
 ![Nhost Architecture Diagram](/img/run/overview.png)
 
 :::info
-Currently Nhost Run is in private beta. If you are interested in using this service feel free to reach out to us via [email](mailto:support@nhost.io), [GitHub](https://github.com/nhost/nhost/issues), or [Discord](https://discord.com/invite/9V7Qb2U)
+Currently Nhost Run is in public beta. If you find any bugs or if you have any feedback and suggestions, please reach out to us via [email](mailto:support@nhost.io), [GitHub](https://github.com/nhost/nhost/issues), or [Discord](https://discord.com/invite/9V7Qb2U)
 :::
 
 ## Use Cases

docs/docs/storage/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Storage",
+  "position": 7
+}

docs/docs/storage/av.mdx

@@ -0,0 +1,44 @@
+---
+title: Antivirus
+sidebar_label: Antivirus
+sidebar_position: 2
+---
+
+import Tabs from '@theme/Tabs'
+import TabItem from '@theme/TabItem'
+
+Integration with [clamav](https://www.clamav.net) antivirus relies on an external [clamd](https://docs.clamav.net/manual/Usage/Scanning.html#clamd) service. When a file is uploaded `hasura-storage` will create the file metadata first and then check if the file is clean with `clamd` via its TCP socket. If the file is clean the rest of the process will continue as usual. If a virus is found details about the virus will be added to the `virus` table and the rest of the process will be aborted.
+
+``` mermaid
+sequenceDiagram
+    actor User
+    User ->> storage: upload file
+    storage ->>clamav: check for virus
+    alt virus found
+        storage-->s3: abort upload
+        storage->>graphql: insert row in virus table
+    else virus not found
+        storage->>s3: upload
+        storage->>graphql: update metadata
+    end
+
+```
+
+To enable the antivirus you need to follow the next steps:
+
+
+1. Deploy using [Nhost Run](/run) a dedicated instance of `clamd` with this [one-click install link](https://app.nhost.io:/run-one-click-install?config=eyJuYW1lIjoiY2xhbWF2IiwiaW1hZ2UiOnsiaW1hZ2UiOiJkb2NrZXIuaW8vbmhvc3QvY2xhbWF2OjAuMS4xIn0sImNvbW1hbmQiOltdLCJyZXNvdXJjZXMiOnsiY29tcHV0ZSI6eyJjcHUiOjEwMDAsIm1lbW9yeSI6MjA0OH0sInN0b3JhZ2UiOltdLCJyZXBsaWNhcyI6MX0sImVudmlyb25tZW50IjpbXSwicG9ydHMiOlt7InBvcnQiOiIzMzEwIiwidHlwZSI6InRjcCIsInB1Ymxpc2giOmZhbHNlfV19).
+2. Select the project:
+![select project](/img/storage/av_01.png)
+3. Click on "Create":
+![click on create](/img/storage/av_02.png)
+4. Make sure you are running **at least** storage version 0.4.0 and enable the antivirus:
+![update settings](/img/storage/av_03.png)
+5. Wait for the service to update and try to upload a sample virus file like [eicar](https://www.eicar.org/download-anti-malware-testfile/)
+![upload virus](/img/storage/av_04.png)
+6. If the setup is working the upload should fail
+![upload fails](/img/storage/av_05.png)
+7. You can also head to hasura and verify entries were added to the `virus` table:
+![click on create](/img/storage/av_06.png)
+
+That entry should have useful information about like the filename, the virus found and the user session. In addition, the information on that table can be used a source for events.

docs/docs/storage/example_crm.mdx

@@ -0,0 +1,57 @@
+---
+title: "Example: CRM System"
+sidebar_label: "Example: CRM System"
+sidebar_position: 3
+---
+
+Let's say you want to build a CRM system and you want to store files for customers. This is one way how you could do that.
+
+Start with, you would have two tables:
+
+1. `customers` - Customer data.
+2. `customer_files` - What file belongs to what customer
+
+```text
+- customers
+  - id
+  - name
+  - address
+
+customer_files
+  - id
+  - customer_id (Foreign Key to `customers.id`)
+  - file_id (Foreign Key to `storage.files.id`)
+```
+
+You would also create a [Hasura Relationship](https://hasura.io/docs/latest/graphql/core/databases/postgres/schema/table-relationships/index/) (GraphQL relationship) between between `customers` and `customer_files` and between `customer_files` and `storage.files`.
+
+With the two tables and GraphQL relationships in place, you can query customers and the customer's files like this:
+
+```graphql
+query {
+  customers {
+    # customers table
+    id
+    name
+    customer_files {
+      # customer_files table
+      id
+      file {
+        # storage.files table
+        id
+        name
+        size
+        mimeType
+      }
+    }
+  }
+}
+```
+
+The file upload process would be as follows:
+
+1. Upload a file.
+2. Get the returned file id.
+3. Insert (GraphQL Mutation) the file `id` and the customer's `id` into the `customer_files` table.
+
+This would allow you to upload and download files belonging to specific customers in your CRM system.

docs/docs/storage/index.mdx

@@ -1,7 +1,7 @@
 ---
-title: 'Storage'
-sidebar_position: 7
+title: 'Overview'
 image: /img/og/storage.png
+sidebar_position: 1
 ---
 
 import Tabs from '@theme/Tabs'
@@ -195,57 +195,3 @@ Image Transformation works on both public and pre-signed URLs.
 ```text
 https://[subdomain].storage.[region].nhost.run/v1/files/08e6fa32-0880-4d0e-a832-278198acb363?w=500
 ```
-
-## Example: CRM System
-
-Let's say you want to build a CRM system and you want to store files for customers. This is one way how you could do that.
-
-Start with, you would have two tables:
-
-1. `customers` - Customer data.
-2. `customer_files` - What file belongs to what customer
-
-```text
-- customers
-  - id
-  - name
-  - address
-
-customer_files
-  - id
-  - customer_id (Foreign Key to `customers.id`)
-  - file_id (Foreign Key to `storage.files.id`)
-```
-
-You would also create a [Hasura Relationship](https://hasura.io/docs/latest/graphql/core/databases/postgres/schema/table-relationships/index/) (GraphQL relationship) between between `customers` and `customer_files` and between `customer_files` and `storage.files`.
-
-With the two tables and GraphQL relationships in place, you can query customers and the customer's files like this:
-
-```graphql
-query {
-  customers {
-    # customers table
-    id
-    name
-    customer_files {
-      # customer_files table
-      id
-      file {
-        # storage.files table
-        id
-        name
-        size
-        mimeType
-      }
-    }
-  }
-}
-```
-
-The file upload process would be as follows:
-
-1. Upload a file.
-2. Get the returned file id.
-3. Insert (GraphQL Mutation) the file `id` and the customer's `id` into the `customer_files` table.
-
-This would allow you to upload and download files belonging to specific customers in your CRM system.

docs/docusaurus.config.js

@@ -26,6 +26,10 @@ const config = {
   favicon: 'img/favicon.png',
   organizationName: 'nhost',
   projectName: 'docs',
+  markdown: {
+    mermaid: true
+  },
+  themes: ['@docusaurus/theme-mermaid'],
   scripts: [
     { src: 'https://plausible.io/js/script.js', defer: true, 'data-domain': 'docs.nhost.io' }
   ],
@@ -44,7 +48,6 @@ const config = {
           routeBasePath: '/',
           breadcrumbs: false,
           sidebarPath: require.resolve('./sidebars.js'),
-          remarkPlugins: [require('mdx-mermaid')],
           editUrl: 'https://github.com/nhost/nhost/edit/main/docs/'
         },
         theme: {
@@ -177,6 +180,7 @@ const config = {
         theme: lightCodeTheme,
         darkTheme: darkCodeTheme,
         defaultLanguage: 'javascript',
+        additionalLanguages: ['cue', 'toml'],
         magicComments: [
           {
             className: 'code-block-error-line',

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/docs",
-  "version": "0.5.0",
+  "version": "0.6.2",
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",
@@ -19,12 +19,13 @@
     "@docusaurus/core": "2.4.1",
     "@docusaurus/plugin-sitemap": "2.4.1",
     "@docusaurus/preset-classic": "2.4.1",
+    "@docusaurus/theme-mermaid": "2.4.1",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.2.1",
     "docusaurus-plugin-image-zoom": "^0.1.1",
-    "mdx-mermaid": "^1.3.2",
     "mermaid": "^9.0.0",
     "prism-react-renderer": "^1.3.5",
+    "prismjs": "^1.29.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "unist-util-visit": "^2.0.0"

docs/sidebars.js

@@ -44,7 +44,16 @@ const sidebars = {
         }
       ]
     },
-    'storage',
+    {
+      type: 'category',
+      label: 'Storage',
+      items: [
+        {
+          type: 'autogenerated',
+          dirName: 'storage'
+        }
+      ]
+    },
     'serverless-functions',
     {
       type: 'category',

docs/src/theme/prism-include-languages.d.ts

@@ -0,0 +1,2 @@
+import type * as PrismNamespace from 'prismjs';
+export default function prismIncludeLanguages(PrismObject: typeof PrismNamespace): void;

docs/src/theme/prism-include-languages.js

@@ -0,0 +1,20 @@
+/*global globalThis*/
+import siteConfig from '@generated/docusaurus.config'
+export default function prismIncludeLanguages(PrismObject) {
+  const {
+    themeConfig: { prism }
+  } = siteConfig
+  const { additionalLanguages } = prism
+  // Prism components work on the Prism instance on the window, while prism-
+  // react-renderer uses its own Prism instance. We temporarily mount the
+  // instance onto window, import components to enhance it, then remove it to
+  // avoid polluting global namespace.
+  // You can mutate PrismObject: registering plugins, deleting languages... As
+  // long as you don't re-assign it
+  globalThis.Prism = PrismObject
+  additionalLanguages.forEach((lang) => {
+    // eslint-disable-next-line global-require, import/no-dynamic-require
+    require(`prismjs/components/prism-${lang}`)
+  })
+  delete globalThis.Prism
+}