diff --git a/aqueductcore/frontend/src/components/molecules/LogViewer/index.tsx b/aqueductcore/frontend/src/components/molecules/LogViewer/index.tsx index 39196796..c18cb2ea 100644 --- a/aqueductcore/frontend/src/components/molecules/LogViewer/index.tsx +++ b/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` )) }; diff --git a/aqueductcore/frontend/src/components/organisms/ExperimentDetailsActionButtons/index.tsx b/aqueductcore/frontend/src/components/organisms/ExperimentDetailsActionButtons/index.tsx index 15380a07..fa5dbc2d 100644 --- a/aqueductcore/frontend/src/components/organisms/ExperimentDetailsActionButtons/index.tsx +++ b/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 ); } diff --git a/aqueductcore/frontend/src/components/organisms/ExperimentDetailsData/index.tsx b/aqueductcore/frontend/src/components/organisms/ExperimentDetailsData/index.tsx index d70f8b79..5943ab3a 100644 --- a/aqueductcore/frontend/src/components/organisms/ExperimentDetailsData/index.tsx +++ b/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,7 +16,6 @@ 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)}`}; `; @@ -22,7 +23,6 @@ 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 ( Experiment ID: - {experimentDetails.eid} + + {experimentDetails.eid} + + + + Time Created: diff --git a/aqueductcore/frontend/src/components/organisms/TaskListInExperimentDetails/index.tsx b/aqueductcore/frontend/src/components/organisms/TaskListInExperimentDetails/index.tsx index 9c252fa9..aa74feb1 100644 --- a/aqueductcore/frontend/src/components/organisms/TaskListInExperimentDetails/index.tsx +++ b/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, diff --git a/aqueductcore/frontend/src/helper/functions.tsx b/aqueductcore/frontend/src/helper/functions.tsx index 92ed60fd..eb84023e 100644 --- a/aqueductcore/frontend/src/helper/functions.tsx +++ b/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(array: readonly T[], comparator: (a: T, b: T) => n return a[1] - b[1]; }); return stabilizedThis.map((el) => el[0]); -} \ No newline at end of file +} + +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 { + toast.success(message ?? "Copied to clipboard!", { + id: "clipboard", + }); +} +export function copyToClipboardFailedWithMessage(message?: string): void | PromiseLike { + toast.error(message ?? "Copy to clipboard Failed!", { + id: "clipboard-failed", + }); +} diff --git a/aqueductcore/frontend/src/pages/TaskHistoryPage/index.tsx b/aqueductcore/frontend/src/pages/TaskHistoryPage/index.tsx index 004fe578..15f85352 100644 --- a/aqueductcore/frontend/src/pages/TaskHistoryPage/index.tsx +++ b/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)) : "", }, diff --git a/aqueductcore/frontend/src/types/componentTypes.ts b/aqueductcore/frontend/src/types/componentTypes.ts index 82eb1896..58f5d759 100644 --- a/aqueductcore/frontend/src/types/componentTypes.ts +++ b/aqueductcore/frontend/src/types/componentTypes.ts @@ -19,7 +19,7 @@ export type FileSelectContextType = { setSelectedFile: React.Dispatch> } -export type logArray = Array<{ +export type logType = { label: string, value: string | number | undefined | null -}> +}