style: format prettier with object wrapping set to collapse

Author: OliverDudgeon

.prettierrc

@@ -7,5 +7,6 @@
   "bracketSpacing": true,
   "bracketSameLine": false,
   "useTabs": false,
-  "tabWidth": 2
+  "tabWidth": 2,
+  "objectWrap": "collapse"
 }

pnpm-lock.yaml

@@ -48,12 +48,7 @@ export interface BaseCardProps {
    * String values to be displayed in the header section of the card. Only title is required.
    * Missing values are not displayed.
    */
-  header?: {
-    title: string;
-    subtitle?: string;
-    avatar?: string;
-    color?: string;
-  };
+  header?: { title: string; subtitle?: string; avatar?: string; color?: string };
 }
 
 /**
@@ -85,10 +80,7 @@ export const BaseCard = ({
               {header.avatar?.[0].toUpperCase()}
             </Avatar>
           }
-          slotProps={{
-            subheader: { variant: "subtitle1" },
-            title: { variant: "body1" },
-          }}
+          slotProps={{ subheader: { variant: "subtitle1" }, title: { variant: "body1" } }}
           subheader={header.subtitle}
           title={header.title}
         />

src/components/BaseCard.tsx

@@ -19,10 +19,7 @@ export interface CreateDatasetStorageSubscriptionProps {
   unit: UnitAllDetail;
 }
 
-const initialValues = {
-  allowance: 1000,
-  name: "Dataset Storage",
-};
+const initialValues = { allowance: 1000, name: "Dataset Storage" };
 
 export const CreateDatasetStorageSubscription = ({
   unit,
@@ -34,10 +31,12 @@ export const CreateDatasetStorageSubscription = ({
   return (
     <Formik
       initialValues={initialValues}
-      validationSchema={yup.object().shape({
-        name: yup.string().trim().required("A name is required"),
-        allowance: yup.number().min(1).integer().required("An allowance is required"),
-      })}
+      validationSchema={yup
+        .object()
+        .shape({
+          name: yup.string().trim().required("A name is required"),
+          allowance: yup.number().min(1).integer().required("An allowance is required"),
+        })}
       onSubmit={async ({ allowance, name }) => {
         try {
           await createProduct({

src/components/CreateDatasetStorageSubscription.tsx

@@ -126,9 +126,7 @@ const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
   const itemRank = rankItem(row.getValue(columnId), value);
 
   // Store the itemRank info
-  addMeta({
-    itemRank,
-  });
+  addMeta({ itemRank });
 
   // Return if the item should be filtered in/out
   return itemRank.passed;
@@ -224,16 +222,8 @@ export const DataTable = <Data extends Record<string, any>>(props: DataTableProp
     getRowId,
     data: tableData,
     columns: paddedColumns,
-    filterFns: {
-      fuzzy: fuzzyFilter,
-    },
-    state: {
-      sorting,
-      globalFilter,
-      columnFilters,
-      expanded,
-      rowSelection,
-    },
+    filterFns: { fuzzy: fuzzyFilter },
+    state: { sorting, globalFilter, columnFilters, expanded, rowSelection },
     initialState: {
       rowSelection: initialSelection
         ? Object.fromEntries(initialSelection.map((id) => [id, true]))

src/components/DataTable/DataTable.tsx

@@ -26,10 +26,7 @@ export const AllFilesList = ({
   const [breadcrumbs, setBreadcrumbs] = useState<string[]>([]);
   const subPath = "/" + breadcrumbs.join("/");
 
-  const { data, isLoading } = useGetFiles({
-    project_id: projectId,
-    path: subPath,
-  });
+  const { data, isLoading } = useGetFiles({ project_id: projectId, path: subPath });
 
   const files =
     data?.files.filter((file) => !file.mime_type || mimeTypes?.includes(file.mime_type)) ?? [];

src/components/FileSelector/AllFilesList.tsx

@@ -8,7 +8,5 @@ export const HorizontalList = styled(List)({
   display: "flex",
   flexDirection: "row",
   flexWrap: "wrap",
-  "& > li": {
-    width: "auto",
-  },
+  "& > li": { width: "auto" },
 });

src/components/HorizontalList.tsx

@@ -30,19 +30,11 @@ interface DepictMoleculePropsBase {
 }
 
 export type DepictVariants =
-  | {
-      variant: "molFile";
-      molFile: string;
-    }
-  | {
-      variant: "smiles";
-      smiles: string;
-    };
+  | { variant: "molFile"; molFile: string }
+  | { variant: "smiles"; smiles: string };
 
 export type DepictMoleculeProps = DepictMoleculePropsBase &
-  DepictVariants & {
-    depictParams: DepictParameters;
-  };
+  DepictVariants & { depictParams: DepictParameters };
 
 type ImageProps = Omit<ComponentProps<"img">, "src">;
 

src/components/MolCard/DepictMolecule.tsx

@@ -27,11 +27,7 @@ export const FilePlainTextViewerListItem = ({
       passHref
       href={{
         pathname: "/project/file",
-        query: {
-          project: router.query.project,
-          file: fileName,
-          path,
-        },
+        query: { project: router.query.project, file: fileName, path },
       }}
     >
       <ListItemButton

src/components/ViewFilePopover/FilePlainTextViewerListItem.tsx

@@ -25,11 +25,7 @@ export const SDFViewerListItem = ({ fileName, path, onClick }: SDFViewerListItem
       passHref
       href={{
         pathname: "/viewer/sdf",
-        query: {
-          project: router.query.project,
-          file: fileName,
-          path,
-        },
+        query: { project: router.query.project, file: fileName, path },
       }}
     >
       <ListItemButton

src/components/ViewFilePopover/SDFViewerListItem.tsx

@@ -16,10 +16,7 @@ export interface ViewFilePopoverProps {
 }
 
 export const ViewFilePopover = ({ fileName, path }: ViewFilePopoverProps) => {
-  const popupState = usePopupState({
-    variant: "popover",
-    popupId: `file-viewers-${fileName}`,
-  });
+  const popupState = usePopupState({ variant: "popover", popupId: `file-viewers-${fileName}` });
 
   return (
     <>

src/components/ViewFilePopover/ViewFilePopover.tsx

@@ -9,9 +9,7 @@ export interface ExitCodeFromTaskProps {
 
 export const ExitCodeFromTask = ({ taskId }: ExitCodeFromTaskProps) => {
   const { data: code, isLoading } = useGetTask(taskId, undefined, {
-    query: {
-      select: (data) => data.exit_code,
-    },
+    query: { select: (data) => data.exit_code },
   });
 
   if (code === undefined && !isLoading) {
@@ -29,12 +27,7 @@ export const ExitCodeFromTask = ({ taskId }: ExitCodeFromTaskProps) => {
         slotProps={
           isLoading
             ? undefined
-            : {
-                secondary: {
-                  color: code === 0 ? "green" : "error",
-                  fontWeight: "bold",
-                },
-              }
+            : { secondary: { color: code === 0 ? "green" : "error", fontWeight: "bold" } }
         }
       />
     </ListItem>

src/components/instances/JobDetails/ExitCodeFromTask.tsx

@@ -5,19 +5,12 @@ import { type InputFieldSchema } from "../../../runCards/JobCard/JobInputFields"
 import { TEST_JOB_ID } from "../../../runCards/TestJob/jobId";
 
 // Contains only fields we are interested in
-type ApplicationSpecification = {
-  variables: Record<string, unknown>;
-};
+type ApplicationSpecification = { variables: Record<string, unknown> };
 
 // Contains only fields we are interested in
-type JobInput = {
-  title: string;
-  type: InputFieldSchema["type"];
-};
+type JobInput = { title: string; type: InputFieldSchema["type"] };
 
-type JobInputs = {
-  properties: Record<string, JobInput>;
-};
+type JobInputs = { properties: Record<string, JobInput> };
 
 /**
  * Returns provided inputs with their information. It matches the provided inputs with their
@@ -31,9 +24,7 @@ export const useGetJobInputs = (instance: InstanceGetResponse | InstanceSummary)
     // Since the query will be disabled if job_id is undefined, providing -1 is fine
     instance.job_id ?? -1,
     undefined,
-    {
-      query: { enabled: inputsEnabled, retry: instance.job_id === TEST_JOB_ID ? 1 : 3 },
-    },
+    { query: { enabled: inputsEnabled, retry: instance.job_id === TEST_JOB_ID ? 1 : 3 } },
   );
 
   // Parse application specification
@@ -62,10 +53,5 @@ export const useGetJobInputs = (instance: InstanceGetResponse | InstanceSummary)
       };
     });
 
-  return {
-    inputs: usedInputs,
-    isLoading,
-    isError,
-    error,
-  };
+  return { inputs: usedInputs, isLoading, isError, error };
 };

src/components/instances/JobDetails/JobInputSection/useGetJobInputs.ts

@@ -40,10 +40,7 @@ const getResolvedPath = (path: string[]) => {
     return !containsGlob;
   });
 
-  return {
-    resolvedPath,
-    containsGlob,
-  };
+  return { resolvedPath, containsGlob };
 };
 
 /**
@@ -68,26 +65,12 @@ export const JobLink = ({ projectId, path: originalPath, isFile }: JobLinkProps)
     const { filePath, fileName } = getFilePathAndName(resolvedPath);
 
     return (
-      <Box
-        sx={{
-          alignItems: "center",
-          display: "flex",
-          gap: 1,
-          wordBreak: "break-all",
-        }}
-      >
+      <Box sx={{ alignItems: "center", display: "flex", gap: 1, wordBreak: "break-all" }}>
         <Tooltip title="Locate file in project">
           <A
             legacyBehavior
             passHref
-            href={{
-              pathname: "/project",
-              query: {
-                ...query,
-                project: projectId,
-                path: filePath,
-              },
-            }}
+            href={{ pathname: "/project", query: { ...query, project: projectId, path: filePath } }}
           >
             <IconButton size="large">
               <Folder color="primary" fontSize="small" />
@@ -108,11 +91,7 @@ export const JobLink = ({ projectId, path: originalPath, isFile }: JobLinkProps)
           passHref
           href={{
             pathname: "/datasets",
-            query: {
-              ...query,
-              project: projectId,
-              path: resolvedPath,
-            },
+            query: { ...query, project: projectId, path: resolvedPath },
           }}
         >
           <IconButton size="small">

src/components/instances/JobDetails/JobLink.tsx

@@ -75,10 +75,7 @@ export const ResultApplicationCard = ({
       collapsedByDefault={collapsedByDefault}
       createdDateTime={instance.started ?? instance.launched}
       finishedDateTime={instance.stopped}
-      href={{
-        pathname: "/results/instance/[instanceId]",
-        query: { ...query, instanceId },
-      }}
+      href={{ pathname: "/results/instance/[instanceId]", query: { ...query, instanceId } }}
       linkTitle="App"
       state={instance.phase}
     >

src/components/instances/ResultApplicationCard.tsx

@@ -75,10 +75,7 @@ export const ResultJobCard = ({
       collapsedByDefault={collapsedByDefault}
       createdDateTime={instance.started ?? instance.launched}
       finishedDateTime={instance.stopped}
-      href={{
-        pathname: "/results/instance/[instanceId]",
-        query: { ...query, instanceId },
-      }}
+      href={{ pathname: "/results/instance/[instanceId]", query: { ...query, instanceId } }}
       linkTitle="Job"
       state={instance.phase}
     >

src/components/instances/ResultJobCard.tsx

@@ -45,9 +45,9 @@ export const NewLabelButton = ({ datasetId }: NewLabelButtonProps) => {
         <Formik
           validateOnMount
           initialValues={{ label: "", value: "" }}
-          validationSchema={yup.object().shape({
-            label: yup.string().trim().required("A label name is required"),
-          })}
+          validationSchema={yup
+            .object()
+            .shape({ label: yup.string().trim().required("A label name is required") })}
           onSubmit={async ({ label, value }) => {
             try {
               await addAnnotations({

src/components/labels/NewLabelButton.tsx

@@ -119,11 +119,7 @@ export const CreateProjectForm = ({
       }
 
       const { project_id } = await createProject({
-        data: {
-          name: projectName,
-          tier_product_id: productId,
-          private: isPrivate,
-        },
+        data: { name: projectName, tier_product_id: productId, private: isPrivate },
       });
       enqueueSnackbar("Project created");
 
@@ -167,10 +163,7 @@ export const CreateProjectForm = ({
         component="fieldset"
         sx={{
           display: "grid",
-          gridTemplateColumns: {
-            xs: "1fr",
-            sm: "1fr 1fr auto" + (modal ? "" : " auto"),
-          },
+          gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr auto" + (modal ? "" : " auto") },
           gap: 1,
           alignItems: "baseline",
         }}

src/components/projects/CreateProject/CreateProjectForm.tsx

@@ -23,12 +23,7 @@ export const PrivateProjectToggle = ({ projectId, isPrivate }: PrivateProjectTog
   const projectPrivacyChangeHandler = async (checked: boolean) => {
     if (projectId) {
       try {
-        await adjustProject({
-          projectId,
-          data: {
-            private: checked,
-          },
-        });
+        await adjustProject({ projectId, data: { private: checked } });
         void queryClient.invalidateQueries({ queryKey: getGetProjectsQueryKey() });
         void queryClient.invalidateQueries({ queryKey: getGetProjectQueryKey(projectId) });