fix(dashboard): missing the project after creating and show error wit…

…h duplicated domain (#527)

* fix(dashboard): missing the project after creating and show error with duplicated domain

* fix(e2e): enable disabled tests

* fix: remove jest logs on GitHub Action

.github/workflows/cypress.yml

@@ -56,5 +56,5 @@ jobs:
           TEST_USER_ID: ${{ secrets.TEST_USER_ID }}
           HASURA_EVENT_SECRET: ${{ secrets.HASURA_EVENT_SECRET }}
           NEXT_PUBLIC_HASURA_HTTP_ORIGIN: ${{ secrets.NEXT_PUBLIC_HASURA_HTTP_ORIGIN }}
-          DEBUG: 'cypress:*'
-          DEBUG_DEPTH: 9
+          # DEBUG: 'cypress:*'
+          # DEBUG_DEPTH: 9

apps/e2e/cypress.config.ts

@@ -10,6 +10,6 @@ export default defineConfig({
     specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
   },
   retries: {
-    runMode: 3,
+    runMode: 2,
   },
 });

apps/e2e/cypress/e2e/dashboard/project.spec.ts

@@ -41,7 +41,7 @@ describe('Project', () => {
     waitForProjectCardAppear();
   });
 
-  it.skip('should show integration doc', () => {
+  it('should show integration doc', () => {
     cy.findByRole('button', {
       name: /integrate guide/i,
     }).click();
@@ -54,7 +54,7 @@ describe('Project', () => {
     );
   });
 
-  it.skip('should active theme', () => {
+  it('should active theme', () => {
     cy.findByRole('link', { name: /theme/i }).click();
     cy.url({ timeout: 60_000 }).should('include', '/theme/foobar.com');
     cy.findByLabelText(/primary color selector/i).click();

packages/ui/src/pages/dashboard/index.tsx

@@ -19,7 +19,7 @@ import {
   TextField,
 } from '../../components';
 import { useCurrentUser } from '../../contexts';
-import { useForm } from '../../hooks';
+import { useBypassCacheRefetch, useForm } from '../../hooks';
 import { isValidDomain } from '../../utilities';
 
 type FormFields = {
@@ -60,25 +60,29 @@ export function Dashboard(): JSX.Element {
   const handleCloseDialog = React.useCallback(() => {
     setShowDialog(false);
   }, []);
-  const { register, errors, handleSubmit, hasError } = useForm<FormFields>({
-    defaultValues: {
-      name: '',
-      domain: '',
-    },
-  });
-  const handleClickSubmit = handleSubmit(
-    React.useCallback(
-      async (fields, _event: unknown): Promise<void> => {
-        await insertProjectMutation({
-          // TODO: Team id?
-          name: fields.name,
-          domain: fields.domain,
-        });
-        setShowDialog(false);
-        fetchProjects();
+  const { register, errors, handleSubmit, hasError, setError } =
+    useForm<FormFields>({
+      defaultValues: {
+        name: '',
+        domain: '',
       },
-      [insertProjectMutation, fetchProjects],
-    ),
+    });
+  const forceRefetchProjects = useBypassCacheRefetch(fetchProjects);
+  const handleClickSubmit = handleSubmit(
+    async (fields, _event: unknown): Promise<void> => {
+      const { error } = await insertProjectMutation({
+        // TODO: Team id?
+        name: fields.name,
+        domain: fields.domain,
+      });
+      console.log(error);
+      if (error?.message?.includes('Uniqueness violation')) {
+        setError('domain', 'A project associated with this domain already');
+        return;
+      }
+      setShowDialog(false);
+      forceRefetchProjects();
+    },
   );
   const disableCreation = isENVProd && (projects?.length || 0) > 0;