feat(button): add new experiment button (#184)

safeamiiir · web-flow · commit 7ea1e7895447 · 2024-07-17T16:23:47.000+01:00
* feat(button): add new experiment button

* feat(button): add mutation to create new exp

* fix(title): change default experiment title to New Experiment

* fix(cache): remove experiment field from the cache

* feat(test): add tests for create new experiment
diff --git a/aqueductcore/frontend/src/API/graphql/mutations/experiment/createExperiment.tsx b/aqueductcore/frontend/src/API/graphql/mutations/experiment/createExperiment.tsx
@@ -0,0 +1,23 @@
+import { gql, useMutation } from "@apollo/client";
+
+import { CREATE_EXPERIMENT_TYPE } from "types/globalTypes";
+
+export const CREATE_EXPERIMENT = gql`
+    mutation createExperiment($title: String!, $description: String!,  $tags: [String!]! ) {
+        createExperiment(createExperimentInput: { title: $title, description: $description, tags: $tags}) {
+            uuid
+            eid
+        }
+    }
+`;
+
+export function useCreateExperiment() {
+    const [mutate, { loading, data, error }] = useMutation<{
+        createExperiment: CREATE_EXPERIMENT_TYPE;
+    }>(CREATE_EXPERIMENT, {
+        onError(error) {
+            console.log("Create experiment failed", error);
+        },
+    });
+    return { mutate, loading, data, error };
+}
diff --git a/aqueductcore/frontend/src/API/graphql/mutations/experiment/removeExperiment.tsx b/aqueductcore/frontend/src/API/graphql/mutations/experiment/removeExperiment.tsx
@@ -12,6 +12,15 @@ export function useRemoveExperiment() {
   const [mutate, { loading, data, error }] = useMutation<{
     removeExperiment: REMOVE_EXPERIMENT_TYPE;
   }>(REMOVE_EXPERIMENT, {
+    update(cache) {
+      cache.modify({
+        fields: {
+          experiment({ DELETE }) {
+            return DELETE;
+          },
+        },
+      })
+    },
     onError(error) {
       console.log("Remove experiment failed", error);
     },
diff --git a/aqueductcore/frontend/src/__mocks__/AppContextAQDMock.tsx b/aqueductcore/frontend/src/__mocks__/AppContextAQDMock.tsx
@@ -19,6 +19,7 @@ import { getExperimentFiles_mock } from "__mocks__/queries/experiment/getExperim
 import { getAllExperiments_mock } from "__mocks__/queries/experiment/getAllExperimentsMock";
 import { removeExperiment_mock } from "__mocks__/mutations/experiment/removeExperimentMock";
 import { updateExperiment_mock } from "__mocks__/mutations/experiment/updateExperimentMock";
+import { createExperiment_mock } from "__mocks__/mutations/experiment/createExperimentMock";
 import { getAllExtensions_mock } from "__mocks__/queries/extension/getAllExtensionsMock";
 import { getExperiment_mock } from "__mocks__/queries/experiment/getExperimentByIdMock";
 import { executeExtension_mock } from "__mocks__/mutations/extension/executeExtension";
@@ -40,6 +41,7 @@ interface AppContextAQDMockProps {
   getExperiment_mockMockMode?: keyof typeof getExperiment_mock;
   addTagToExperiment_mockMockMode?: keyof typeof addTagToExperiment_mock;
   removeTagFromExperiment_mockMockMode?: keyof typeof removeTagFromExperiment_mock;
+  createExperiment_mockMockMode?: keyof typeof createExperiment_mock;
   //Users
   getUserInformation_mockMockMode?: keyof typeof getUserInformation_mock;
   //Extensions
@@ -66,6 +68,7 @@ function AppContextAQDMock({
   getExperiment_mockMockMode = "success",
   addTagToExperiment_mockMockMode = "success",
   removeTagFromExperiment_mockMockMode = "success",
+  createExperiment_mockMockMode = "success",
   //Users
   getUserInformation_mockMockMode = "success",
   //Extensions
@@ -120,6 +123,7 @@ function AppContextAQDMock({
     ...getExperiment_mock[getExperiment_mockMockMode],
     ...addTagToExperiment_mock[addTagToExperiment_mockMockMode],
     ...removeTagFromExperiment_mock[removeTagFromExperiment_mockMockMode],
+    ...createExperiment_mock[createExperiment_mockMockMode],
     // Users
     ...getUserInformation_mock[getUserInformation_mockMockMode],
     //Extensions
diff --git a/aqueductcore/frontend/src/__mocks__/ExperimentsDataMock.ts b/aqueductcore/frontend/src/__mocks__/ExperimentsDataMock.ts
@@ -240,4 +240,15 @@ export const ExperimentsDataMock: ExperimentAllFieldsDataType[] = [
   },
 ];
 
+export const createdNewExperiment = {
+  uuid: "020bbd7f-43a8-4f4e-996b-1cdaebc398dd",
+  eid: "20221111-16",
+  title: "New Experiment",
+  description: "",
+  tags: [],
+  createdAt: "2022-11-23T00:00:00+00:00",
+  createdBy: "admin",
+  files: [],
+}
+
 export const sample_eid = ExperimentsDataMock[0].eid;
diff --git a/aqueductcore/frontend/src/__mocks__/mutations/experiment/createExperimentMock.tsx b/aqueductcore/frontend/src/__mocks__/mutations/experiment/createExperimentMock.tsx
@@ -0,0 +1,25 @@
+import { CREATE_EXPERIMENT } from "API/graphql/mutations/experiment/createExperiment";
+import { createdNewExperiment } from "__mocks__/ExperimentsDataMock";
+
+export const createExperiment_mock = {
+    success: [
+        {
+            request: {
+                query: CREATE_EXPERIMENT,
+                variables: {
+                    title: createdNewExperiment.title,
+                    description: createdNewExperiment.description,
+                    tags: createdNewExperiment.tags
+                }
+            },
+            result: {
+                data: {
+                    createExperiment: {
+                        uuid: createdNewExperiment.uuid,
+                        eid: createdNewExperiment.eid
+                    }
+                }
+            }
+        },
+    ],
+};
diff --git a/aqueductcore/frontend/src/__mocks__/queries/experiment/getExperimentByIdMock.tsx b/aqueductcore/frontend/src/__mocks__/queries/experiment/getExperimentByIdMock.tsx
@@ -1,5 +1,5 @@
 import { GET_EXPERIMENT_BY_ID } from "API/graphql/queries/experiment/getExperimentById";
-import { ExperimentsDataMock } from "__mocks__/ExperimentsDataMock";
+import { ExperimentsDataMock, createdNewExperiment } from "__mocks__/ExperimentsDataMock";
 
 export const selected_experiment = ExperimentsDataMock[0];
 
@@ -60,6 +60,58 @@ export const getExperiment_mock = {
                 },
             },
             maxUsageCount: Number.POSITIVE_INFINITY,
+        },
+        {
+            request: {
+                ...request,
+                variables: {
+                    experimentIdentifier: {
+                        type: 'EID',
+                        value: createdNewExperiment.eid
+                    },
+                },
+            },
+            result: {
+                data: {
+                    experiment: {
+                        uuid: createdNewExperiment.uuid,
+                        title: createdNewExperiment.title,
+                        description: createdNewExperiment.description,
+                        tags: createdNewExperiment.tags,
+                        eid: createdNewExperiment.eid,
+                        createdAt: createdNewExperiment.createdAt,
+                        createdBy: createdNewExperiment.createdBy,
+                        files: createdNewExperiment.files,
+                    },
+                },
+            },
+            maxUsageCount: Number.POSITIVE_INFINITY,
+        },
+        {
+            request: {
+                ...request,
+                variables: {
+                    experimentIdentifier: {
+                        type: 'UUID',
+                        value: createdNewExperiment.uuid
+                    },
+                },
+            },
+            result: {
+                data: {
+                    experiment: {
+                        uuid: createdNewExperiment.uuid,
+                        title: createdNewExperiment.title,
+                        description: createdNewExperiment.description,
+                        tags: createdNewExperiment.tags,
+                        eid: createdNewExperiment.eid,
+                        createdAt: createdNewExperiment.createdAt,
+                        createdBy: createdNewExperiment.createdBy,
+                        files: createdNewExperiment.files,
+                    },
+                },
+            },
+            maxUsageCount: Number.POSITIVE_INFINITY,
         }
     ],
 };
diff --git a/aqueductcore/frontend/src/__tests__/ExperimentRecordsPage.test.tsx b/aqueductcore/frontend/src/__tests__/ExperimentRecordsPage.test.tsx
@@ -1,12 +1,14 @@
 import { act, render, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { Route, Routes } from "react-router-dom";
 
 import { filterByThisTitle } from "__mocks__/queries/experiment/getAllExperimentsWithNameFilterMock";
 import { filterByThisTag } from "__mocks__/queries/experiment/getAllExperimentsWithTagFilterMock";
 import { ARCHIVED, experimentRecordsRowsPerPageOptions } from "constants/constants";
+import { ExperimentsDataMock, createdNewExperiment } from "__mocks__/ExperimentsDataMock";
 import { ExperimentRecordsColumns } from "pages/ExperimentRecordsPage";
-import { ExperimentsDataMock } from "__mocks__/ExperimentsDataMock";
 import ExperimentRecordsPage from "pages/ExperimentRecordsPage";
+import ExperimentDetailsPage from "pages/ExperimentDetailsPage";
 import AppContextAQDMock from "__mocks__/AppContextAQDMock";
 
 // Experiment table
@@ -176,3 +178,50 @@ test("experiment table to keep the URL updated with filters - Search title", asy
 });
 
 //todo: start and end date with the URL
+
+// Create new experiment
+test("add new experiment button", () => {
+  const { getByTitle } = render(
+    <AppContextAQDMock getUserInformation_mockMockMode="viewOnlyAccess">
+      <Routes>
+        <Route path="/" element={<ExperimentRecordsPage />} />
+        <Route path="/aqd/experiments/:experimentIdentifier" element={<ExperimentDetailsPage />} />
+      </Routes>
+    </AppContextAQDMock >)
+  const newExp = getByTitle("Create New Experiment")
+  expect(newExp).toBeInTheDocument()
+});
+
+test("redirect to experiment detailed title being selected", async () => {
+  const { getByTitle, findByText } = render(
+    <AppContextAQDMock getUserInformation_mockMockMode="viewOnlyAccess">
+      <Routes>
+        <Route path="/" element={<ExperimentRecordsPage />} />
+        <Route path="/aqd/experiments/:experimentIdentifier" element={<ExperimentDetailsPage />} />
+      </Routes>
+    </AppContextAQDMock >)
+
+  const newExp = getByTitle("Create New Experiment")
+  userEvent.click(newExp)
+
+  //Right experiment's been chosen
+  const eid = await findByText(createdNewExperiment.eid)
+  expect(eid).toBeInTheDocument()
+});
+
+test("title being selected when new experiment is created", async () => {
+  const { getByTitle, findByTitle } = render(
+    <AppContextAQDMock getUserInformation_mockMockMode="viewOnlyAccess">
+      <Routes>
+        <Route path="/" element={<ExperimentRecordsPage />} />
+        <Route path="/aqd/experiments/:experimentIdentifier" element={<ExperimentDetailsPage />} />
+      </Routes>
+    </AppContextAQDMock >)
+
+  const newExp = getByTitle("Create New Experiment")
+  userEvent.click(newExp)
+
+  //Title is focused
+  const editExpTitle = findByTitle("Edit experiment title")
+  expect(await editExpTitle).toHaveFocus()
+});
diff --git a/aqueductcore/frontend/src/components/atoms/AddButton/index.tsx b/aqueductcore/frontend/src/components/atoms/AddButton/index.tsx
@@ -0,0 +1,12 @@
+import AddBoxIcon from '@mui/icons-material/AddBox';
+import { IconButton, IconButtonProps } from '@mui/material';
+
+export const logoWidth = 180;
+
+export const AddButton = ({ ...props }: IconButtonProps) => {
+    return (
+        <IconButton size='large' {...props}>
+            <AddBoxIcon fontSize='large' />
+        </IconButton>
+    );
+};
diff --git a/aqueductcore/frontend/src/components/molecules/ExperimentTitle/index.tsx b/aqueductcore/frontend/src/components/molecules/ExperimentTitle/index.tsx
@@ -1,6 +1,7 @@
 import { Button, ClickAwayListener, Grid, TextField, Typography, styled } from "@mui/material";
-import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
 import { ChangeEvent, useEffect, useRef, useState } from "react";
+import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
+import { useLocation, useNavigate } from "react-router-dom";
 
 import useDebouncedCallback from "hooks/useDebounceCallBack";
 import { DEBOUNCE_DELAY } from "constants/constants";
@@ -16,8 +17,6 @@ const ExperimentName = styled(Typography)`
   line-height: ${(props) => `${props.theme.spacing(4)}`};
 `;
 
-const ExperimentNameTitleField = styled(TextField)``;
-
 interface ExperimentTitleProps {
   handleExperimentTitleUpdate: (value: string) => void;
   experimentTitle: string;
@@ -32,13 +31,14 @@ export function ExperimentTitleUpdate({
   const [editNameStatus, setEditTitleStatus] = useState(false);
   const [inputWidth, setInputWidth] = useState<string | number>("auto");
   const [internalExperimentTitle, setInternalExperimentTitle] = useState<string>(experimentTitle);
+  const location = useLocation();
+  const navigate = useNavigate()
 
   const titleField = useRef<HTMLInputElement>(null);
   const debounced = useDebouncedCallback<string>(handleExperimentTitleUpdate, DEBOUNCE_DELAY);
-
   const handleClickAway = () => setEditTitleStatus(false);
   const handleTitleUpdate = () => {
-    setEditTitleStatus(!editNameStatus);
+    setEditTitleStatus(true);
     setTimeout(() => {
       titleField.current?.focus();
       titleField.current?.setSelectionRange(
@@ -48,6 +48,16 @@ export function ExperimentTitleUpdate({
     }, 0);
   };
 
+  // Handle Just created experiment title being focused
+  useEffect(() => {
+    const isItJustCreated = location?.state && location.state?.from === 'create_new_exp';
+    if (isItJustCreated) {
+      handleTitleUpdate()
+    }
+    // remove location.state
+    navigate(".", { replace: true });
+  }, [])
+
   useEffect(() => {
     if (titleField.current) {
       const textWidth = getTextWidth(internalExperimentTitle);
@@ -80,12 +90,13 @@ export function ExperimentTitleUpdate({
       <Grid item>
         {editNameStatus ? (
           <ClickAwayListener onClickAway={handleClickAway}>
-            <ExperimentNameTitleField
+            <TextField
               variant="standard"
               margin="none"
               value={internalExperimentTitle}
               fullWidth
               onChange={handleExperimentTitleUpdateInternal}
+              onSubmit={handleClickAway}
               inputRef={titleField}
               sx={{
                 py: 0,
diff --git a/aqueductcore/frontend/src/pages/ExperimentRecordsPage/index.tsx b/aqueductcore/frontend/src/pages/ExperimentRecordsPage/index.tsx
@@ -1,13 +1,15 @@
-import { LinearProgress, Typography, styled } from "@mui/material";
-import { useLocation, useSearchParams } from "react-router-dom";
+import { useLocation, useNavigate, useSearchParams } from "react-router-dom";
+import { LinearProgress, Stack, Typography, styled } from "@mui/material";
 import Box from "@mui/material/Box";
 import { useState } from "react";
 
 import { useGetAllExperiments } from "API/graphql/queries/experiment/getAllExperiments";
+import { useCreateExperiment } from "API/graphql/mutations/experiment/createExperiment";
 import { drawerTopOffset, mainPadding } from "components/templates/drawerLayout";
 import ExperimentsListTable from "components/organisms/ExperimentsListTable";
 import useFilterExperimentsByTag from "hooks/useFilterExperimentsByTag";
 import FilterExperiments from "components/organisms/FilterExperiments";
+import { AddButton } from "components/atoms/AddButton";
 import { useDidUpdateEffect } from "helper/functions";
 import { Error } from "components/atoms/Error";
 import {
@@ -203,7 +205,7 @@ function ExperimentRecordsPage({ category }: { category?: ExperimentRecordsPageT
   };
 
   const emptyListErrorMessage = (pageUrl: string) => {
-    switch(pageUrl) {
+    switch (pageUrl) {
       case "/aqd/experiments/favourites":
         return "No favourited experiment records found";
       case "/aqd/experiments/archived":
@@ -221,13 +223,33 @@ function ExperimentRecordsPage({ category }: { category?: ExperimentRecordsPageT
     setRowsPerPage(experimentRecordsRowsPerPageOptions[0]);
     setPage(0);
   };
+  const { mutate } = useCreateExperiment()
+  const navigate = useNavigate()
+
+  const handleCreatecreatedNewExperiment = () => {
+    mutate({
+      variables: {
+        title: 'New Experiment',
+        description: '',
+        tags: []
+      },
+      onCompleted(data) {
+        navigate(`/aqd/experiments/${data.createExperiment.eid}`, {
+          state: { from: 'create_new_exp' },
+        })
+      }
+    })
+  }
 
   if (error) return <Error message={error.message} />;
   return (
     <Container>
       <Title>{handlePageName(location.pathname)}</Title>
       {/* //Guides would be added here */}
-      <FilterExperiments filters={filters} setFilters={setFilters} handleResetPagination={handleResetPagination} />
+      <Stack direction='row' justifyContent="space-between">
+        <FilterExperiments filters={filters} setFilters={setFilters} handleResetPagination={handleResetPagination} />
+        <AddButton title="Create New Experiment" onClick={handleCreatecreatedNewExperiment} />
+      </Stack>
       <Box sx={{ mt: 2 }}>
         {loading ? <LinearProgress /> :
           processedExperimentData && pageInfo.count ? (
@@ -240,7 +262,7 @@ function ExperimentRecordsPage({ category }: { category?: ExperimentRecordsPageT
               experimentList={processedExperimentData}
               pageInfo={pageInfo}
               maxHeight={`calc(100vh - ${tableHeightOffset}px)`}
-            /> ) :
+            />) :
             <NoExperimentsMessage>{emptyListErrorMessage(location.pathname)}</NoExperimentsMessage>
         }
       </Box>
diff --git a/aqueductcore/frontend/src/types/globalTypes.ts b/aqueductcore/frontend/src/types/globalTypes.ts
