Tools (#1724)

Author: CarsonF

src/components/Tool/CreateTool/CreateTool.graphql

@@ -0,0 +1,7 @@
+mutation CreateTool($input: CreateTool!) {
+  createTool(input: $input) {
+    tool {
+      ...ToolForm
+    }
+  }
+}

src/components/Tool/CreateTool/CreateTool.tsx

@@ -0,0 +1,27 @@
+import { useMutation } from '@apollo/client';
+import { Except } from 'type-fest';
+import { ToolForm, ToolFormProps } from '../ToolForm/ToolForm';
+import { ToolFormFragment } from '../ToolForm/ToolForm.graphql';
+import { CreateToolDocument } from './CreateTool.graphql';
+
+export type CreateToolProps = Except<
+  ToolFormProps<ToolFormFragment>,
+  'onSubmit'
+>;
+
+export const CreateTool = (props: CreateToolProps) => {
+  const [createTool] = useMutation(CreateToolDocument);
+
+  return (
+    <ToolForm
+      {...props}
+      title="Create Tool"
+      onSubmit={async (input) => {
+        const { data } = await createTool({
+          variables: { input },
+        });
+        return data!.createTool.tool;
+      }}
+    />
+  );
+};

src/components/Tool/EditTool/EditTool.graphql

@@ -0,0 +1,7 @@
+mutation EditTool($input: UpdateTool!) {
+  updateTool(input: $input) {
+    tool {
+      ...ToolForm
+    }
+  }
+}

src/components/Tool/EditTool/EditTool.tsx

@@ -0,0 +1,44 @@
+import { useMutation } from '@apollo/client';
+import { useMemo } from 'react';
+import { Except, SetRequired } from 'type-fest';
+import { ToolForm, ToolFormProps } from '../ToolForm/ToolForm';
+import { ToolFormFragment } from '../ToolForm/ToolForm.graphql';
+import { EditToolDocument } from './EditTool.graphql';
+
+export type EditToolProps = SetRequired<
+  Except<ToolFormProps<ToolFormFragment>, 'onSubmit' | 'initialValues'>,
+  'tool'
+>;
+
+export const EditTool = (props: EditToolProps) => {
+  const { tool } = props;
+
+  const [updateTool] = useMutation(EditToolDocument);
+
+  const initialValues = useMemo(
+    () => ({
+      name: tool.name.value!,
+      aiBased: tool.aiBased.value!,
+    }),
+    [tool]
+  );
+
+  return (
+    <ToolForm
+      {...props}
+      title="Edit Tool"
+      initialValues={initialValues}
+      onSubmit={async (values) => {
+        const { data } = await updateTool({
+          variables: {
+            input: {
+              id: tool.id,
+              ...values,
+            },
+          },
+        });
+        return data!.updateTool.tool;
+      }}
+    />
+  );
+};

src/components/Tool/ToolForm/ToolForm.graphql

@@ -0,0 +1,13 @@
+fragment ToolForm on Tool {
+  id
+  name {
+    canRead
+    canEdit
+    value
+  }
+  aiBased {
+    canRead
+    canEdit
+    value
+  }
+}

src/components/Tool/ToolForm/ToolForm.tsx

@@ -0,0 +1,35 @@
+import { CreateTool } from '~/api/schema.graphql';
+import { DialogForm, DialogFormProps } from '../../Dialog/DialogForm';
+import { SecuredField, SubmitError, TextField } from '../../form';
+import { CheckboxField } from '../../form/CheckboxField';
+import { ToolFormFragment } from './ToolForm.graphql';
+
+export type ToolFormProps<R> = DialogFormProps<Required<CreateTool>, R> & {
+  tool?: ToolFormFragment;
+};
+
+export const ToolForm = <R,>({ tool, ...rest }: ToolFormProps<R>) => (
+  <DialogForm {...rest}>
+    <SubmitError />
+    <SecuredField obj={tool} name="name">
+      {(props) => (
+        <TextField
+          {...props}
+          label="Tool Name"
+          placeholder="Enter tool name"
+          required
+        />
+      )}
+    </SecuredField>
+    <SecuredField obj={tool} name="aiBased">
+      {(props) => (
+        <CheckboxField
+          {...props}
+          label="AI Based"
+          helperText="Check if this tool uses artificial intelligence"
+          defaultValue={true}
+        />
+      )}
+    </SecuredField>
+  </DialogForm>
+);

src/components/Tool/index.ts

@@ -0,0 +1,3 @@
+export * from './CreateTool/CreateTool';
+export * from './EditTool/EditTool';
+export * from './ToolForm/ToolForm';

src/components/ToolUsage/DisplayToolUsage/DisplayToolUsage.tsx

@@ -0,0 +1,35 @@
+import { Box, Chip, Tooltip, Typography } from '@mui/material';
+import { FormattedDate } from '../../Formatters';
+import { DisplayToolUsageFragment } from './displayToolUsage.graphql';
+
+interface Props {
+  usage: DisplayToolUsageFragment;
+}
+
+export const DisplayToolUsage = ({ usage }: Props) => (
+  <Tooltip
+    key={usage.id}
+    title={
+      <Box>
+        {usage.tool.aiBased.value && (
+          <Typography variant="body2">AI-Based Tool</Typography>
+        )}
+
+        {usage.startDate.value && (
+          <Typography variant="body2">
+            Started Using: <FormattedDate date={usage.startDate.value} />
+          </Typography>
+        )}
+      </Box>
+    }
+  >
+    <Chip
+      label={usage.tool.name.value}
+      color="default"
+      sx={{
+        cursor: 'default',
+        color: 'text.primary',
+      }}
+    />
+  </Tooltip>
+);

src/components/ToolUsage/DisplayToolUsage/displayToolUsage.graphql

@@ -0,0 +1,11 @@
+fragment displayToolUsage on ToolUsage {
+  id
+  startDate {
+    canRead
+    canEdit
+    value
+  }
+  tool {
+    ...ToolLookupItem
+  }
+}

src/components/ToolUsage/ManageToolUsage/CreateToolUsage.graphql

@@ -0,0 +1,17 @@
+mutation CreateToolUsage($input: CreateToolUsage!) {
+  createToolUsage(input: $input) {
+    toolUsage {
+      ...ToolUsageForm
+      # refresh containers usage list
+      container {
+        __typename
+        id
+        tools {
+          items {
+            id
+          }
+        }
+      }
+    }
+  }
+}