feat: quick features (#233)

* feat(logs): show logs in an improved way

* feat(EID): add to clipboard button

* fix(table): Capilalise first letter

* fix(type): make a new isNullish function

* fix(function): make success and failed funcions more readable

Author: safeamiiir

aqueductcore/frontend/src/components/molecules/LogViewer/index.tsx

@@ -1,9 +1,10 @@
 import { Box, styled } from "@mui/material";
 
-import { logArray } from "types/componentTypes";
+import { logType } from "types/componentTypes";
+import { isNullish } from "helper/functions";
 
 interface LogViewerProps {
-    log: logArray
+    log: logType[]
 }
 
 const LogViewerBox = styled(Box)`
@@ -18,8 +19,14 @@ const LogText = styled("pre")`
 `;
 
 const prettyPrint = (log: LogViewerProps['log']) => {
-    return log.map(logItem => (
-        `${logItem.label}: \t\t ${logItem.value} \n`
+    function prettifyValue(value: logType['value']) {
+        if (value && String(value).includes('\n'))
+            return String(value).split('\n').map(valueItem => `\n\t\t\t${valueItem}`).join('')
+        else
+            return `\t\t"${value}"`
+    }
+    return log.filter(logItem => !isNullish(logItem)).map(logItem => (
+        `${logItem.label}: ${prettifyValue(logItem.value)}\n`
     ))
 };
 

aqueductcore/frontend/src/components/organisms/ExperimentDetailsActionButtons/index.tsx

@@ -10,6 +10,7 @@ import toast from "react-hot-toast";
 import { useState } from "react";
 
 import { BorderedButtonWithIcon } from "components/atoms/sharedStyledComponents/BorderedButtonWithIcon"
+import { copyToClipboardFailedWithMessage, copyToClipboardWithSuccessMessage } from 'helper/functions';
 import { useRemoveTagFromExperiment } from "API/graphql/mutations/experiment/removeTagFromExperiment";
 import { useAddTagToExperiment } from "API/graphql/mutations/experiment/addTagToExperiment";
 import { useRemoveExperiment } from "API/graphql/mutations/experiment/removeExperiment";
@@ -140,16 +141,8 @@ function ExperimentDetailsActionButtons({ isEditable, isDeletable, experimentDet
         navigator.clipboard
             .writeText(`${window.location.origin}/aqd/experiments/${experimentDetails.eid}`)
             .then(
-                () => {
-                    toast.success("Copied to clipboard!", {
-                        id: "clipboard",
-                    });
-                },
-                () => {
-                    toast.error("Failed! \n Please copy page's URL manually.", {
-                        id: "clipboard-failed",
-                    });
-                }
+                () => copyToClipboardWithSuccessMessage(), //Success
+                () => copyToClipboardFailedWithMessage("Failed! \n Please copy page's URL manually.") //Failure
             );
     }
 

aqueductcore/frontend/src/components/organisms/ExperimentDetailsData/index.tsx

@@ -1,11 +1,13 @@
-import { Box, Chip, Grid, List, ListItem, Typography, styled } from "@mui/material"
-import { useGetAllTags } from "API/graphql/queries/experiment/getAllTags";
+import { Box, Chip, Grid, IconButton, List, ListItem, Typography, styled } from "@mui/material"
+import LinkIcon from "@mui/icons-material/Link";
 import toast from "react-hot-toast";
 import { useState } from "react";
 
+import { copyToClipboardFailedWithMessage, copyToClipboardWithSuccessMessage } from "helper/functions";
 import { useRemoveTagFromExperiment } from "API/graphql/mutations/experiment/removeTagFromExperiment";
 import { useAddTagToExperiment } from "API/graphql/mutations/experiment/addTagToExperiment";
 import { dateFormatter, removeFavouriteAndArchivedTag } from "helper/formatters";
+import { useGetAllTags } from "API/graphql/queries/experiment/getAllTags";
 import { ExperimentDataType, TagType } from "types/globalTypes";
 import { MAX_TAGS_VISIBLE_LENGTH } from "constants/constants";
 import { EditTags } from "components/molecules/EditTags";
@@ -14,15 +16,13 @@ const ExperimentDetailsTitle = styled(Typography)`
   font-weight: 400;
   font-size: 0.9rem;
   margin-right: ${(props) => `${props.theme.spacing(1)}`};
-  line-height: ${(props) => `${props.theme.spacing(3)}`};
   padding: ${(props) => `${props.theme.spacing(0.75)}`} ${(props) => `${props.theme.spacing(1)}`};
 `;
 
 const ExperimentDetailsContent = styled(Typography)`
   font-weight: 500;
   font-weight: bold;
   font-size: 0.9rem;
-  line-height: ${(props) => `${props.theme.spacing(3)}`};
 `;
 
 interface experimentDetailsDataProps {
@@ -75,13 +75,28 @@ function ExperimentDetailsData({ experimentDetails, isEditable }: experimentDeta
             });
         }
     };
+
+    function handleCopyEIDToClipboard() {
+        navigator.clipboard
+            .writeText(experimentDetails.eid)
+            .then(
+                () => copyToClipboardWithSuccessMessage(), //Success
+                () => copyToClipboardFailedWithMessage("Failed! \n Please copy EID manually.") //Failure
+            );
+    }
+
     return (
         <Grid container sx={{ mt: 2 }}>
             <Grid item sx={{ mr: 4 }}>
                 <List>
                     <ListItem sx={{ pl: 1, pr: 1 }}>
                         <ExperimentDetailsTitle>Experiment ID: </ExperimentDetailsTitle>
-                        <ExperimentDetailsContent>{experimentDetails.eid}</ExperimentDetailsContent>
+                        <ExperimentDetailsContent>
+                            {experimentDetails.eid}
+                        </ExperimentDetailsContent>
+                        <IconButton size="small" aria-label="copy-eid" onClick={handleCopyEIDToClipboard} >
+                            <LinkIcon />
+                        </IconButton>
                     </ListItem>
                     <ListItem sx={{ pl: 1, pr: 1 }}>
                         <ExperimentDetailsTitle>Time Created: </ExperimentDetailsTitle>

aqueductcore/frontend/src/components/organisms/TaskListInExperimentDetails/index.tsx

@@ -46,7 +46,7 @@ export const TasksListColumns: readonly TasksListColumnsType[] = [
     },
     {
         id: "receivedAt",
-        label: "submission Time",
+        label: "Submission Time",
         format: (createdAt) =>
             typeof createdAt === "string" ? dateFormatter(new Date(createdAt)) : "",
     },
@@ -66,7 +66,7 @@ function TaskListInExperimentDetails({ experimentUuid }: { experimentUuid: Exper
                 }
             },
         },
-        fetchPolicy: "network-only",
+        fetchPolicy: "network-only"
     });
     const pageInfo = {
         page,

aqueductcore/frontend/src/helper/functions.tsx

@@ -1,8 +1,9 @@
 import { DependencyList, FocusEvent, useEffect, useRef } from "react";
+import toast from "react-hot-toast";
 import dayjs from "dayjs";
 
-import { SortOrder } from "types/componentTypes";
 import { ExperimentFileType } from "types/globalTypes";
+import { SortOrder } from "types/componentTypes";
 
 // ################## DOM related functions ################## //
 export const focusInCurrentTarget = ({
@@ -84,4 +85,20 @@ export function stableSort<T>(array: readonly T[], comparator: (a: T, b: T) => n
     return a[1] - b[1];
   });
   return stabilizedThis.map((el) => el[0]);
-}
+}
+
+export function isNullish(value: unknown): value is null | undefined {
+  return value === null || value === undefined;
+}
+
+// ################## Copy to Clipboard Functions ################## //
+export function copyToClipboardWithSuccessMessage(message?: string): void | PromiseLike<void> {
+  toast.success(message ?? "Copied to clipboard!", {
+    id: "clipboard",
+  });
+}
+export function copyToClipboardFailedWithMessage(message?: string): void | PromiseLike<void> {
+  toast.error(message ?? "Copy to clipboard Failed!", {
+    id: "clipboard-failed",
+  });
+}

aqueductcore/frontend/src/pages/TaskHistoryPage/index.tsx

@@ -66,7 +66,7 @@ export const TasksListColumns: readonly TasksListColumnsType[] = [
   },
   {
     id: "receivedAt",
-    label: "submission Time",
+    label: "Submission Time",
     format: (createdAt) =>
       typeof createdAt === "string" ? dateFormatter(new Date(createdAt)) : "",
   },

aqueductcore/frontend/src/types/componentTypes.ts

@@ -19,7 +19,7 @@ export type FileSelectContextType = {
     setSelectedFile: React.Dispatch<React.SetStateAction<string | undefined>>
 }
 
-export type logArray = Array<{
+export type logType = {
     label: string,
     value: string | number | undefined | null
-}>
+}