Align ig

app/package.json

@@ -13,6 +13,8 @@
     "prettier:fix": "prettier --write \"**/*.{js,ts,jsx,tsx,css}\""
   },
   "dependencies": {
+    "@codemirror/lang-json": "0.20.0",
+    "@codemirror/lint": "0.20.3",
     "@emotion/react": "^11.10.8",
     "@emotion/server": "^11.10.0",
     "@mantine/core": "^6.0.9",
@@ -22,12 +24,14 @@
     "@mantine/next": "^6.0.9",
     "@mantine/notifications": "^6.0.11",
     "@mantine/prism": "^6.0.9",
+    "@tabler/icons-react": "^3.26.0",
     "@tanstack/react-query": "^4.29.7",
     "@trpc/client": "^10.26.0",
     "@trpc/next": "^10.26.0",
     "@trpc/react-query": "^10.26.0",
     "@trpc/server": "^10.26.0",
     "@types/fhir": "^0.0.36",
+    "@uiw/react-codemirror": "4.7.0",
     "dayjs": "^1.11.7",
     "html-react-parser": "^3.0.15",
     "luxon": "^3.3.0",
@@ -36,7 +40,6 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "semver": "^7.5.4",
-    "tabler-icons-react": "^1.56.0",
     "zod": "^3.21.4"
   },
   "devDependencies": {

app/src/components/ArtifactFieldInput.tsx

@@ -1,5 +1,5 @@
 import { ActionIcon, TextInput } from '@mantine/core';
-import { X } from 'tabler-icons-react';
+import { IconX } from '@tabler/icons-react';
 
 export interface ArtifactFieldInputProps {
   label: string;
@@ -22,7 +22,7 @@ export default function ArtifactFieldInput({ label, value, disabled, setField }:
               setField('');
             }}
           >
-            <X size={16} />
+            <IconX size={16} />
           </ActionIcon>
         }
       />

app/src/components/ArtifactTimeline.tsx

@@ -1,5 +1,5 @@
 import { Center, ScrollArea, Space, Text, Timeline } from '@mantine/core';
-import { Message } from 'tabler-icons-react';
+import { IconMessage } from '@tabler/icons-react';
 import { useEffect, useState } from 'react';
 import ArtifactComments, { ArtifactCommentProps } from './ArtifactComments';
 
@@ -77,7 +77,7 @@ export default function ArtifactTimeline({ extensions }: ArtifactTimelineProps)
             <ScrollArea.Autosize mah={height * 0.8} type="scroll">
               <Timeline active={0} bulletSize={35} lineWidth={6}>
                 {commentArray?.reverse().map((e, index) => (
-                  <Timeline.Item lineVariant="dotted" bullet={<Message size={25} />} title={e.type} key={index}>
+                  <Timeline.Item lineVariant="dotted" bullet={<IconMessage size={25} />} title={e.type} key={index}>
                     {addArtifactComment({
                       date: e?.date,
                       body: e?.body,

app/src/components/CodeEditorModal.tsx

@@ -0,0 +1,89 @@
+import { Modal, Button, Center, Group, Text, Grid } from '@mantine/core';
+import CodeMirror from '@uiw/react-codemirror';
+import { json, jsonParseLinter } from '@codemirror/lang-json';
+import { linter } from '@codemirror/lint';
+import { useState } from 'react';
+
+const jsonLinter = jsonParseLinter();
+
+export interface CodeEditorModalProps {
+  open: boolean;
+  onClose: () => void;
+  onSave: (value: string) => void;
+  title?: string;
+  initialValue?: string;
+}
+
+export default function CodeEditorModal({
+  open = true,
+  onClose,
+  title,
+  onSave,
+  initialValue = ''
+}: CodeEditorModalProps) {
+  const [currentValue, setCurrentValue] = useState(initialValue);
+  const [linterError, setLinterError] = useState<string | null>(null);
+
+  return (
+    <Modal
+      centered
+      size={1000}
+      withCloseButton={false}
+      opened={open}
+      onClose={onClose}
+      styles={{
+        body: {
+          height: '700px'
+        }
+      }}
+      title={title}
+    >
+      <div style={{ overflow: 'scroll' }}>
+        {open && (
+          <CodeMirror
+            data-testid="codemirror"
+            height="600px"
+            value={initialValue}
+            extensions={[json(), linter(jsonLinter)]}
+            theme="light"
+            onUpdate={v => {
+              const diagnosticMessages = jsonLinter(v.view).map(d => d.message);
+
+              if (diagnosticMessages.length === 0) {
+                setLinterError(null);
+              } else {
+                setLinterError(diagnosticMessages.join('\n'));
+              }
+
+              // Grabbing updates from the readonly editor state to avoid codemirror weirdness
+              setCurrentValue(v.state.toJSON().doc);
+            }}
+          />
+        )}
+      </div>
+      <Grid>
+        <Grid.Col span={12}>
+          <Text color="red">{linterError}&nbsp;</Text>
+        </Grid.Col>
+        <Grid.Col span={12}>
+          <Center>
+            <Group>
+              <Button
+                data-testid="codemirror-save-button"
+                onClick={() => {
+                  onSave(currentValue);
+                }}
+                disabled={linterError != null}
+              >
+                Save
+              </Button>
+              <Button data-testid="codemirror-cancel-button" variant="default" onClick={onClose}>
+                Cancel
+              </Button>
+            </Group>
+          </Center>
+        </Grid.Col>
+      </Grid>
+    </Modal>
+  );
+}

app/src/components/ConfirmationModal.tsx

@@ -1,5 +1,5 @@
 import { Modal, Button, Center, Group, Text } from '@mantine/core';
-import { AlertTriangle } from 'tabler-icons-react';
+import { IconAlertTriangle } from '@tabler/icons-react';
 
 export interface ConfirmationModalProps {
   open: boolean;
@@ -19,7 +19,7 @@ export default function ConfirmationModal({
   return (
     <Modal opened={open} onClose={onClose} withCloseButton={false} size="lg">
       <Center>
-        <AlertTriangle color={action === 'delete' ? 'red' : 'green'} size={40} />
+        <IconAlertTriangle color={action === 'clone' ? 'green' : 'red'} size={40} />
       </Center>
       <Center>
         <Text weight={700} align="center" lineClamp={2} p={'sm'}>
@@ -32,7 +32,7 @@ export default function ConfirmationModal({
             Cancel
           </Button>
           <Button onClick={onConfirm} color={action === 'clone' ? 'green' : 'red'}>
-            {action === 'clone' ? 'Clone' : 'Delete'}
+            {String(action).charAt(0).toUpperCase() + String(action).slice(1)}
           </Button>
         </Group>
       </Center>

app/src/components/DependencyCards.tsx

@@ -12,7 +12,7 @@ import {
 } from '@mantine/core';
 import Link from 'next/link';
 import React from 'react';
-import { SquareArrowRight } from 'tabler-icons-react';
+import { IconSquareArrowRight } from '@tabler/icons-react';
 
 interface DependencyInformation {
   type?: string;
@@ -82,7 +82,7 @@ function Dependencies(props: myComponentProps) {
               <Link href={`/${dependencyInfo.link}`}>
                 <Tooltip label={'Open Dependency Resource'} openDelay={1000}>
                   <ActionIcon radius="md" size="md" variant="subtle" color="gray">
-                    {<SquareArrowRight size="24" />}
+                    {<IconSquareArrowRight size="24" />}
                   </ActionIcon>
                 </Tooltip>
               </Link>

app/src/components/ReleaseModal.tsx

@@ -2,7 +2,7 @@ import { trpc } from '@/util/trpc';
 import { ArtifactResourceType } from '@/util/types/fhir';
 import { Button, Center, Group, Modal, Stack, Text, Tooltip } from '@mantine/core';
 import { useRouter } from 'next/router';
-import { AlertCircle, CircleCheck, InfoCircle } from 'tabler-icons-react';
+import { IconAlertCircle, IconCircleCheck, IconInfoCircle } from '@tabler/icons-react';
 import { notifications } from '@mantine/notifications';
 
 export interface ReleaseModalProps {
@@ -28,23 +28,23 @@ export default function ReleaseModal({ open = true, onClose, id, resourceType }:
         notifications.show({
           title: `Release Failed!`,
           message: `Server unable to process request. ${data.error ?? ''}`,
-          icon: <AlertCircle />,
+          icon: <IconAlertCircle />,
           color: 'red'
         });
       } else if (!data.location) {
         console.error('No resource location for released artifact');
         notifications.show({
           title: `Release Failed!`,
           message: `No resource location exists for draft artifact`,
-          icon: <AlertCircle />,
+          icon: <IconAlertCircle />,
           color: 'red'
         });
       } else {
         data.released?.forEach(r => {
           notifications.show({
             title: `Draft ${r.resourceType} released!`,
             message: `Draft ${r.resourceType}/${r.id} successfully released!`,
-            icon: <CircleCheck />,
+            icon: <IconCircleCheck />,
             color: 'green'
           });
         });
@@ -79,7 +79,7 @@ export default function ReleaseModal({ open = true, onClose, id, resourceType }:
               label="Releasing a draft artifact changes the artifact's status from 'draft' to 'active' and sends the artifact to the Publishable Measure Repository. This action also deletes this draft artifact from the Authoring Measure Repository."
             >
               <div>
-                <InfoCircle size="1rem" style={{ display: 'block', opacity: 0.5 }} />
+                <IconInfoCircle size="1rem" style={{ display: 'block', opacity: 0.5 }} />
               </div>
             </Tooltip>
           </Group>