Adds github action to build/lint

.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

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

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"
  },

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

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>
  );

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(

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

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>
  ))}

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>
 

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>

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>

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}

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}