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

chore: update versions

.changeset/config.json

@@ -6,5 +6,5 @@
   "access": "restricted",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": []
-}
+  "ignore": ["@nhost-examples/sveltekit"]
+}

.github/actions/install-dependencies/action.yaml

@@ -26,10 +26,10 @@ runs:
         path: ${{ steps.pnpm-cache-dir.outputs.dir }}
         key: ${{ runner.os }}-node-${{ hashFiles('pnpm-lock.yaml') }}
         restore-keys: ${{ runner.os }}-node-
-    - name: Use Node.js v16
+    - name: Use Node.js v18
       uses: actions/setup-node@v3
       with:
-        node-version: 16
+        node-version: 18
     - shell: bash
       name: Install packages
       run: pnpm install --frozen-lockfile

.github/workflows/changesets.yaml

@@ -10,6 +10,7 @@ on:
       - '**.md'
       - '!.changeset/**'
       - 'LICENSE'
+  workflow_dispatch:
 
 env:
   TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
@@ -41,6 +42,7 @@ jobs:
           commit: 'chore: update versions'
           title: 'chore: update versions'
           publish: pnpm run release
+          createGithubReleases: true
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
@@ -61,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
@@ -99,7 +128,7 @@ jobs:
           password: ${{ secrets.DOCKER_PASSWORD }}
       - name: Build and push to Docker Hub
         uses: docker/build-push-action@v4
-        timeout-minutes: 60
+        timeout-minutes: 90
         with:
           context: .
           file: ./dashboard/Dockerfile
@@ -123,32 +152,6 @@ jobs:
         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
     runs-on: ubuntu-latest

.github/workflows/ci.yaml

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

.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

config/vite.react.config.js

@@ -7,7 +7,8 @@ import baseLibConfig from './vite.lib.config'
 export default defineConfig({
   ...baseLibConfig,
   optimizeDeps: {
-    include: ['react/jsx-runtime']
+    include: ['react/jsx-runtime'],
+    exclude: ['react-hook-form']
   },
   plugins: [react({ jsxRuntime: 'classic' }), ...baseLibConfig.plugins]
 })

dashboard/CHANGELOG.md

@@ -1,5 +1,164 @@
 # @nhost/dashboard
 
+## 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
+
+- 4a7ede11e: fix: distinguish files that were not uploaded
+- 202b64723: feat(nhost-run): add support for one-click-install run services
+- 074a0fa11: feat(dashboard): add settings toggle to enable/disable antivirus
+  - @nhost/react-apollo@5.0.33
+  - @nhost/nextjs@1.13.35
+
+## 0.20.6
+
+### Patch Changes
+
+- b20761e97: feat(services): add pricing info and confirmation dialog
+- 90df6d81d: fix(services): handle null values when editing a service
+- aa8508467: fix: query service logs correctly
+  feat: enable multiline support for environment value input
+
+## 0.20.5
+
+### Patch Changes
+
+- 8d7f84b8d: fix: make announcement adapt to theme
+
+## 0.20.4
+
+### Patch Changes
+
+- 3b75bfce2: fix: make announcement close properly
+- f49819075: fix: show correct values when dedicated resources are disabled
+
+## 0.20.3
+
+### Patch Changes
+
+- e643bd362: fix(services): fix errors when config is null
+- bcdab66bf: feat: add annoucement for nhost run
+- f967a2e59: added note about storage not being able to be downsized
+- 311c7756d: chore(services): consistent naming for compute
+
+## 0.20.2
+
+### Patch Changes
+
+- 9073182d5: chore(dashboard): bump `turbo` to 1.10.11
+- ece717d6e: feat(logs): show services in the logs page
+- 82b335311: feat(metrics): change grafana link to point to the dashboards
+- b135ef695: fix(services): set command as optional and set min replicas to 0
+
+## 0.20.1
+
+### Patch Changes
+
+- 3d5c34f4c: fix(auth): fix users pagination limit
+
+## 0.20.0
+
+### Minor Changes
+
+- c99d117d1: feat(services): add support for custom services
+
+## 0.19.2
+
+### Patch Changes
+
+- face99ccd: chore(deps): bump turbo version
+- cfe527307: style: tweak pull config warning in dark mode
+- a9d7da8af: chore(deps): update dependency @types/pluralize to ^0.0.30
+- 9aa4371ef: chore: add hasura-auth version 0.21.2
+- d14e112bf: chore(deps): update dependency prettier-plugin-tailwindcss to ^0.4.0
+- d3e8bb94a: chore(deps): update dependency vite-plugin-dts to v3
+
 ## 0.19.1
 
 ### Patch Changes

dashboard/Dockerfile

@@ -3,7 +3,7 @@ RUN apk add --no-cache libc6-compat
 RUN apk update
 WORKDIR /app
 
-RUN yarn global add turbo@1.10.6
+RUN yarn global add turbo@1.10.11
 COPY . .
 RUN turbo prune --scope="@nhost/dashboard" --docker
 

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/global-teardown.ts

@@ -9,7 +9,7 @@ import { openProject } from '@/e2e/utils';
 import { chromium } from '@playwright/test';
 
 async function globalTeardown() {
-  const browser = await chromium.launch();
+  const browser = await chromium.launch({ slowMo: 1000 });
 
   const context = await browser.newContext({
     baseURL: TEST_DASHBOARD_URL,
@@ -46,18 +46,23 @@ async function globalTeardown() {
   await hasuraPage.locator('a', { hasText: /data/i }).click();
   await hasuraPage.getByRole('link', { name: /sql/i }).click();
 
-  await hasuraPage.locator('#raw_sql > textarea').fill(`
-DO $$ DECLARE
-  tablename text;
-BEGIN
-  FOR tablename IN
-    SELECT table_name FROM information_schema.tables
-    WHERE table_schema = 'public'
-  LOOP
-    EXECUTE 'DROP TABLE IF EXISTS public.' || quote_ident(tablename) || ' CASCADE';
-  END LOOP;
-END $$;
-`);
+  // Set the value of the Ace code editor using JavaScript evaluation in the browser context
+  await hasuraPage.evaluate(() => {
+    const editor = ace.edit('raw_sql');
+
+    editor.setValue(`
+        DO $$ DECLARE
+          tablename text;
+        BEGIN
+          FOR tablename IN
+            SELECT table_name FROM information_schema.tables
+            WHERE table_schema = 'public'
+          LOOP
+            EXECUTE 'DROP TABLE IF EXISTS public.' || quote_ident(tablename) || ' CASCADE';
+          END LOOP;
+        END $$;
+     `);
+  });
 
   await hasuraPage.getByRole('button', { name: /run!/i }).click();
   await hasuraPage.getByText(/sql executed!/i).waitFor();

dashboard/hypertune.graphql

@@ -0,0 +1,5 @@
+query InitQuery {
+  root {
+    enableServices
+  }
+}

dashboard/hypertune.json

@@ -0,0 +1,5 @@
+{
+  "projectId": 2596,
+  "token": "U2FsdGVkX19+V8BJnVR0xLEC+42OW5qZl/A0i6beAaRmJoIhFh5Yf6eIKBzLbV9h",
+  "outputDirectoryPath": "src/hypertune"
+}

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/dashboard",
-  "version": "0.19.1",
+  "version": "0.20.20",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -54,6 +54,7 @@
     "graphql-request": "^6.0.0",
     "graphql-tag": "^2.12.6",
     "graphql-ws": "^5.11.2",
+    "hypertune": "^1.4.4",
     "just-kebab-case": "^4.1.1",
     "lodash.debounce": "^4.0.8",
     "next": "^12.3.1",
@@ -65,12 +66,14 @@
     "react-error-boundary": "^4.0.0",
     "react-hook-form": "^7.42.1",
     "react-hot-toast": "^2.4.0",
+    "react-intersection-observer": "^9.5.2",
     "react-is": "18.2.0",
     "react-loading-skeleton": "^2.2.0",
     "react-merge-refs": "^1.1.0",
     "react-syntax-highlighter": "^15.4.5",
     "react-table": "^7.8.0",
     "sharp": "^0.32.0",
+    "shell-quote": "^1.8.1",
     "slugify": "^1.6.5",
     "stripe": "^10.17.0",
     "tailwind-merge": "^1.8.0",
@@ -101,13 +104,16 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@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.29",
+    "@types/pluralize": "^0.0.30",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
     "@types/react-table": "^7.7.12",
+    "@types/shell-quote": "^1.7.1",
     "@types/testing-library__jest-dom": "^5.14.5",
     "@types/validator": "^13.7.10",
     "@typescript-eslint/eslint-plugin": "^5.43.0",
@@ -137,7 +143,7 @@
     "postcss": "^8.4.19",
     "prettier": "^2.7.1",
     "prettier-plugin-organize-imports": "^3.2.0",
-    "prettier-plugin-tailwindcss": "^0.3.0",
+    "prettier-plugin-tailwindcss": "^0.4.0",
     "react-date-fns-hooks": "^0.9.4",
     "require-from-string": "^2.0.2",
     "snake-case": "^3.0.4",

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

@@ -0,0 +1,62 @@
+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

@@ -0,0 +1,66 @@
+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

@@ -0,0 +1,92 @@
+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: 'node-18',
+  href: 'https://github.com/nhost/nhost/discussions/2239',
+  content:
+    "Starting October 1st, we're upgrading to Node.js 18 for improved performance, security, and stability. Learn more.",
+};
+
+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

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

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

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

dashboard/src/components/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/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/common/Pagination/Pagination.tsx

@@ -15,6 +15,7 @@ export type PaginationProps = DetailedHTMLProps<
    * Total number of pages.
    */
   totalNrOfPages: number;
+
   /**
    * Number of total elements per page.
    */
@@ -23,6 +24,10 @@ export type PaginationProps = DetailedHTMLProps<
    * Total number of elements.
    */
   totalNrOfElements: number;
+  /**
+   * Label of the elements displayed ex: pages, users...
+   */
+  itemsLabel: string;
   /**
    * Current page number.
    */
@@ -64,6 +69,7 @@ export default function Pagination({
   elementsPerPage,
   onPageChange,
   totalNrOfElements,
+  itemsLabel,
   ...props
 }: PaginationProps) {
   return (
@@ -132,7 +138,7 @@ export default function Pagination({
           {totalNrOfElements < currentPageNumber * elementsPerPage
             ? totalNrOfElements
             : currentPageNumber * elementsPerPage}{' '}
-          of {totalNrOfElements} users
+          of {totalNrOfElements} {itemsLabel}
         </Text>
       </div>
     </div>

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

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

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

@@ -1,4 +1,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';
@@ -54,7 +54,7 @@ export default function Header({ className, ...props }: HeaderProps) {
       sx={{ backgroundColor: 'background.paper' }}
       {...props}
     >
-      <div className="grid grid-flow-col items-center gap-3">
+      <div className="grid grid-flow-col items-center gap-3 ">
         <NavLink href="/" className="w-12">
           <Logo className="mx-auto cursor-pointer" />
         </NavLink>
@@ -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/SettingsContainer/SettingsContainer.tsx

@@ -114,7 +114,7 @@ export default function SettingsContainer({
     <Box
       {...root}
       className={twMerge(
-        'grid grid-flow-row gap-4 rounded-lg border-1 py-4',
+        'grid grid-flow-row gap-4 overflow-hidden rounded-lg border-1 py-4',
         root?.className || rootClassName,
       )}
     >

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

@@ -7,6 +7,7 @@ import { Alert } from '@/components/ui/v2/Alert';
 import { Box } from '@/components/ui/v2/Box';
 import { Text } from '@/components/ui/v2/Text';
 import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { useTheme } from '@mui/material';
 import { twMerge } from 'tailwind-merge';
 
 export interface SettingsLayoutProps extends ProjectLayoutProps {
@@ -25,6 +26,7 @@ export default function SettingsLayout({
   sidebarProps: { className: sidebarClassName, ...sidebarProps } = {},
   ...props
 }: SettingsLayoutProps) {
+  const theme = useTheme();
   const { currentProject } = useCurrentWorkspaceAndProject();
   const hasGitRepo = !!currentProject?.githubRepository;
 
@@ -43,18 +45,25 @@ export default function SettingsLayout({
 
       <Box
         sx={{ backgroundColor: 'background.default' }}
-        className="flex w-full flex-auto flex-col overflow-scroll overflow-x-hidden"
+        className="flex flex-col flex-auto w-full overflow-scroll overflow-x-hidden"
       >
         <RetryableErrorBoundary>
           {hasGitRepo && (
             <Alert
               severity="warning"
-              className="grid grid-flow-row place-content-center gap-2"
+              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="rounded-md bg-slate-200 px-2 py-px text-slate-500">
+                <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.

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/components/ui/v2/icons/CubeIcon/CubeIcon.tsx

@@ -0,0 +1,40 @@
+import type { IconProps } from '@/components/ui/v2/icons';
+
+function CubeIcon(props: IconProps) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M14 11.0826V4.91742C14 4.8287 13.9764 4.74158 13.9316 4.665C13.8868 4.58841 13.8225 4.52513 13.7451 4.48163L8.24513 1.38788C8.17029 1.34578 8.08587 1.32367 8 1.32367C7.91413 1.32367 7.82971 1.34578 7.75487 1.38788L2.25487 4.48163C2.17754 4.52513 2.11318 4.58841 2.0684 4.665C2.02361 4.74158 2 4.8287 2 4.91742V11.0826C2 11.1713 2.02361 11.2584 2.0684 11.335C2.11318 11.4116 2.17754 11.4749 2.25487 11.5184L7.75487 14.6121C7.82971 14.6542 7.91413 14.6763 8 14.6763C8.08587 14.6763 8.17029 14.6542 8.24513 14.6121L13.7451 11.5184C13.8225 11.4749 13.8868 11.4116 13.9316 11.335C13.9764 11.2584 14 11.1713 14 11.0826Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M13.9311 4.66414L8.0594 8.00001L2.06934 4.66357"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8.05916 8L8.00049 14.6763"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+CubeIcon.displayName = 'NhostCubeIcon';
+
+export default CubeIcon;

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

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

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

@@ -0,0 +1,27 @@
+import type { IconProps } from '@/components/ui/v2/icons';
+import { SvgIcon } from '@/components/ui/v2/icons/SvgIcon';
+
+function ServicesIcon(props: IconProps) {
+  return (
+    <SvgIcon
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-label="Services"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.89295 4.15125H9.21701C9.28097 4.15125 9.33291 4.09959 9.33326 4.03565V2.8556C9.33291 2.79163 9.28097 2.73999 9.21701 2.73999H7.89295C7.82909 2.73999 7.77734 2.79174 7.77734 2.8556V4.03562C7.77734 4.09948 7.82911 4.15125 7.89295 4.15125ZM5.53406 5.84862H4.21001C4.14594 5.84826 4.09411 5.79643 4.09375 5.73236V4.55298C4.09411 4.48902 4.14606 4.43738 4.21001 4.43738H5.53406C5.5979 4.43738 5.64967 4.48912 5.64967 4.55298V5.73236C5.64967 5.79631 5.59801 5.84826 5.53406 5.84862ZM14.6307 6.48419C15.4316 6.48419 15.8114 6.77094 15.8521 6.80325L16 6.92016L15.9386 7.09971C15.8408 7.34738 15.69 7.57067 15.4968 7.75398C15.2062 8.04139 14.6791 8.38436 13.8221 8.38436H13.6839C13.337 9.26145 12.8707 10.2484 12.0879 11.1345C11.6196 11.6644 11.0689 12.1152 10.457 12.4696C9.71438 12.8901 8.90665 13.1835 8.06725 13.3376C7.4634 13.45 6.85036 13.5056 6.23616 13.5036C4.87658 13.5036 3.67717 13.2453 2.93893 12.7932C2.28012 12.3908 1.77374 11.7333 1.43337 10.8407C1.13576 10.0277 0.989105 9.1673 1.00063 8.30169C1.00204 8.04363 1.21146 7.83507 1.46954 7.83472H11.3503C11.471 7.8302 12.0678 7.77917 12.4399 7.57185C12.1318 7.08484 12.0446 6.51519 12.188 5.9087C12.2639 5.59123 12.3932 5.28898 12.5703 5.01479L12.7118 4.81068L12.9268 4.93471L12.9269 4.93473C12.9668 4.9583 13.8447 5.47632 13.9996 6.53843C14.2082 6.50325 14.4192 6.48511 14.6307 6.48419ZM3.7092 7.54529H2.38514C2.32128 7.54529 2.26953 7.49353 2.26953 7.42967V6.25029V6.24964C2.26953 6.1858 2.32128 6.13403 2.38514 6.13403H3.7092H3.70985C3.77369 6.13439 3.82516 6.18643 3.8248 6.25029V7.42969C3.8248 7.49353 3.77306 7.54529 3.7092 7.54529ZM4.21003 7.54529H5.53409C5.59794 7.54529 5.64969 7.49353 5.64969 7.42969V6.25029C5.65005 6.18643 5.59858 6.13439 5.53472 6.13403H5.53407H4.21001C4.14579 6.13403 4.09375 6.18607 4.09375 6.25029V7.42967C4.09413 7.49363 4.14606 7.54529 4.21003 7.54529ZM7.38597 7.54529H6.06191C5.99808 7.54529 5.94631 7.49353 5.94629 7.42967V6.25029V6.24964C5.94629 6.1858 5.99803 6.13403 6.06189 6.13403H7.38595H7.3866C7.45046 6.13439 7.50193 6.18643 7.50157 6.25029V7.42969C7.50157 7.49353 7.44983 7.54529 7.38597 7.54529ZM7.89295 7.54529H9.21701C9.28097 7.54529 9.33291 7.49365 9.33326 7.42969V6.25029C9.33326 6.18607 9.28122 6.13403 9.21701 6.13403H7.89295C7.82909 6.13403 7.77734 6.1858 7.77734 6.24964V6.25029V7.42967C7.77734 7.49353 7.82911 7.54529 7.89295 7.54529ZM6.06189 5.84862H7.38595C7.4499 5.84826 7.50156 5.79631 7.50156 5.73236V4.55298C7.50156 4.48912 7.44979 4.43738 7.38595 4.43738H6.06189C5.99804 4.43738 5.94629 4.48915 5.94629 4.55298V5.73236C5.94629 5.79631 5.99795 5.84826 6.06189 5.84862ZM9.21701 5.84862H7.89295C7.82901 5.84826 7.77734 5.79631 7.77734 5.73236V4.55298C7.77734 4.48915 7.82909 4.43738 7.89295 4.43738H9.21701C9.28097 4.43738 9.33291 4.48902 9.33326 4.55298V5.73236C9.33291 5.79643 9.28108 5.84826 9.21701 5.84862ZM11.0637 7.54529H9.73963C9.67579 7.54529 9.62402 7.49353 9.62402 7.42967V6.25029V6.24964C9.62402 6.1858 9.67579 6.13403 9.73963 6.13403H11.0637C11.1279 6.13403 11.1799 6.18607 11.1799 6.25029V7.42969C11.1796 7.49365 11.1277 7.54529 11.0637 7.54529Z"
+        fill="currentColor"
+      />
+    </SvgIcon>
+  );
+}
+
+ServicesIcon.displayName = 'NhostServicesIcon';
+
+export default ServicesIcon;

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

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

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,14 +30,6 @@ export type AuthServiceVersionFormValues = Yup.InferType<
   typeof validationSchema
 >;
 
-const AVAILABLE_AUTH_VERSIONS = [
-  '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();
@@ -48,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/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/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/useHostName/index.ts

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

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

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

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

@@ -8,6 +8,7 @@ import { GraphQLIcon } from '@/components/ui/v2/icons/GraphQLIcon';
 import { HasuraIcon } from '@/components/ui/v2/icons/HasuraIcon';
 import { HomeIcon } from '@/components/ui/v2/icons/HomeIcon';
 import { RocketIcon } from '@/components/ui/v2/icons/RocketIcon';
+import { ServicesIcon } from '@/components/ui/v2/icons/ServicesIcon';
 import { StorageIcon } from '@/components/ui/v2/icons/StorageIcon';
 import type { SvgIconProps } from '@/components/ui/v2/icons/SvgIcon';
 import { UserIcon } from '@/components/ui/v2/icons/UserIcon';
@@ -136,6 +137,12 @@ export default function useProjectRoutes() {
       label: 'Storage',
       icon: <StorageIcon />,
     },
+    {
+      relativePath: '/services',
+      exact: false,
+      label: 'Run',
+      icon: <ServicesIcon />,
+    },
     ...nhostRoutes,
   ];
 

dashboard/src/features/projects/common/utils/generateAppServiceUrl/generateAppServiceUrl.test.ts

@@ -69,7 +69,7 @@ test('should generate a per service subdomain in remote mode', () => {
   );
 
   expect(generateAppServiceUrl('test', region, 'grafana')).toBe(
-    'https://test.grafana.eu-west-1.nhost.run',
+    'https://test.grafana.eu-west-1.nhost.run/dashboards',
   );
 });
 
@@ -102,7 +102,7 @@ test('should generate staging subdomains in staging environment', () => {
   );
 
   expect(generateAppServiceUrl('test', stagingRegion, 'grafana')).toBe(
-    'https://test.grafana.eu-west-1.staging.nhost.run',
+    'https://test.grafana.eu-west-1.staging.nhost.run/dashboards',
   );
 });
 
@@ -120,7 +120,7 @@ test('should generate no slug for Hasura and Grafana neither in local mode nor i
     'https://test.hasura.eu-west-1.staging.nhost.run',
   );
   expect(generateAppServiceUrl('test', stagingRegion, 'grafana')).toBe(
-    'https://test.grafana.eu-west-1.staging.nhost.run',
+    'https://test.grafana.eu-west-1.staging.nhost.run/dashboards',
   );
 
   process.env.NEXT_PUBLIC_ENV = 'production';
@@ -129,7 +129,7 @@ test('should generate no slug for Hasura and Grafana neither in local mode nor i
     'https://test.hasura.eu-west-1.nhost.run',
   );
   expect(generateAppServiceUrl('test', region, 'grafana')).toBe(
-    'https://test.grafana.eu-west-1.nhost.run',
+    'https://test.grafana.eu-west-1.nhost.run/dashboards',
   );
 });
 

dashboard/src/features/projects/common/utils/generateAppServiceUrl/generateAppServiceUrl.ts

@@ -102,5 +102,11 @@ export default function generateAppServiceUrl(
     .filter(Boolean)
     .join('.');
 
-  return `https://${constructedDomain}${remoteBackendSlugs[service]}`;
+  let url = `https://${constructedDomain}${remoteBackendSlugs[service]}`;
+
+  if (service === 'grafana') {
+    url = `${url}/dashboards`;
+  }
+
+  return url;
 }

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/logs/components/LogsHeader/LogsHeader.tsx

@@ -10,6 +10,7 @@ import type { LogsCustomInterval } from '@/features/projects/logs/utils/constant
 import { LOGS_AVAILABLE_INTERVALS } from '@/features/projects/logs/utils/constants/intervals';
 import type { AvailableLogsService } from '@/features/projects/logs/utils/constants/services';
 import { LOGS_AVAILABLE_SERVICES } from '@/features/projects/logs/utils/constants/services';
+import { useGetRunServicesQuery } from '@/utils/__generated__/graphql';
 import { subMinutes } from 'date-fns';
 import { useEffect, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
@@ -132,6 +133,37 @@ export default function LogsHeader({
   const { currentProject } = useCurrentWorkspaceAndProject();
   const applicationCreationDate = new Date(currentProject.createdAt);
 
+  const [runServices, setRunServices] = useState<
+    {
+      label: string;
+      value: string;
+    }[]
+  >([]);
+
+  const { data, loading } = useGetRunServicesQuery({
+    variables: {
+      appID: currentProject.id,
+      resolve: false,
+      limit: 1000,
+      offset: 0,
+    },
+  });
+
+  useEffect(() => {
+    if (!loading) {
+      const services = data.app?.runServices ?? [];
+
+      setRunServices(
+        services
+          .filter((s) => !!s.config?.name)
+          .map((s) => ({
+            label: s.config.name,
+            value: `run-${s.config.name}`,
+          })),
+      );
+    }
+  }, [loading, data]);
+
   /**
    * Will subtract the `customInterval` time in minutes from the current date.
    */
@@ -181,15 +213,17 @@ export default function LogsHeader({
               root: { className: 'min-h-[initial] h-9 leading-[initial]' },
             }}
           >
-            {LOGS_AVAILABLE_SERVICES.map(({ value, label }) => (
-              <Option
-                key={value}
-                value={value}
-                className="text-sm+ font-medium"
-              >
-                {label}
-              </Option>
-            ))}
+            {[...LOGS_AVAILABLE_SERVICES, ...runServices].map(
+              ({ value, label }) => (
+                <Option
+                  key={value}
+                  value={value}
+                  className="text-sm+ font-medium"
+                >
+                  {label}
+                </Option>
+              ),
+            )}
           </Select>
         </Box>
       </Box>

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/ResourcesConfirmationDialog/ResourcesConfirmationDialog.tsx

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

dashboard/src/features/projects/resources/settings/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/projects/resources/settings/utils/resourceSettingsValidationSchema/resourceSettingsValidationSchema.ts

@@ -48,6 +48,21 @@ export const MIN_SERVICE_VCPU = 0.25 * RESOURCE_VCPU_MULTIPLIER;
  */
 export const MAX_SERVICE_VCPU = 7 * RESOURCE_VCPU_MULTIPLIER;
 
+/**
+ * Best resource utilization ration for CPU-Memory.
+ */
+export const MEM_CPU_RATIO = 2.048;
+
+/**
+ * Minimum storage capacity (Gib)
+ */
+export const MIN_STORAGE_CAPACITY = 1;
+
+/**
+ * Maximum storage capacity (Gib)
+ */
+export const MAX_STORAGE_CAPACITY = 1000;
+
 /**
  * The minimum amount of memory that has to be allocated per service.
  */
@@ -135,3 +150,9 @@ export const resourceSettingsValidationSchema = Yup.object({
 export type ResourceSettingsFormValues = Yup.InferType<
   typeof resourceSettingsValidationSchema
 >;
+
+export const MIN_SERVICES_CPU = Math.floor(128 / MEM_CPU_RATIO);
+export const MIN_SERVICES_MEM = 128;
+export const MAX_SERVICES_CPU = 7000;
+export const MAX_SERVICES_MEM = Math.floor(MAX_SERVICES_CPU * MEM_CPU_RATIO);
+export const COST_PER_VCPU = 0.05;

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

@@ -0,0 +1,507 @@
+import { useDialog } from '@/components/common/DialogProvider';
+import { Form } from '@/components/form/Form';
+import { Alert } from '@/components/ui/v2/Alert';
+import { Box } from '@/components/ui/v2/Box';
+import { Button } from '@/components/ui/v2/Button';
+import { CopyIcon } from '@/components/ui/v2/icons/CopyIcon';
+import { InfoIcon } from '@/components/ui/v2/icons/InfoIcon';
+import { PlusIcon } from '@/components/ui/v2/icons/PlusIcon';
+import { Input } from '@/components/ui/v2/Input';
+import { Text } from '@/components/ui/v2/Text';
+import { Tooltip } from '@/components/ui/v2/Tooltip';
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { useHostName } from '@/features/projects/common/hooks/useHostName';
+import { InfoCard } from '@/features/projects/overview/components/InfoCard';
+import {
+  COST_PER_VCPU,
+  MAX_SERVICES_CPU,
+  MAX_SERVICES_MEM,
+  MAX_SERVICE_REPLICAS,
+  MIN_SERVICES_CPU,
+  MIN_SERVICES_MEM,
+} from '@/features/projects/resources/settings/utils/resourceSettingsValidationSchema';
+import { ComputeFormSection } from '@/features/services/components/ServiceForm/components/ComputeFormSection';
+import { EnvironmentFormSection } from '@/features/services/components/ServiceForm/components/EnvironmentFormSection';
+import { PortsFormSection } from '@/features/services/components/ServiceForm/components/PortsFormSection';
+import { ReplicasFormSection } from '@/features/services/components/ServiceForm/components/ReplicasFormSection';
+import { StorageFormSection } from '@/features/services/components/ServiceForm/components/StorageFormSection';
+import type { DialogFormProps } from '@/types/common';
+import { RESOURCE_VCPU_MULTIPLIER } from '@/utils/constants/common';
+import { getToastStyleProps } from '@/utils/constants/settings';
+import { copy } from '@/utils/copy';
+import {
+  useInsertRunServiceConfigMutation,
+  useInsertRunServiceMutation,
+  useReplaceRunServiceConfigMutation,
+  type ConfigRunServiceConfigInsertInput,
+} from '@/utils/__generated__/graphql';
+import type { ApolloError } from '@apollo/client';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useEffect, useState } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import { toast } from 'react-hot-toast';
+import { parse } from 'shell-quote';
+import * as Yup from 'yup';
+import { ServiceConfirmationDialog } from './components/ServiceConfirmationDialog';
+import { ServiceDetailsDialog } from './components/ServiceDetailsDialog';
+
+export enum PortTypes {
+  HTTP = 'http',
+  TCP = 'tcp',
+  UDP = 'udp',
+}
+
+export const validationSchema = Yup.object({
+  name: Yup.string().required('The name is required.'),
+  image: Yup.string().label('Image to run'),
+  command: Yup.string(),
+  environment: Yup.array().of(
+    Yup.object().shape({
+      name: Yup.string().required(),
+      value: Yup.string().required(),
+    }),
+  ),
+  compute: Yup.object({
+    cpu: Yup.number().min(MIN_SERVICES_CPU).max(MAX_SERVICES_CPU).required(),
+    memory: Yup.number().min(MIN_SERVICES_MEM).max(MAX_SERVICES_MEM).required(),
+  }),
+  replicas: Yup.number().min(0).max(MAX_SERVICE_REPLICAS).required(),
+  ports: Yup.array().of(
+    Yup.object().shape({
+      port: Yup.number().required(),
+      type: Yup.mixed<PortTypes>().oneOf(Object.values(PortTypes)).required(),
+      publish: Yup.boolean().default(false),
+    }),
+  ),
+  storage: Yup.array().of(
+    Yup.object()
+      .shape({
+        name: Yup.string().required(),
+        path: Yup.string().required(),
+        capacity: Yup.number().nonNullable().required(),
+      })
+      .required(),
+  ),
+});
+
+export type ServiceFormValues = Yup.InferType<typeof validationSchema>;
+
+export interface ServiceFormProps extends DialogFormProps {
+  /**
+   * To use in conjunction with initialData to allow for updating the service
+   */
+  serviceID?: string;
+
+  /**
+   * if there is initialData then it's an update operation
+   */
+  initialData?: ServiceFormValues & { subdomain?: string }; // subdomain is only set on the backend
+
+  /**
+   * Function to be called when the operation is cancelled.
+   */
+  onCancel?: VoidFunction;
+  /**
+   * Function to be called when the submit is successful.
+   */
+  onSubmit?: VoidFunction | ((args?: any) => Promise<any>);
+}
+
+export default function ServiceForm({
+  serviceID,
+  initialData,
+  onSubmit,
+  onCancel,
+  location,
+}: ServiceFormProps) {
+  const hostName = useHostName();
+  const { onDirtyStateChange, openDialog, closeDialog } = useDialog();
+  const [insertRunService] = useInsertRunServiceMutation();
+  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);
+
+  const form = useForm<ServiceFormValues>({
+    defaultValues: initialData ?? {
+      compute: {
+        cpu: 62,
+        memory: 128,
+      },
+      replicas: 1,
+    },
+    reValidateMode: 'onSubmit',
+    resolver: yupResolver(validationSchema),
+  });
+
+  const {
+    watch,
+    register,
+    formState: { errors, isSubmitting, dirtyFields },
+  } = form;
+
+  const formValues = watch();
+
+  const serviceImage = watch('image');
+
+  const isDirty = Object.keys(dirtyFields).length > 0;
+
+  useEffect(() => {
+    onDirtyStateChange(isDirty, location);
+  }, [isDirty, location, onDirtyStateChange]);
+
+  const getFormattedConfig = (values: ServiceFormValues) => {
+    const config: ConfigRunServiceConfigInsertInput = {
+      name: values.name,
+      image: {
+        image: values.image,
+      },
+      command: parse(values.command).map((item) => item.toString()),
+      resources: {
+        compute: {
+          cpu: values.compute.cpu,
+          memory: values.compute.memory,
+        },
+        storage: values.storage.map((item) => ({
+          name: item.name,
+          path: item.path,
+          capacity: item.capacity,
+        })),
+        replicas: values.replicas,
+      },
+      environment: values.environment.map((item) => ({
+        name: item.name,
+        value: item.value,
+      })),
+      ports: values.ports.map((item) => ({
+        port: item.port,
+        type: item.type,
+        publish: item.publish,
+      })),
+    };
+
+    return config;
+  };
+
+  const createOrUpdateService = async (values: ServiceFormValues) => {
+    const config = getFormattedConfig(values);
+
+    if (serviceID) {
+      // Update service config
+      await replaceRunServiceConfig({
+        variables: {
+          appID: currentProject.id,
+          serviceID,
+          config,
+        },
+      });
+
+      setDetailsServiceId(serviceID);
+    } else {
+      // Insert service config
+      const {
+        data: {
+          insertRunService: { id: newServiceID, subdomain },
+        },
+      } = await insertRunService({
+        variables: {
+          object: {
+            appID: currentProject.id,
+          },
+        },
+      });
+
+      await insertRunServiceConfig({
+        variables: {
+          appID: currentProject.id,
+          serviceID: newServiceID,
+          config: {
+            ...config,
+            image: {
+              // If the image field left empty then we auto-populate following this format
+              // registry.<region>.<nhost_domain>/<service_id>
+              image:
+                values.image.length > 0
+                  ? values.image
+                  : `registry.${currentProject.region.awsName}.${currentProject.region.domain}/${newServiceID}`,
+            },
+          },
+        },
+      });
+
+      setDetailsServiceId(newServiceID);
+      setDetailsServiceSubdomain(subdomain);
+    }
+  };
+
+  const handleSubmit = async (values: ServiceFormValues) => {
+    try {
+      await toast.promise(
+        createOrUpdateService(values),
+        {
+          loading: 'Configuring the service...',
+          success: `The service has been configured 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 configuring the service. Please try again.'
+            );
+          },
+        },
+        getToastStyleProps(),
+      );
+
+      onSubmit?.();
+    } catch {
+      // Note: The toast will handle the error.
+    }
+  };
+
+  const handleConfirm = (values: ServiceFormValues) => {
+    openDialog({
+      title: 'Confirm Resources',
+      component: (
+        <ServiceConfirmationDialog
+          formValues={values}
+          onCancel={closeDialog}
+          onSubmit={async () => {
+            await handleSubmit(formValues);
+          }}
+        />
+      ),
+    });
+  };
+
+  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`;
+    let details = `${vCPUs} + ${mem}`;
+
+    if (formValues.replicas > 1) {
+      details = `(${details}) x ${formValues.replicas} replicas`;
+    }
+
+    return `Approximate cost for ${details}`;
+  };
+
+  const copyConfig = () => {
+    const config = getFormattedConfig(formValues);
+
+    const base64Config = btoa(JSON.stringify(config));
+
+    const link = `${hostName}/run-one-click-install?config=${base64Config}`;
+
+    copy(link, 'Service Config');
+  };
+
+  return (
+    <FormProvider {...form}>
+      <Form
+        onSubmit={handleConfirm}
+        className="grid grid-flow-row gap-4 px-6 pb-6"
+      >
+        <Input
+          {...register('name')}
+          id="name"
+          label={
+            <Box className="flex flex-row items-center space-x-2">
+              <Text>Name</Text>
+              <Tooltip title="Name of the service, must be unique per project.">
+                <InfoIcon
+                  aria-label="Info"
+                  className="h-4 w-4"
+                  color="primary"
+                />
+              </Tooltip>
+            </Box>
+          }
+          placeholder="Service name"
+          hideEmptyHelperText
+          error={!!errors.name}
+          helperText={errors?.name?.message}
+          fullWidth
+          autoComplete="off"
+          autoFocus
+        />
+
+        <Input
+          {...register('image')}
+          id="image"
+          label={
+            <Box className="flex flex-row items-center space-x-2">
+              <Text>Image</Text>
+              <Tooltip
+                title={
+                  <span>
+                    Image to use, it can be hosted on any public registry or it
+                    can use the{' '}
+                    <a
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      href="https://docs.nhost.io/run/registry"
+                      className="underline"
+                    >
+                      Nhost registry
+                    </a>
+                    . Image needs to support arm.
+                  </span>
+                }
+              >
+                <InfoIcon
+                  aria-label="Info"
+                  className="h-4 w-4"
+                  color="primary"
+                />
+              </Tooltip>
+            </Box>
+          }
+          placeholder="To automatically fill the private registry, leave it blank."
+          hideEmptyHelperText
+          error={!!errors.image}
+          helperText={errors?.image?.message}
+          fullWidth
+          autoComplete="off"
+        />
+
+        {/* This shows only when trying to edit a service */}
+        {serviceID && serviceImage && (
+          <InfoCard
+            title="Private registry"
+            value={`registry.${currentProject.region.awsName}.${currentProject.region.domain}/${serviceID}`}
+          />
+        )}
+
+        <Input
+          {...register('command')}
+          id="command"
+          label={
+            <Box className="flex flex-row items-center space-x-2">
+              <Text>Command</Text>
+              <Tooltip title="Command to run when to start the service. This is optional as the image may already have a baked-in command.">
+                <InfoIcon
+                  aria-label="Info"
+                  className="h-4 w-4"
+                  color="primary"
+                />
+              </Tooltip>
+            </Box>
+          }
+          placeholder="$ npm start"
+          hideEmptyHelperText
+          error={!!errors.command}
+          helperText={errors?.command?.message}
+          fullWidth
+          autoComplete="off"
+        />
+
+        <Alert
+          severity="info"
+          className="flex items-center justify-between space-x-2"
+        >
+          <span>{pricingExplanation()}</span>
+          <b>
+            $
+            {parseFloat(
+              (
+                formValues.compute.cpu *
+                formValues.replicas *
+                COST_PER_VCPU
+              ).toFixed(2),
+            )}
+          </b>
+        </Alert>
+
+        <ComputeFormSection />
+
+        <ReplicasFormSection />
+
+        <EnvironmentFormSection />
+
+        <PortsFormSection />
+
+        <StorageFormSection />
+
+        {createServiceFormError && (
+          <Alert
+            severity="error"
+            className="grid grid-flow-col items-center justify-between px-4 py-3"
+          >
+            <span className="text-left">
+              <strong>Error:</strong> {createServiceFormError.message}
+            </span>
+
+            <Button
+              variant="borderless"
+              color="error"
+              size="small"
+              onClick={() => {
+                setCreateServiceFormError(null);
+              }}
+            >
+              Clear
+            </Button>
+          </Alert>
+        )}
+        <div className="grid grid-flow-row gap-2">
+          <div className="grid grid-cols-2 gap-2">
+            <Button
+              type="submit"
+              disabled={isSubmitting}
+              startIcon={<PlusIcon />}
+            >
+              {serviceID ? 'Update' : 'Create'}
+            </Button>
+            <Button
+              color="secondary"
+              variant="outlined"
+              disabled={isSubmitting}
+              onClick={copyConfig}
+              startIcon={<CopyIcon />}
+            >
+              Copy one-click install link
+            </Button>
+          </div>
+
+          <Button variant="outlined" color="secondary" onClick={onCancel}>
+            Cancel
+          </Button>
+        </div>
+      </Form>
+    </FormProvider>
+  );
+}

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

@@ -0,0 +1,103 @@
+import { Box } from '@/components/ui/v2/Box';
+import { Button } from '@/components/ui/v2/Button';
+import { ArrowLeftIcon } from '@/components/ui/v2/icons/ArrowLeftIcon';
+import { ArrowRightIcon } from '@/components/ui/v2/icons/ArrowRightIcon';
+import { InfoIcon } from '@/components/ui/v2/icons/InfoIcon';
+import { Slider } from '@/components/ui/v2/Slider';
+import { Text } from '@/components/ui/v2/Text';
+import { Tooltip } from '@/components/ui/v2/Tooltip';
+import {
+  MAX_SERVICES_MEM,
+  MEM_CPU_RATIO,
+  MIN_SERVICES_MEM,
+} from '@/features/projects/resources/settings/utils/resourceSettingsValidationSchema';
+import type { ServiceFormValues } from '@/features/services/components/ServiceForm';
+import { useFormContext, useWatch } from 'react-hook-form';
+
+export default function ComputeFormSection() {
+  const { setValue } = useFormContext<ServiceFormValues>();
+
+  const formValues = useWatch<ServiceFormValues>();
+
+  const handleSliderUpdate = (value: string) => {
+    const updatedMem = parseFloat(value);
+
+    if (Number.isNaN(updatedMem) || updatedMem < MIN_SERVICES_MEM) {
+      return;
+    }
+
+    setValue('compute.memory', Math.floor(updatedMem), { shouldDirty: true });
+    setValue('compute.cpu', Math.floor(updatedMem / MEM_CPU_RATIO), {
+      shouldDirty: true,
+    });
+  };
+
+  const incrementCompute = () => {
+    const newMemoryValue = formValues.compute.memory + 128;
+    setValue('compute.memory', newMemoryValue);
+    setValue('compute.cpu', Math.floor(newMemoryValue / MEM_CPU_RATIO));
+  };
+
+  const decrementCompute = () => {
+    const newMemoryValue = formValues.compute.memory - 128;
+    setValue('compute.memory', newMemoryValue);
+    setValue('compute.cpu', Math.floor(newMemoryValue / MEM_CPU_RATIO));
+  };
+
+  return (
+    <Box className="space-y-4 rounded border-1 p-4">
+      <Box className="flex flex-row items-center space-x-2">
+        <Text variant="h4" className="font-semibold">
+          vCPUs: {formValues.compute.cpu / 1000} / Memory:{' '}
+          {formValues.compute.memory}
+        </Text>
+
+        <Tooltip
+          title={
+            <span>
+              Compute resources dedicated for the service. Refer to{' '}
+              <a
+                target="_blank"
+                rel="noopener noreferrer"
+                href="https://docs.nhost.io/run/resources"
+                className="underline"
+              >
+                resources
+              </a>{' '}
+              for more information.
+            </span>
+          }
+        >
+          <InfoIcon aria-label="Info" className="h-4 w-4" color="primary" />
+        </Tooltip>
+      </Box>
+
+      <Box className="flex flex-row items-center justify-between space-x-4">
+        <Button
+          disabled={formValues.compute.memory <= MIN_SERVICES_MEM}
+          variant="outlined"
+          onClick={decrementCompute}
+        >
+          <ArrowLeftIcon className="h-4 w-4" />
+        </Button>
+
+        <Slider
+          value={Number(formValues.compute.memory)}
+          onChange={(_event, value) => handleSliderUpdate(value.toString())}
+          max={MAX_SERVICES_MEM}
+          min={MIN_SERVICES_MEM}
+          step={256}
+          aria-label="Compute resources"
+          marks
+        />
+        <Button
+          disabled={formValues.compute.memory >= MAX_SERVICES_MEM}
+          variant="outlined"
+          onClick={incrementCompute}
+        >
+          <ArrowRightIcon className="h-4 w-4" />
+        </Button>
+      </Box>
+    </Box>
+  );
+}

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

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

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

@@ -0,0 +1,97 @@
+import { Box } from '@/components/ui/v2/Box';
+import { Button } from '@/components/ui/v2/Button';
+import { InfoIcon } from '@/components/ui/v2/icons/InfoIcon';
+import { PlusIcon } from '@/components/ui/v2/icons/PlusIcon';
+import { TrashIcon } from '@/components/ui/v2/icons/TrashIcon';
+import { Input } from '@/components/ui/v2/Input';
+import { Text } from '@/components/ui/v2/Text';
+import { Tooltip } from '@/components/ui/v2/Tooltip';
+import type { ServiceFormValues } from '@/features/services/components/ServiceForm';
+import { useState } from 'react';
+import { useFieldArray, useFormContext } from 'react-hook-form';
+
+export default function EnvironmentFormSection() {
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext<ServiceFormValues>();
+
+  const [focusedInput, setFocusedInput] = useState<string>(null);
+
+  const { fields, append, remove } = useFieldArray({
+    name: 'environment',
+  });
+
+  return (
+    <Box className="space-y-4 rounded border-1 p-4">
+      <Box className="flex flex-row items-center justify-between ">
+        <Box className="flex flex-row items-center space-x-2">
+          <Text variant="h4" className="font-semibold">
+            Environment
+          </Text>
+          <Tooltip
+            title={
+              <span>
+                Environment variables to add to the service. Other than the ones
+                specified here only <code>NHOST_SUBDOMAIN</code> and{' '}
+                <code>NHOST_REGION</code> are added automatically to the
+                service.
+              </span>
+            }
+          >
+            <InfoIcon aria-label="Info" className="h-4 w-4" color="primary" />
+          </Tooltip>
+        </Box>
+        <Button
+          variant="borderless"
+          onClick={() => append({ name: '', value: '' })}
+        >
+          <PlusIcon className="h-5 w-5" />
+        </Button>
+      </Box>
+
+      <Box className="flex flex-col space-y-4">
+        {fields.map((field, index) => (
+          <Box key={field.id} className="flex w-full items-center space-x-2">
+            <div className="flex w-full flex-col space-y-2">
+              <Input
+                {...register(`environment.${index}.name`)}
+                id={`${field.id}-name`}
+                placeholder={`Key ${index}`}
+                className="w-full"
+                hideEmptyHelperText
+                error={!!errors?.environment?.at(index)}
+                helperText={errors?.environment?.at(index)?.message}
+                fullWidth
+                autoComplete="off"
+              />
+              <Input
+                {...register(`environment.${index}.value`)}
+                id={`${field.id}-value`}
+                placeholder={`Value ${index}`}
+                className="w-full"
+                hideEmptyHelperText
+                error={!!errors?.environment?.at(index)}
+                helperText={errors?.environment?.at(index)?.message}
+                fullWidth
+                autoComplete="off"
+                multiline
+                maxRows={focusedInput === `${field.id}-value` ? 1000 : 1}
+                onFocusCapture={() => setFocusedInput(`${field.id}-value`)}
+                onBlurCapture={() => setFocusedInput(null)}
+              />
+            </div>
+            <Button
+              variant="borderless"
+              className=""
+              color="error"
+              onClick={() => remove(index)}
+            >
+              <TrashIcon className="h-6 w-4" />
+            </Button>
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  );
+}

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

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/no-cycle
+export { default as EnvironmentFormSection } from './EnvironmentFormSection';

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

@@ -0,0 +1,156 @@
+import { ControlledSwitch } from '@/components/form/ControlledSwitch';
+import { Box } from '@/components/ui/v2/Box';
+import { Button } from '@/components/ui/v2/Button';
+import { InfoIcon } from '@/components/ui/v2/icons/InfoIcon';
+import { PlusIcon } from '@/components/ui/v2/icons/PlusIcon';
+import { TrashIcon } from '@/components/ui/v2/icons/TrashIcon';
+import { Input } from '@/components/ui/v2/Input';
+import { Option } from '@/components/ui/v2/Option';
+import { Select } from '@/components/ui/v2/Select';
+import { Text } from '@/components/ui/v2/Text';
+import { Tooltip } from '@/components/ui/v2/Tooltip';
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { InfoCard } from '@/features/projects/overview/components/InfoCard';
+import {
+  PortTypes,
+  type ServiceFormValues,
+} from '@/features/services/components/ServiceForm';
+import { useFieldArray, useFormContext, useWatch } from 'react-hook-form';
+
+export default function PortsFormSection() {
+  const form = useFormContext<ServiceFormValues>();
+
+  const { currentProject } = useCurrentWorkspaceAndProject();
+
+  const {
+    register,
+    setValue,
+    formState: { errors },
+  } = form;
+
+  const { fields, append, remove } = useFieldArray({
+    name: 'ports',
+  });
+
+  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, subdomain: string) => {
+    const port = Number(_port) > 0 ? Number(_port) : '[port]';
+
+    return `https://${subdomain}-${port}.svc.${currentProject?.region.awsName}.${currentProject?.region.domain}`;
+  };
+
+  return (
+    <Box className="space-y-4 rounded border-1 p-4">
+      <Box className="flex flex-row items-center justify-between ">
+        <Box className="flex flex-row items-center space-x-2">
+          <Text variant="h4" className="font-semibold">
+            Ports
+          </Text>
+          <Tooltip
+            title={
+              <span>
+                Network ports to configure for the service. Refer to{' '}
+                <a
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  href="https://docs.nhost.io/run/networking"
+                  className="underline"
+                >
+                  Networking
+                </a>{' '}
+                for more information.
+              </span>
+            }
+          >
+            <InfoIcon aria-label="Info" className="h-4 w-4" color="primary" />
+          </Tooltip>
+        </Box>
+        <Button
+          variant="borderless"
+          onClick={() => append({ port: null, type: null, publish: false })}
+        >
+          <PlusIcon className="h-5 w-5" />
+        </Button>
+      </Box>
+
+      <Box className="flex flex-col space-y-4">
+        {fields.map((field, index) => (
+          <Box key={field.id} className="flex flex-col space-y-2">
+            <Box className="flex w-full flex-col space-y-2 xs+:flex-row xs+:space-x-2 xs+:space-y-0">
+              <Input
+                {...register(`ports.${index}.port`)}
+                id={`${field.id}-port`}
+                placeholder="Port"
+                className="w-full"
+                hideEmptyHelperText
+                error={!!errors?.ports?.at(index)}
+                helperText={errors?.ports?.at(index)?.message}
+                fullWidth
+                autoComplete="off"
+              />
+
+              <Select
+                fullWidth
+                value={formValues.ports.at(index)?.type || ''}
+                onChange={(_event, inputValue) =>
+                  onChangePortType(inputValue as string, index)
+                }
+                placeholder="Select port type"
+                slotProps={{
+                  listbox: { className: 'min-w-0 w-full' },
+                  popper: {
+                    disablePortal: false,
+                    className: 'z-[10000] w-[270px] w-full',
+                  },
+                }}
+              >
+                {['http', 'tcp', 'udp']?.map((portType) => (
+                  <Option key={portType} value={portType}>
+                    {portType}
+                  </Option>
+                ))}
+              </Select>
+
+              <ControlledSwitch
+                {...register(`ports.${index}.publish`)}
+                disabled={false} // TODO turn off and disable if the port is not http
+                label={
+                  <Text variant="subtitle1" component="span">
+                    Publish
+                  </Text>
+                }
+              />
+              <Button
+                variant="borderless"
+                className=""
+                color="error"
+                onClick={() => remove(index)}
+              >
+                <TrashIcon className="h-4 w-4" />
+              </Button>
+            </Box>
+
+            {showURL(index) && (
+              <InfoCard
+                title="URL"
+                value={getPortURL(
+                  formValues.ports[index]?.port,
+                  formValues.subdomain,
+                )}
+              />
+            )}
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  );
+}

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

@@ -0,0 +1,2 @@
+/* eslint-disable import/no-cycle */
+export { default as PortsFormSection } from './PortsFormSection';

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

@@ -0,0 +1,61 @@
+import { Box } from '@/components/ui/v2/Box';
+import { InfoIcon } from '@/components/ui/v2/icons/InfoIcon';
+import { Slider } from '@/components/ui/v2/Slider';
+import { Text } from '@/components/ui/v2/Text';
+import { Tooltip } from '@/components/ui/v2/Tooltip';
+import { MAX_SERVICE_REPLICAS } from '@/features/projects/resources/settings/utils/resourceSettingsValidationSchema';
+import type { ServiceFormValues } from '@/features/services/components/ServiceForm';
+import { useFormContext, useWatch } from 'react-hook-form';
+
+export default function ReplicasFormSection() {
+  const { setValue } = useFormContext<ServiceFormValues>();
+
+  const { replicas } = useWatch<ServiceFormValues>();
+
+  const handleReplicasChange = (value: string) => {
+    const updatedReplicas = parseInt(value, 10);
+
+    setValue('replicas', updatedReplicas, { shouldDirty: true });
+
+    // TODO Trigger revalidate storage
+  };
+
+  return (
+    <Box className="space-y-4 rounded border-1 p-4">
+      <Box className="flex flex-row items-center space-x-2">
+        <Text variant="h4" className="font-semibold">
+          Replicas ({replicas})
+        </Text>
+        <Tooltip
+          title={
+            <span>
+              Number of replicas for the service. Multiple replicas can process
+              requests/work in parallel. You can set replicas to 0 to pause the
+              service. Refer to{' '}
+              <a
+                target="_blank"
+                rel="noopener noreferrer"
+                href="https://docs.nhost.io/run/resources"
+                className="underline"
+              >
+                resources
+              </a>{' '}
+              for more information.
+            </span>
+          }
+        >
+          <InfoIcon aria-label="Info" className="h-4 w-4" color="primary" />
+        </Tooltip>
+      </Box>
+      <Slider
+        value={replicas}
+        onChange={(_event, value) => handleReplicasChange(value.toString())}
+        min={0}
+        max={MAX_SERVICE_REPLICAS}
+        step={1}
+        aria-label="Replicas"
+        marks
+      />
+    </Box>
+  );
+}

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

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

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

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

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

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

dashboard/src/features/services/components/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/ServiceForm/components/StorageFormSection/StorageFormSection.tsx

@@ -0,0 +1,147 @@
+import { Box } from '@/components/ui/v2/Box';
+import { Button } from '@/components/ui/v2/Button';
+import { InfoIcon } from '@/components/ui/v2/icons/InfoIcon';
+import { PlusIcon } from '@/components/ui/v2/icons/PlusIcon';
+import { TrashIcon } from '@/components/ui/v2/icons/TrashIcon';
+import { Input } from '@/components/ui/v2/Input';
+import { Text } from '@/components/ui/v2/Text';
+import { Tooltip } from '@/components/ui/v2/Tooltip';
+import {
+  MAX_STORAGE_CAPACITY,
+  MIN_STORAGE_CAPACITY,
+} from '@/features/projects/resources/settings/utils/resourceSettingsValidationSchema';
+import type { ServiceFormValues } from '@/features/services/components/ServiceForm';
+import { useFieldArray, useFormContext } from 'react-hook-form';
+
+export default function StorageFormSection() {
+  const {
+    register,
+    setValue,
+    formState: { errors },
+  } = useFormContext<ServiceFormValues>();
+
+  const { fields, append, remove } = useFieldArray({
+    name: 'storage',
+  });
+
+  const checkBounds = (value: string, index: number) => {
+    const storageCapacity = parseInt(value, 10);
+
+    if (Number.isNaN(storageCapacity)) {
+      setValue(`storage.${index}.capacity`, 1);
+    }
+
+    if (storageCapacity > MAX_STORAGE_CAPACITY) {
+      setValue(`storage.${index}.capacity`, MAX_STORAGE_CAPACITY);
+    }
+
+    if (storageCapacity < MIN_STORAGE_CAPACITY) {
+      setValue(`storage.${index}.capacity`, MIN_STORAGE_CAPACITY);
+    }
+  };
+
+  return (
+    <Box className="space-y-4 rounded border-1 p-4">
+      <Box className="flex flex-row items-center justify-between ">
+        <Box className="flex flex-row items-center space-x-2">
+          <Text variant="h4" className="font-semibold">
+            Storage
+          </Text>
+
+          <Tooltip
+            title={
+              <span>
+                By default, services do not have persistent storage. You can add
+                SSD disks to the service here. It is important to note that
+                capacity can not be decreased after creation, only expanded. Refer to{' '}
+                <a
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  href="https://docs.nhost.io/run/storage"
+                  className="underline"
+                >
+                  Storage
+                </a>{' '}
+                for more information.
+              </span>
+            }
+          >
+            <InfoIcon aria-label="Info" className="h-4 w-4" color="primary" />
+          </Tooltip>
+        </Box>
+
+        <Button
+          variant="borderless"
+          onClick={() => append({ name: '', capacity: 1, path: '' })}
+        >
+          <PlusIcon className="h-5 w-5" />
+        </Button>
+      </Box>
+
+      <Box className="flex flex-col space-y-4">
+        {fields.map((field, index) => (
+          <Box
+            key={field.id}
+            className="flex w-full flex-col space-y-2 xs+:flex-row xs+:space-y-0 xs+:space-x-2"
+          >
+            <Input
+              {...register(`storage.${index}.name`)}
+              id={`${field.id}-name`}
+              label={!index && 'Name'}
+              placeholder="Name"
+              className="w-full"
+              hideEmptyHelperText
+              error={!!errors?.storage?.at(index)}
+              helperText={errors?.storage?.at(index)?.message}
+              fullWidth
+              autoComplete="off"
+            />
+
+            <Input
+              {...register(`storage.${index}.capacity`, {
+                onBlur: (event) => checkBounds(event.target.value, index),
+              })}
+              id={`${field.id}-capacity`}
+              label={!index && 'Capacity'}
+              type="number"
+              placeholder="Capacity"
+              className="w-full"
+              hideEmptyHelperText
+              error={!!errors?.storage?.at(index)}
+              helperText={errors?.storage?.at(index)?.message}
+              fullWidth
+              autoComplete="off"
+              endAdornment={
+                <Text sx={{ color: 'grey.500' }} className="pr-2">
+                  GiB
+                </Text>
+              }
+            />
+
+            <Input
+              {...register(`storage.${index}.path`)}
+              id={`${field.id}-path`}
+              label={!index && 'Path'}
+              placeholder="Path"
+              className="w-full"
+              hideEmptyHelperText
+              error={!!errors?.storage?.at(index)}
+              helperText={errors?.storage?.at(index)?.message}
+              fullWidth
+              autoComplete="off"
+            />
+
+            <Button
+              variant="borderless"
+              className=""
+              color="error"
+              onClick={() => remove(index)}
+            >
+              <TrashIcon className="h-4 w-4" />
+            </Button>
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,192 @@
+import { useDialog } from '@/components/common/DialogProvider';
+import { Box } from '@/components/ui/v2/Box';
+import { Divider } from '@/components/ui/v2/Divider';
+import { Dropdown } from '@/components/ui/v2/Dropdown';
+import { IconButton } from '@/components/ui/v2/IconButton';
+import { CopyIcon } from '@/components/ui/v2/icons/CopyIcon';
+import { CubeIcon } from '@/components/ui/v2/icons/CubeIcon';
+import { DotsHorizontalIcon } from '@/components/ui/v2/icons/DotsHorizontalIcon';
+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 { DeleteServiceModal } from '@/features/projects/common/components/DeleteServiceModal';
+import {
+  ServiceForm,
+  type PortTypes,
+} from '@/features/services/components/ServiceForm';
+import { copy } from '@/utils/copy';
+import { formatDistanceToNow } from 'date-fns';
+import type { RunService } from 'pages/[workspaceSlug]/[appSlug]/services';
+
+interface ServicesListProps {
+  /**
+   * The run services fetched from entering the users page.
+   */
+  services: RunService[];
+
+  /**
+   * Function to be called after a submitting the form for either creating or updating a service.
+   *
+   * @example onDelete={() => refetch()}
+   */
+  onCreateOrUpdate?: () => Promise<any>;
+
+  /**
+   * Function to be called after a successful delete action.
+   *
+   */
+  onDelete?: () => Promise<any>;
+}
+
+export default function ServicesList({
+  services,
+  onCreateOrUpdate,
+  onDelete,
+}: ServicesListProps) {
+  const { openDrawer, openDialog, closeDialog } = useDialog();
+
+  const viewService = async (service: RunService) => {
+    openDrawer({
+      title: (
+        <Box className="flex flex-row items-center space-x-2">
+          <CubeIcon className="h-5 w-5" />
+          <Text>Edit {service.config?.name ?? 'unset'}</Text>
+        </Box>
+      ),
+      component: (
+        <ServiceForm
+          serviceID={service.id}
+          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,
+              type: item.type as PortTypes,
+              publish: item.publish,
+            })),
+            compute: service.config?.resources?.compute ?? {
+              cpu: 62,
+              memory: 128,
+            },
+            replicas: service.config?.resources?.replicas,
+            storage: service.config?.resources?.storage,
+          }}
+          onSubmit={() => onCreateOrUpdate()}
+        />
+      ),
+    });
+  };
+
+  const deleteService = async (service: RunService) => {
+    openDialog({
+      component: (
+        <DeleteServiceModal
+          service={service}
+          close={closeDialog}
+          onDelete={onDelete}
+        />
+      ),
+    });
+  };
+
+  return (
+    <Box className="flex flex-col">
+      {services.map((service) => (
+        <Box
+          key={service.id}
+          className="flex h-[64px] w-full cursor-pointer items-center justify-between space-x-4 border-b-1 px-4 py-2 transition-colors"
+          sx={{
+            [`&:hover`]: {
+              backgroundColor: 'action.hover',
+            },
+          }}
+        >
+          <Box
+            onClick={() => viewService(service)}
+            className="flex w-full flex-row justify-between"
+            sx={{
+              backgroundColor: 'transparent',
+            }}
+          >
+            <div className="flex flex-1 flex-row items-center space-x-4">
+              <CubeIcon className="h-5 w-5" />
+              <div className="flex flex-col">
+                <Text variant="h4" className="font-semibold">
+                  {service.config?.name ?? 'unset'}
+                </Text>
+                <Tooltip title={service.updatedAt}>
+                  <span className="hidden cursor-pointer text-sm text-slate-500 xs+:flex">
+                    Deployed {formatDistanceToNow(new Date(service.updatedAt))}{' '}
+                    ago
+                  </span>
+                </Tooltip>
+              </div>
+            </div>
+
+            <div className="hidden flex-row items-center space-x-2 md:flex">
+              <Text variant="subtitle1" className="font-mono text-xs">
+                {service.id}
+              </Text>
+              <IconButton
+                variant="borderless"
+                color="secondary"
+                onClick={(event) => {
+                  copy(service.id, 'Service Id');
+                  event.stopPropagation();
+                }}
+                aria-label="Service Id"
+              >
+                <CopyIcon className="h-4 w-4" />
+              </IconButton>
+            </div>
+          </Box>
+
+          <Dropdown.Root>
+            <Dropdown.Trigger
+              asChild
+              hideChevron
+              onClick={(event) => event.stopPropagation()}
+            >
+              <IconButton
+                variant="borderless"
+                color="secondary"
+                aria-label="More options"
+                onClick={(event) => event.stopPropagation()}
+              >
+                <DotsHorizontalIcon />
+              </IconButton>
+            </Dropdown.Trigger>
+            <Dropdown.Content
+              menu
+              PaperProps={{ className: 'w-52' }}
+              anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+              transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+            >
+              <Dropdown.Item
+                onClick={() => viewService(service)}
+                className="z-50 grid grid-flow-col items-center gap-2 p-2 text-sm+ font-medium"
+              >
+                <UserIcon className="h-4 w-4" />
+                <Text className="font-medium">View Service</Text>
+              </Dropdown.Item>
+              <Divider component="li" />
+              <Dropdown.Item
+                className="grid grid-flow-col items-center gap-2 p-2 text-sm+ font-medium"
+                sx={{ color: 'error.main' }}
+                onClick={() => deleteService(service)}
+              >
+                <TrashIcon className="h-4 w-4" />
+                <Text className="font-medium" color="error">
+                  Delete Service
+                </Text>
+              </Dropdown.Item>
+            </Dropdown.Content>
+          </Dropdown.Root>
+        </Box>
+      ))}
+    </Box>
+  );
+}

dashboard/src/features/services/components/ServicesList/index.ts

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

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/features/storage/settings/components/HasuraStorageAVSettings/HasuraStorageAVSettings.tsx

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

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

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

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

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

dashboard/src/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/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/deleteRunService.graphql

@@ -0,0 +1,5 @@
+mutation deleteRunService($serviceID: uuid!) {
+  deleteRunService(id: $serviceID) {
+    id
+  }
+}

dashboard/src/gql/services/deleteRunServiceConfig.graphql

@@ -0,0 +1,5 @@
+mutation deleteRunServiceConfig($appID: uuid!, $serviceID: uuid!) {
+  deleteRunServiceConfig(appID: $appID, serviceID: $serviceID) {
+    name
+  }
+}

dashboard/src/gql/services/getRunService.graphql

@@ -0,0 +1,34 @@
+query getRunService($id: uuid!, $resolve: Boolean!) {
+  runService(id: $id) {
+    id
+    subdomain
+    config(resolve: $resolve) {
+      name
+      image {
+        image
+      }
+      command
+      resources {
+        compute {
+          cpu
+          memory
+        }
+        storage {
+          name
+          path
+          capacity
+        }
+        replicas
+      }
+      environment {
+        name
+        value
+      }
+      ports {
+        port
+        type
+        publish
+      }
+    }
+  }
+}

dashboard/src/gql/services/getRunServices.graphql

@@ -0,0 +1,49 @@
+query getRunServices(
+  $appID: uuid!
+  $resolve: Boolean!
+  $limit: Int!
+  $offset: Int!
+) {
+  app(id: $appID) {
+    runServices(limit: $limit, offset: $offset) {
+      id
+      createdAt
+      updatedAt
+      subdomain
+      config(resolve: $resolve) {
+        name
+        image {
+          image
+        }
+        command
+        resources {
+          compute {
+            cpu
+            memory
+          }
+          storage {
+            name
+            path
+            capacity
+          }
+          replicas
+        }
+        environment {
+          name
+          value
+        }
+        ports {
+          port
+          type
+          publish
+        }
+      }
+    }
+
+    runServices_aggregate {
+      aggregate {
+        count
+      }
+    }
+  }
+}

dashboard/src/gql/services/inserRunService.graphql

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

dashboard/src/gql/services/insertRunServiceConfig.graphql

@@ -0,0 +1,13 @@
+mutation insertRunServiceConfig(
+  $appID: uuid!
+  $serviceID: uuid!
+  $config: ConfigRunServiceConfigInsertInput!
+) {
+  insertRunServiceConfig(
+    appID: $appID
+    serviceID: $serviceID
+    config: $config
+  ) {
+    name
+  }
+}

dashboard/src/gql/services/replaceRunServiceConfig.graphql

@@ -0,0 +1,13 @@
+mutation replaceRunServiceConfig(
+  $appID: uuid!
+  $serviceID: uuid!
+  $config: ConfigRunServiceConfigInsertInput!
+) {
+  replaceRunServiceConfig(
+    appID: $appID
+    serviceID: $serviceID
+    config: $config
+  ) {
+    __typename
+  }
+}

dashboard/src/gql/services/updateRunServiceConfig.graphql

@@ -0,0 +1,13 @@
+mutation updateRunServiceConfig(
+  $appID: uuid!
+  $serviceID: uuid!
+  $config: ConfigRunServiceConfigUpdateInput!
+) {
+  updateRunServiceConfig(
+    appID: $appID
+    serviceID: $serviceID
+    config: $config
+  ) {
+    name
+  }
+}

dashboard/src/hooks/useHypertune/index.ts

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

dashboard/src/hooks/useHypertune/useHypertune.ts

@@ -0,0 +1,14 @@
+import hypertune from '@/hypertune/hypertune';
+import { useEffect, useState } from 'react';
+
+export default function useHypertune() {
+  const [, setIsInitialized] = useState<boolean>(hypertune.isInitialized());
+
+  useEffect(() => {
+    hypertune.waitForInitialization().then(() => {
+      setIsInitialized(true);
+    });
+  }, []);
+
+  return hypertune;
+}

dashboard/src/hypertune/hypertune.ts

@@ -0,0 +1,5 @@
+import { initializeHypertune } from './project_2596';
+
+const hypertune = initializeHypertune({});
+
+export default hypertune;

dashboard/src/hypertune/project_2596.ts

@@ -0,0 +1,107 @@
+/* eslint-disable */
+
+import * as sdk from "hypertune";
+
+const projectId = 2596;
+
+const businessToken = `U2FsdGVkX19+V8BJnVR0xLEC+42OW5qZl/A0i6beAaRmJoIhFh5Yf6eIKBzLbV9h`;
+
+const queryCode = `query InitQuery {
+  root {
+    enableServices
+  }
+}
+`;
+
+const query = {"Query":{"objectTypeName":"Query","selection":{"root":{"fieldArguments":{"__isPartialObject__":true},"fieldQuery":{"Root":{"objectTypeName":"Root","selection":{"enableServices":{"fieldArguments":{},"fieldQuery":null}}}}}}}};
+
+const fallbackInitData: sdk.FallbackInitData & { [key: string]: unknown } = {"commitId":3297,"reducedExpression":{"id":"caxyeQqTKX3UGOXClvbnW","logs":{"events":{},"exposures":{},"evaluations":{}},"type":"ObjectExpression","fields":{"root":{"id":"PoMWxsy7KbW9fCq5XXvx4","body":{"id":"IUICRjZ7iSnh9k0cWBmnd","logs":{"events":{},"exposures":{},"evaluations":{}},"type":"ObjectExpression","fields":{"enableServices":{"id":"7WZWy2AIy_q9Vbz4cn9KB","logs":{"evaluations":{"XNOtHkUBpglrY1nkYa_bf":1},"events":{},"exposures":{}},"type":"BooleanExpression","value":true,"valueType":{"type":"BooleanValueType"}}},"valueType":{"type":"ObjectValueType","objectTypeName":"Root"},"objectTypeName":"Root"},"logs":{"events":{},"exposures":{},"evaluations":{}},"type":"FunctionExpression","valueType":{"type":"FunctionValueType","returnValueType":{"type":"ObjectValueType","objectTypeName":"Root"},"parameterValueTypes":[{"type":"ObjectValueType","objectTypeName":"Query_root_args"}]},"parameters":[{"id":"Ygjhl2LqjiwcousTABFQz","name":"rootArgs"}]}},"metadata":{"permissions":{"user":{},"group":{"team":{"write":"allow"}}}},"valueType":{"type":"ObjectValueType","objectTypeName":"Query"},"objectTypeName":"Query"},"splits":{},"eventTypes":{},"commitConfig":{"splitConfig":{}},"initLogId":0,"commitHash":"4178461588049503","sdkConfig":{"hashPollInterval":1000,"flushLogsInterval":1000,"maxLogsPerFlush":1},"query":{"Query":{"objectTypeName":"Query","selection":{"root":{"fieldArguments":{"__isPartialObject__":true},"fieldQuery":{"Root":{"objectTypeName":"Root","selection":{"enableServices":{"fieldArguments":{},"fieldQuery":null}}}}}}}}};
+
+export function initializeHypertune(
+  variableValues: Rec,
+  options: sdk.InitializeOptions = {}
+): QueryNode {
+  const defaultOptions = { businessToken, query, fallbackInitData };
+
+  return sdk.initialize(
+    QueryNode,
+    projectId,
+    queryCode,
+    variableValues,
+    { ...defaultOptions, ...options }
+  );
+}
+
+// Enum types
+
+
+  
+// Input object types
+
+export type Rec = {
+      
+      //
+      };
+
+export type Rec2 = {
+      context: Rec3;
+      //
+      };
+
+export type Rec3 = {
+      workSpace: Rec4;
+      //
+      };
+
+export type Rec4 = {
+      id: string;
+      //
+      };
+  
+// Enum node classes
+
+
+  
+// Fragment node classes
+
+export class QueryNode extends sdk.Node {
+      typeName = "Query" as const;
+  
+      root(args: Rec2): RootNode {
+          const props0 = this.getField("root", args);
+          const expression0 = props0.expression;
+  
+          if (
+      expression0 &&
+      expression0.type === "ObjectExpression"
+      && expression0.objectTypeName === "Root"
+    ) {
+      return new RootNode(props0);
+    }
+  
+    const node = new RootNode(props0);
+    node._logUnexpectedTypeError();
+    return node;
+      }
+      }
+
+export class RootNode extends sdk.Node {
+      typeName = "Root" as const;
+  
+      enableServices(args: Rec): sdk.BooleanNode {
+          const props0 = this.getField("enableServices", args);
+          const expression0 = props0.expression;
+  
+          if (
+      expression0 &&
+      expression0.type === "BooleanExpression"
+      
+    ) {
+      return new sdk.BooleanNode(props0);
+    }
+  
+    const node = new sdk.BooleanNode(props0);
+    node._logUnexpectedTypeError();
+    return node;
+      }
+      }

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

@@ -0,0 +1,262 @@
+import { useDialog } from '@/components/common/DialogProvider';
+import { Pagination } from '@/components/common/Pagination';
+import { Container } from '@/components/layout/Container';
+import { ProjectLayout } from '@/components/layout/ProjectLayout';
+import { Box } from '@/components/ui/v2/Box';
+import { Button } from '@/components/ui/v2/Button';
+import { CubeIcon } from '@/components/ui/v2/icons/CubeIcon';
+import { PlusIcon } from '@/components/ui/v2/icons/PlusIcon';
+import { ServicesIcon } from '@/components/ui/v2/icons/ServicesIcon';
+import { Text } from '@/components/ui/v2/Text';
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import type { GetRunServicesQuery } from '@/utils/__generated__/graphql';
+import { useGetRunServicesQuery } from '@/utils/__generated__/graphql';
+
+import { UpgradeNotification } from '@/features/projects/common/components/UpgradeNotification';
+import {
+  ServiceForm,
+  type PortTypes,
+} from '@/features/services/components/ServiceForm';
+import ServicesList from '@/features/services/components/ServicesList/ServicesList';
+import { useRouter } from 'next/router';
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactElement,
+} from 'react';
+
+export type RunService = Omit<
+  GetRunServicesQuery['app']['runServices'][0],
+  '__typename'
+>;
+
+export type RunServiceConfig = Omit<
+  GetRunServicesQuery['app']['runServices'][0]['config'],
+  '__typename'
+>;
+
+export default function ServicesPage() {
+  const limit = useRef(25);
+  const router = useRouter();
+  const { openDrawer, openAlertDialog } = useDialog();
+  const { currentProject } = useCurrentWorkspaceAndProject();
+  const isPlanFree = currentProject.plan.isFree;
+
+  const [currentPage, setCurrentPage] = useState(
+    parseInt(router.query.page as string, 10) || 1,
+  );
+
+  const [nrOfPages, setNrOfPages] = useState(0);
+
+  const offset = useMemo(() => currentPage - 1, [currentPage]);
+
+  const {
+    data,
+    loading,
+    refetch: refetchServices,
+  } = useGetRunServicesQuery({
+    variables: {
+      appID: currentProject.id,
+      resolve: false,
+      limit: limit.current,
+      offset,
+    },
+  });
+
+  useEffect(() => {
+    if (loading) {
+      return;
+    }
+
+    const userCount = data?.app?.runServices_aggregate.aggregate.count ?? 0;
+
+    setNrOfPages(Math.ceil(userCount / limit.current));
+  }, [data, loading]);
+
+  const services = useMemo(
+    () => data?.app?.runServices.map((service) => service) ?? [],
+    [data],
+  );
+
+  const checkConfigFromQuery = useCallback(
+    (base64Config: string) => {
+      if (router.query?.config) {
+        try {
+          const decodedConfig = atob(base64Config);
+          const parsedConfig: RunServiceConfig = JSON.parse(decodedConfig);
+
+          openDrawer({
+            title: (
+              <Box className="flex flex-row items-center space-x-2">
+                <CubeIcon className="h-5 w-5" />
+                <Text>Create a new run service</Text>
+              </Box>
+            ),
+            component: (
+              <ServiceForm
+                initialData={{
+                  ...parsedConfig,
+                  compute: parsedConfig?.resources?.compute ?? {
+                    cpu: 62,
+                    memory: 128,
+                  },
+                  image: parsedConfig?.image?.image,
+                  command: parsedConfig?.command?.join(' '),
+                  ports: parsedConfig?.ports.map((item) => ({
+                    port: item.port,
+                    type: item.type as PortTypes,
+                    publish: item.publish,
+                  })),
+                  replicas: parsedConfig?.resources?.replicas,
+                  storage: parsedConfig?.resources?.storage,
+                }}
+                onSubmit={refetchServices}
+              />
+            ),
+          });
+        } catch (error) {
+          openAlertDialog({
+            title: 'Configuration not set properly',
+            payload: 'The service configuration was not properly encoded',
+            props: {
+              primaryButtonText: 'Ok',
+              hideSecondaryAction: true,
+            },
+          });
+        }
+      }
+    },
+    [router.query.config, openDrawer, refetchServices, openAlertDialog],
+  );
+
+  useEffect(() => {
+    if (router.query?.config) {
+      checkConfigFromQuery(router.query?.config as string);
+    }
+  }, [checkConfigFromQuery, router.query]);
+
+  const openCreateServiceDialog = () => {
+    openDrawer({
+      title: (
+        <Box className="flex flex-row items-center space-x-2">
+          <CubeIcon className="h-5 w-5" />
+          <Text>Create a new service</Text>
+        </Box>
+      ),
+      component: <ServiceForm onSubmit={refetchServices} />,
+    });
+  };
+
+  if (isPlanFree) {
+    return (
+      <Container>
+        <UpgradeNotification
+          message="Unlock Nhost Run by upgrading your project to the Pro plan."
+          className="mt-4"
+        />
+      </Container>
+    );
+  }
+
+  if (data?.app.runServices.length === 0 && !loading) {
+    return (
+      <Container className="mx-auto max-w-9xl space-y-5 overflow-x-hidden">
+        <div className="flex flex-row place-content-end">
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={openCreateServiceDialog}
+            startIcon={<PlusIcon className="h-4 w-4" />}
+          >
+            Add service
+          </Button>
+        </div>
+
+        <Box className="flex flex-col items-center justify-center space-y-5 rounded-lg border px-48 py-12 shadow-sm">
+          <ServicesIcon className="h-10 w-10" />
+          <div className="flex flex-col space-y-1">
+            <Text className="text-center font-medium" variant="h3">
+              No custom services are available
+            </Text>
+            <Text variant="subtitle1" className="text-center">
+              All your project’s custom services will be listed here.
+            </Text>
+          </div>
+          <div className="flex flex-row place-content-between rounded-lg ">
+            <Button
+              variant="contained"
+              color="primary"
+              className="w-full"
+              onClick={openCreateServiceDialog}
+              startIcon={<PlusIcon className="h-4 w-4" />}
+            >
+              Add service
+            </Button>
+          </div>
+        </Box>
+      </Container>
+    );
+  }
+
+  return (
+    <div className="flex flex-col">
+      <Box className="flex flex-row place-content-end border-b-1 p-4">
+        <Button
+          variant="contained"
+          color="primary"
+          onClick={openCreateServiceDialog}
+          startIcon={<PlusIcon className="h-4 w-4" />}
+        >
+          Add service
+        </Button>
+      </Box>
+      <Box className="space-y-4">
+        <ServicesList
+          services={services}
+          onDelete={() => refetchServices()}
+          onCreateOrUpdate={() => refetchServices()}
+        />
+        <Pagination
+          className="px-2"
+          totalNrOfPages={nrOfPages}
+          currentPageNumber={currentPage}
+          totalNrOfElements={
+            data?.app?.runServices_aggregate.aggregate.count ?? 0
+          }
+          itemsLabel="services"
+          elementsPerPage={limit.current}
+          onPrevPageClick={async () => {
+            setCurrentPage((page) => page - 1);
+            if (currentPage - 1 !== 1) {
+              await router.push({
+                pathname: router.pathname,
+                query: { ...router.query, page: currentPage - 1 },
+              });
+            }
+          }}
+          onNextPageClick={async () => {
+            setCurrentPage((page) => page + 1);
+            await router.push({
+              pathname: router.pathname,
+              query: { ...router.query, page: currentPage + 1 },
+            });
+          }}
+          onPageChange={async (page) => {
+            setCurrentPage(page);
+            await router.push({
+              pathname: router.pathname,
+              query: { ...router.query, page },
+            });
+          }}
+        />
+      </Box>
+    </div>
+  );
+}
+
+ServicesPage.getLayout = function getLayout(page: ReactElement) {
+  return <ProjectLayout>{page}</ProjectLayout>;
+};

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

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