From bef8c01c89ec3338827315d15bafc43f5e981fb4 Mon Sep 17 00:00:00 2001
From: elijahbenizzy <elijah_ben_izzy@alumni.brown.edu>
Date: Tue, 20 Feb 2024 17:28:11 -0800
Subject: [PATCH] Adds github action to build/lint

---
 .github/workflows/ui.yml                      | 32 +++++++++++++++++++
 telemetry/ui/.eslintrc.js                     |  2 +-
 telemetry/ui/package.json                     |  5 ++-
 telemetry/ui/scripts/client-gen.sh            |  1 +
 telemetry/ui/src/components/common/chip.tsx   |  3 +-
 telemetry/ui/src/components/common/switch.tsx |  3 +-
 telemetry/ui/src/components/common/table.tsx  | 18 ++++-------
 telemetry/ui/src/components/common/tabs.tsx   |  6 ++--
 .../ui/src/components/nav/appcontainer.tsx    | 24 +++++---------
 .../ui/src/components/nav/breadcrumb.tsx      |  6 ++--
 .../src/components/routes/app/ActionView.tsx  |  3 +-
 .../src/components/routes/app/GraphView.tsx   |  6 ++--
 .../ui/src/components/routes/app/StepList.tsx |  3 +-
 13 files changed, 60 insertions(+), 52 deletions(-)

diff --git a/.github/workflows/ui.yml b/.github/workflows/ui.yml
index e69de29b..6e8ed1a4 100644
--- a/.github/workflows/ui.yml
+++ b/.github/workflows/ui.yml
@@ -0,0 +1,32 @@
+name: Node.js CI
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - 'telemetry/ui/**'
+  pull_request:
+    types: [opened, synchronize, reopened]
+    paths:
+      - 'telemetry/ui/**'
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: telemetry/ui
+    strategy:
+      matrix:
+        node-version: [16.x]
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: npm install --ignore-scripts
+    - run: npm run build
+    - run: npm run lint:fix
+    - run: npm run format:fix
diff --git a/telemetry/ui/.eslintrc.js b/telemetry/ui/.eslintrc.js
index 82c1bff0..f567da13 100644
--- a/telemetry/ui/.eslintrc.js
+++ b/telemetry/ui/.eslintrc.js
@@ -18,7 +18,7 @@ module.exports = {
   plugins: ['react', '@typescript-eslint', 'react-hooks'],
   rules: {
     'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks
-    'react-hooks/exhaustive-deps': 'warn', // Checks effect dependencies
+    'react-hooks/exhaustive-deps': 'off', // Checks effect dependencies
     'react/react-in-jsx-scope': 'off',
     '@typescript-eslint/ban-ts-comment': 'off',
     'react/prop-types': 'off' //Appears to be busted: see https://stackoverflow.com/questions/38684925/react-eslint-error-missing-in-props-validation
diff --git a/telemetry/ui/package.json b/telemetry/ui/package.json
index 58acb849..228dc1b7 100644
--- a/telemetry/ui/package.json
+++ b/telemetry/ui/package.json
@@ -35,9 +35,8 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "lint": "eslint .",
-    "lint:fix": "eslint . --fix --max-warnings=0 --config ./.eslintrc.js",
-    "format": "prettier --write ./**/*.{ts,tsx,css,md,json} --config ./.prettierrc.json",
-    "prepare": "husky install",
+    "lint:fix": "eslint . --fix --max-warnings=0 --config ./.eslintrc.js --ignore-path ./.eslintignore",
+    "format:fix": "prettier --write ./**/*.{ts,tsx,css,md,json} --config ./.prettierrc.json --ignore-path ./.prettierignore",
     "precommit": "npm run lint:fix && npm run format",
     "prepush": "npm run lint"
   },
diff --git a/telemetry/ui/scripts/client-gen.sh b/telemetry/ui/scripts/client-gen.sh
index ad69c99e..c5252a2b 100755
--- a/telemetry/ui/scripts/client-gen.sh
+++ b/telemetry/ui/scripts/client-gen.sh
@@ -1,3 +1,4 @@
 # run this from the ui/ directory
 # ensure your server is running on port 7241 (or change the port below)
+# TODO -- move to a package.json script
 npx openapi-typescript-codegen --input http://localhost:7241/openapi.json --output ./src/api
diff --git a/telemetry/ui/src/components/common/chip.tsx b/telemetry/ui/src/components/common/chip.tsx
index 3c2b85b5..e9672562 100644
--- a/telemetry/ui/src/components/common/chip.tsx
+++ b/telemetry/ui/src/components/common/chip.tsx
@@ -23,8 +23,7 @@ export const Chip = (props: { label: string; chipType: ChipType; className?: str
       className={`relative grid select-none items-center whitespace-nowrap rounded-lg
         p-1 px-3 font-sans text-xs font-semibold text-white ${bgColor} ${
           props.className ? props.className : ''
-        }`}
-    >
+        }`}>
       <span className="">{props.label}</span>
     </div>
   );
diff --git a/telemetry/ui/src/components/common/switch.tsx b/telemetry/ui/src/components/common/switch.tsx
index 3d85c8bd..4d90db2a 100644
--- a/telemetry/ui/src/components/common/switch.tsx
+++ b/telemetry/ui/src/components/common/switch.tsx
@@ -195,8 +195,7 @@ export function Switch({
         // Color specific styles
         colors[color]
       )}
-      {...props}
-    >
+      {...props}>
       <span
         aria-hidden="true"
         className={clsx(
diff --git a/telemetry/ui/src/components/common/table.tsx b/telemetry/ui/src/components/common/table.tsx
index 9586ed19..c8b4aba5 100644
--- a/telemetry/ui/src/components/common/table.tsx
+++ b/telemetry/ui/src/components/common/table.tsx
@@ -36,16 +36,13 @@ export function Table({
 } & React.ComponentPropsWithoutRef<'div'>) {
   return (
     <TableContext.Provider
-      value={{ bleed, dense, grid, striped } as React.ContextType<typeof TableContext>}
-    >
+      value={{ bleed, dense, grid, striped } as React.ContextType<typeof TableContext>}>
       <div className="flow-root">
         <div
           {...props}
-          className={clsx(className, '-mx-[--gutter] overflow-x-auto whitespace-nowrap')}
-        >
+          className={clsx(className, '-mx-[--gutter] overflow-x-auto whitespace-nowrap')}>
           <div
-            className={clsx('inline-block min-w-full align-middle', !bleed && 'sm:px-[--gutter]')}
-          >
+            className={clsx('inline-block min-w-full align-middle', !bleed && 'sm:px-[--gutter]')}>
             <table className="min-w-full text-left text-sm/6">{children}</table>
           </div>
         </div>
@@ -80,8 +77,7 @@ export function TableRow({
 
   return (
     <TableRowContext.Provider
-      value={{ href, target, title } as React.ContextType<typeof TableRowContext>}
-    >
+      value={{ href, target, title } as React.ContextType<typeof TableRowContext>}>
       <tr
         {...props}
         className={clsx(
@@ -91,8 +87,7 @@ export function TableRow({
           striped && 'even:bg-zinc-950/[2.5%] dark:even:bg-white/[2.5%]',
           href && striped && 'hover:bg-zinc-950/5 dark:hover:bg-white/5',
           href && !striped && 'hover:bg-zinc-950/[2.5%] dark:hover:bg-white/[2.5%]'
-        )}
-      >
+        )}>
         {children}
       </tr>
     </TableRowContext.Provider>
@@ -131,8 +126,7 @@ export function TableCell({ className, children, ...props }: React.ComponentProp
         grid && 'border-l border-l-zinc-950/5 first:border-l-0 dark:border-l-white/5',
         dense == 0 ? 'py-4' : dense == 1 ? 'py-2.5' : 'py-0.2', //'py-2.5' : 'py-4',
         !bleed && 'sm:first:pl-2 sm:last:pr-2'
-      )}
-    >
+      )}>
       {href && (
         <Link
           data-row-link
diff --git a/telemetry/ui/src/components/common/tabs.tsx b/telemetry/ui/src/components/common/tabs.tsx
index 68c4fbda..5dc639f0 100644
--- a/telemetry/ui/src/components/common/tabs.tsx
+++ b/telemetry/ui/src/components/common/tabs.tsx
@@ -24,8 +24,7 @@ export const Tabs = (props: {
           id="tabs"
           name="tabs"
           className="block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
-          defaultValue={currentTab}
-        >
+          defaultValue={currentTab}>
           {props.tabs.map((tab) => (
             <option key={tab.id}>{tab.displayName}</option>
           ))}
@@ -43,8 +42,7 @@ export const Tabs = (props: {
                   : 'text-gray-500 hover:text-gray-700',
                 'rounded-md px-3 py-2 text-sm font-medium hover:cursor-pointer'
               )}
-              aria-current={tab.id === currentTab ? 'page' : undefined}
-            >
+              aria-current={tab.id === currentTab ? 'page' : undefined}>
               {tab.displayName}
             </span>
           ))}
diff --git a/telemetry/ui/src/components/nav/appcontainer.tsx b/telemetry/ui/src/components/nav/appcontainer.tsx
index d1deb60f..fcbfda79 100644
--- a/telemetry/ui/src/components/nav/appcontainer.tsx
+++ b/telemetry/ui/src/components/nav/appcontainer.tsx
@@ -101,8 +101,7 @@ export const AppContainer = (props: { children: React.ReactNode }) => {
               enterTo="opacity-100"
               leave="transition-opacity ease-linear duration-300"
               leaveFrom="opacity-100"
-              leaveTo="opacity-0"
-            >
+              leaveTo="opacity-0">
               <div className="fixed inset-0 bg-gray-900/80" />
             </Transition.Child>
 
@@ -114,8 +113,7 @@ export const AppContainer = (props: { children: React.ReactNode }) => {
                 enterTo="translate-x-0"
                 leave="transition ease-in-out duration-300 transform"
                 leaveFrom="translate-x-0"
-                leaveTo="-translate-x-full"
-              >
+                leaveTo="-translate-x-full">
                 <Dialog.Panel className="relative mr-16 flex w-full max-w-xs flex-1">
                   <Transition.Child
                     as={Fragment}
@@ -124,14 +122,12 @@ export const AppContainer = (props: { children: React.ReactNode }) => {
                     enterTo="opacity-100"
                     leave="ease-in-out duration-300"
                     leaveFrom="opacity-100"
-                    leaveTo="opacity-0"
-                  >
+                    leaveTo="opacity-0">
                     <div className="absolute left-full top-0 flex w-16 justify-center pt-5">
                       <button
                         type="button"
                         className="-m-2.5 p-2.5"
-                        onClick={() => setSmallSidebarOpen(false)}
-                      >
+                        onClick={() => setSmallSidebarOpen(false)}>
                         <span className="sr-only">Close sidebar</span>
                         <XMarkIcon className="h-6 w-6 text-white" aria-hidden="true" />
                       </button>
@@ -163,8 +159,7 @@ export const AppContainer = (props: { children: React.ReactNode }) => {
                                         ? 'text-gray-700 hover:text-dwdarkblue'
                                         : 'text-gray-700 hover:text-dwdarkblue hover:bg-gray-50',
                                     'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold'
-                                  )}
-                                >
+                                  )}>
                                   <item.icon
                                     className={classNames(
                                       item.current
@@ -193,8 +188,7 @@ export const AppContainer = (props: { children: React.ReactNode }) => {
         <div
           className={`hidden ${
             sidebarOpen ? 'h-screen lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col' : ''
-          }`}
-        >
+          }`}>
           {/* Sidebar component, swap this element with another sidebar if you like */}
           <div className="flex grow flex-col gap-y-5 overflow-y-auto border-r border-gray-200 bg-white px-6 py-2">
             <div className="flex h-16 shrink-0 items-center">
@@ -217,8 +211,7 @@ export const AppContainer = (props: { children: React.ReactNode }) => {
                                 ? 'text-gray-700 hover:text-dwdarkblue'
                                 : 'text-gray-700 hover:text-dwdarkblue hover:bg-gray-50',
                             'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold'
-                          )}
-                        >
+                          )}>
                           <item.icon
                             className={classNames(
                               item.current
@@ -246,8 +239,7 @@ export const AppContainer = (props: { children: React.ReactNode }) => {
             !sidebarOpen
               ? 'lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-8 lg:flex-col justify-end lg:py-2 lg:px-1'
               : ''
-          }`}
-        >
+          }`}>
           <ToggleOpenButton open={sidebarOpen} toggleSidebar={toggleSidebar} />
         </div>
 
diff --git a/telemetry/ui/src/components/nav/breadcrumb.tsx b/telemetry/ui/src/components/nav/breadcrumb.tsx
index a891ce2c..7992be3a 100644
--- a/telemetry/ui/src/components/nav/breadcrumb.tsx
+++ b/telemetry/ui/src/components/nav/breadcrumb.tsx
@@ -40,15 +40,13 @@ export const BreadCrumb = () => {
                   className="h-5 w-5 flex-shrink-0 text-gray-300"
                   fill="currentColor"
                   viewBox="0 0 20 20"
-                  aria-hidden="true"
-                >
+                  aria-hidden="true">
                   <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
                 </svg>
                 <a
                   href={page.href}
                   className="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
-                  aria-current={page.current ? 'page' : undefined}
-                >
+                  aria-current={page.current ? 'page' : undefined}>
                   {page.name}
                 </a>
               </div>
diff --git a/telemetry/ui/src/components/routes/app/ActionView.tsx b/telemetry/ui/src/components/routes/app/ActionView.tsx
index 3b6be6c1..f2912751 100644
--- a/telemetry/ui/src/components/routes/app/ActionView.tsx
+++ b/telemetry/ui/src/components/routes/app/ActionView.tsx
@@ -17,8 +17,7 @@ export const CodeView = (props: { code: string }) => {
         className="bg-dwdarkblue/100"
         wrapLines={true}
         wrapLongLines={true}
-        style={base16AteliersulphurpoolLight}
-      >
+        style={base16AteliersulphurpoolLight}>
         {props.code}
       </SyntaxHighlighter>
     </div>
diff --git a/telemetry/ui/src/components/routes/app/GraphView.tsx b/telemetry/ui/src/components/routes/app/GraphView.tsx
index 8218cb5a..4b037246 100644
--- a/telemetry/ui/src/components/routes/app/GraphView.tsx
+++ b/telemetry/ui/src/components/routes/app/GraphView.tsx
@@ -75,8 +75,7 @@ const ActionNode = (props: { data: NodeData }) => {
     <>
       <Handle type="target" position={Position.Top} />
       <div
-        className={`${bgColor} ${opacity} ${additionalClasses} text-lg font-sans  p-3 rounded-md border-dwlightblue b-2 border`}
-      >
+        className={`${bgColor} ${opacity} ${additionalClasses} text-lg font-sans  p-3 rounded-md border-dwlightblue b-2 border`}>
         {props.data.action.name}
       </div>
       <Handle type="source" position={Position.Bottom} id="a" />
@@ -219,8 +218,7 @@ export const _Graph = (props: {
         highlightedActions: props.previousActions,
         hoverAction: props.hoverAction,
         currentAction: props.currentAction
-      }}
-    >
+      }}>
       <ReactFlow
         nodes={nodes}
         edges={edges}
diff --git a/telemetry/ui/src/components/routes/app/StepList.tsx b/telemetry/ui/src/components/routes/app/StepList.tsx
index 0128acac..9b99653f 100644
--- a/telemetry/ui/src/components/routes/app/StepList.tsx
+++ b/telemetry/ui/src/components/routes/app/StepList.tsx
@@ -133,8 +133,7 @@ export const StepList = (props: {
                 } else {
                   props.setCurrentSelectedIndex(i);
                 }
-              }}
-            >
+              }}>
               <TableCell className="w-5 text-gray-500">{step.step_sequence_id}</TableCell>
               <TableCell className="font-semibold text-gray-600">
                 {step.step_start_log.action}