progress on UI: SNMP version added to form + test improvements + depl…

…oyment to GitHub pages

jest-setup.ts

@@ -1,15 +1,11 @@
 import '@testing-library/jest-dom'
 
-Object.defineProperty(window, 'matchMedia', {
-  writable: true,
-  value: jest.fn().mockImplementation((query) => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: jest.fn(),
-    removeListener: jest.fn(),
-    addEventListener: jest.fn(),
-    removeEventListener: jest.fn(),
-    dispatchEvent: jest.fn(),
+jest.mock('@tanstack/react-table', () => ({
+  getCoreRowModel: jest.fn(),
+  getSortedRowModel: jest.fn(),
+  useReactTable: jest.fn().mockImplementation(() => ({
+    getSelectedRowModel: jest.fn().mockImplementation(() => ({ flatRows: [] })),
+    getHeaderGroups: jest.fn().mockImplementation(() => []),
+    getRowModel: jest.fn().mockImplementation(() => ({ rows: [] })),
   })),
-})
+}))

package.json

@@ -3,18 +3,21 @@
   "version": "0.0.1",
   "main": "index.js",
   "repository": "git@github.com:sonalake/snmp-sim-ui.git",
+  "homepage": "https://sonalake.github.io/snmp-sim-ui",
   "license": "Apache-2.0",
   "scripts": {
     "clean": "rimraf bundle & rimraf dist",
     "build": "./node_modules/.bin/webpack --env NODE_ENV=production --mode production",
+    "predeploy": "yarn build",
+    "deploy": "gh-pages -d build",
     "start": "./node_modules/.bin/webpack serve --mode development --hot --history-api-fallback",
     "test": "jest"
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "^8.1.1",
-    "@tanstack/react-table": "^8.2.6",
+    "@tanstack/react-table": "^8.3.3",
     "axios": "^0.27.2",
-    "flowbite": "^1.4.7",
+    "flowbite": "^1.5.1",
     "flowbite-react": "^0.1.3",
     "formik": "^2.2.9",
     "identity-obj-proxy": "^3.0.0",
@@ -23,27 +26,27 @@
     "react-icons": "^4.4.0",
     "react-router": "6.3.0",
     "react-router-dom": "6.3.0",
-    "react-toastify": "^9.0.5"
+    "react-toastify": "^9.0.7"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/react-hooks": "^8.0.1",
-    "@types/jest": "^28.1.5",
+    "@types/jest": "^28.1.6",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
     "@types/react-icons": "^3.0.0",
     "@types/react-router": "^5.1.18",
     "@types/react-router-dom": "^5.3.3",
     "@types/tailwindcss": "^3.1.0",
-    "@typescript-eslint/eslint-plugin": "^5.30.6",
-    "@typescript-eslint/parser": "^5.30.6",
+    "@typescript-eslint/eslint-plugin": "^5.31.0",
+    "@typescript-eslint/parser": "^5.31.0",
     "autoprefixer": "^10.4.7",
     "axios-mock-adapter": "^1.21.1",
     "clean-webpack-plugin": "^4.0.0",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.7.1",
-    "eslint": "^8.19.0",
+    "eslint": "^8.20.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jest": "^26.6.0",
@@ -52,7 +55,8 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-testing-library": "^5.5.1",
     "file-loader": "^6.2.0",
-    "fork-ts-checker-webpack-plugin": "^7.2.12",
+    "fork-ts-checker-webpack-plugin": "^7.2.13",
+    "gh-pages": "^4.0.0",
     "html-webpack-plugin": "^5.5.0",
     "jest": "^28.1.3",
     "jest-environment-jsdom": "^28.1.3",
@@ -66,11 +70,11 @@
     "rimraf": "^3.0.2",
     "style-loader": "^3.3.1",
     "tailwindcss": "^3.1.6",
-    "ts-jest": "^28.0.6",
+    "ts-jest": "^28.0.7",
     "ts-loader": "^9.3.1",
     "tslib": "^2.4.0",
     "typescript": "^4.7.4",
-    "webpack": "^5.73.0",
+    "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.9.3",
     "webpack-merge": "^5.8.0"

src/components/DataTable/DataTable.tsx

@@ -7,12 +7,10 @@ import {
   SortingState,
   useReactTable,
 } from '@tanstack/react-table'
-import { Table } from 'flowbite-react'
+import { Card, Table, TextInput } from 'flowbite-react'
 import React, { FC, useEffect, useState } from 'react'
 import { AiOutlineCaretDown, AiOutlineCaretUp, AiOutlineFilter } from 'react-icons/ai'
-import { toast } from 'react-toastify'
 import { Agent, Device } from '../../models'
-import { Alert } from '../Alert/Alert'
 import { DataTableCheckbox } from './DataTableCheckbox/DataTableCheckbox'
 
 interface Props<T extends Agent | Device> {
@@ -25,6 +23,7 @@ interface Props<T extends Agent | Device> {
 export const DataTable: FC<Props<Agent | Device>> = ({ data, columns, isSelectable, onSelection }) => {
   const [sorting, setSorting] = useState<SortingState>([])
   const [rowSelection, setRowSelection] = useState({})
+  const [filter, setFilter] = useState('')
 
   const table = useReactTable({
     data,
@@ -61,29 +60,41 @@ export const DataTable: FC<Props<Agent | Device>> = ({ data, columns, isSelectab
           headerGroup.headers.map((header) => (
             <Table.HeadCell key={header.id} colSpan={header.colSpan}>
               {!header.isPlaceholder && (
-                <div className="flex flex-row gap-1 items-center">
-                  <div
-                    {...{
-                      className: header.column.getCanSort()
-                        ? 'cursor-pointer select-none flex flex-row gap-2'
-                        : 'flex flex-row justify-between gap-2',
-                      onClick: header.column.getToggleSortingHandler(),
-                    }}
-                  >
-                    {flexRender(header.column.columnDef.header, header.getContext())}
-                    {
+                <div className="flex flex-col relative" style={{ minWidth: '5vw' }}>
+                  <div className="flex gap-1 items-center">
+                    <div
+                      {...{
+                        className: header.column.getCanSort()
+                          ? 'cursor-pointer select-none flex gap-2'
+                          : 'flex justify-between gap-2',
+                        onClick: header.column.getToggleSortingHandler(),
+                      }}
+                    >
+                      {flexRender(header.column.columnDef.header, header.getContext())}
                       {
-                        asc: <AiOutlineCaretUp />,
-                        desc: <AiOutlineCaretDown />,
-                      }[header.column.getIsSorted() as string]
-                    }
-                  </div>
+                        {
+                          asc: <AiOutlineCaretUp />,
+                          desc: <AiOutlineCaretDown />,
+                        }[header.column.getIsSorted() as string]
+                      }
+                    </div>
 
-                  {header.column.columnDef.header !== 'Actions' && (
-                    <AiOutlineFilter
-                      className="cursor-pointer"
-                      onClick={() => toast(<Alert color="info" message="Filtering - to be implemented" />)}
-                    />
+                    {header.column.columnDef.header !== 'Actions' && (
+                      <AiOutlineFilter
+                        className="cursor-pointer"
+                        onClick={() =>
+                          filter === header.column.columnDef.header
+                            ? setFilter('')
+                            : setFilter(header.column.columnDef.header as string)
+                        }
+                      />
+                    )}
+                  </div>
+                  {filter === header.column.columnDef.header && (
+                    <Card style={{ position: 'absolute', top: 20, left: 0, width: '20vw' }}>
+                      <p>Filter by {header.column.columnDef.header} - to be implemented</p>
+                      <TextInput />
+                    </Card>
                   )}
                 </div>
               )}

src/components/DataTable/DataTableCheckbox/DataTableCheckbox.test.tsx

@@ -0,0 +1,12 @@
+import { screen } from '@testing-library/react'
+import React from 'react'
+import { customRender } from '../../../utils/testUtils/testUtils'
+import { DataTableCheckbox } from './DataTableCheckbox'
+
+describe('DataTableCheckbox', () => {
+  it(`should render the component`, async () => {
+    customRender(<DataTableCheckbox data-testid="test" />)
+
+    expect(screen.getByTestId('test')).toBeInTheDocument()
+  })
+})

src/components/DataTable/DataTableCheckbox/DataTableCheckbox.tsx

@@ -1,10 +1,10 @@
-import React, { HTMLProps, useEffect, useRef } from 'react'
+import React, { FC, HTMLProps, useEffect, useRef } from 'react'
 
-export const DataTableCheckbox = ({
+export const DataTableCheckbox: FC<{ indeterminate?: boolean } & HTMLProps<HTMLInputElement>> = ({
   indeterminate,
   className = '',
   ...rest
-}: { indeterminate?: boolean } & HTMLProps<HTMLInputElement>) => {
+}) => {
   const ref = useRef<HTMLInputElement>(null)
 
   useEffect(() => {

src/components/DataTable/tableColumns/devicesColumns.tsx

@@ -29,6 +29,7 @@ export const devicesColumns: DevicesColumns = [
   },
   {
     header: 'State',
+    accessorFn: (row) => row.snmp_host === '127.0.0.1',
     cell: ({ row }) => {
       const isMockActive = row.original.snmp_host === '127.0.0.1'
 

src/components/DataTable/tableColumns/handleResource.test.tsx

@@ -0,0 +1,9 @@
+import { getOperationProperties } from './handleResource'
+
+describe('getOperationProperties', () => {
+  it(`should generate the correct operation properties`, async () => {
+    const messages = getOperationProperties({ resource: 'agents' })
+
+    expect(messages.post).toStrictEqual({ url: `/api/agents`, message: `Agent created!` })
+  })
+})

src/components/DataTable/tableColumns/handleResource.tsx

@@ -4,7 +4,7 @@ import { toast } from 'react-toastify'
 import { Alert } from '../..'
 import { Agent, Device } from '../../../models'
 
-const getOperationProperties = (config: { id?: string; resource: 'agents' | 'devices' }) => {
+export const getOperationProperties = (config: { id?: string; resource: 'agents' | 'devices' }) => {
   const { id, resource } = config
 
   const messageResource = resource === 'agents' ? 'Agent' : 'Device'

src/components/ErrorBoundary/ErrorBoundary.test.tsx

@@ -3,16 +3,16 @@ import React from 'react'
 import { customRender } from '../../utils/testUtils/testUtils'
 import { ErrorBoundary } from './ErrorBoundary'
 
-describe('ErrorBoundary', () => {
-  it.skip(`should render error boundary component when there is an error`, async () => {
-    // This is needed for suppressing the testError appearing as uncaught
-    const mock = jest.spyOn(console, 'error').mockImplementation(() => null)
+const testError = 'testError'
 
-    const testError = 'testError'
+const ProblemChild = () => {
+  throw new Error(testError)
+}
 
-    const ProblemChild = () => {
-      throw new Error(testError)
-    }
+describe('ErrorBoundary', () => {
+  it(`should render error boundary component when there is an error`, async () => {
+    // This is needed for suppressing the testError appearing as uncaught
+    jest.spyOn(console, 'error').mockImplementation(() => null)
 
     customRender(
       <ErrorBoundary>
@@ -23,7 +23,5 @@ describe('ErrorBoundary', () => {
     expect(await screen.findByText(testError)).toBeInTheDocument()
     expect(await screen.findByText('Error')).toBeInTheDocument()
     expect(await screen.findByText('Refresh')).toBeInTheDocument()
-
-    mock.mockRestore()
   })
 })

src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -18,8 +18,8 @@ export class ErrorBoundary extends Component<Props, State> {
     hasError: false,
   }
 
-  public static getDerivedStateFromError(_: Error): State {
-    return { error: null, hasError: true }
+  public static getDerivedStateFromError(error: Error): State {
+    return { error, hasError: true }
   }
 
   public componentDidCatch(error: Error) {

src/components/Form/AgentSelector.tsx

@@ -7,7 +7,7 @@ import { Agent, FormField, ResourceResponse } from '../../models'
 import { handleResource } from '../DataTable/tableColumns/handleResource'
 import { Modal } from '../Modal/Modal'
 import { Form } from './Form'
-import { agentFormFields } from './formFields'
+import { agentFormFields, agentInitialValues } from './formFields'
 
 export const AgentSelector: FC<{
   formItem: FormField
@@ -69,6 +69,7 @@ export const AgentSelector: FC<{
         <Modal isVisible={isModalVisible} title="Add new agent" onClose={() => setIsModalVisible(false)}>
           <Form
             formFields={agentFormFields}
+            initialValues={agentInitialValues}
             onSubmit={async (formValues) => {
               await handleResource({
                 resource: 'agents',

src/components/Form/Form.test.tsx

@@ -2,13 +2,13 @@ import { screen } from '@testing-library/react'
 import React from 'react'
 import { customRender } from '../../utils/testUtils/testUtils'
 import { Form } from './Form'
-import { agentFormFields } from './formFields'
+import { agentFormFields, agentInitialValues } from './formFields'
 
 describe('Form', () => {
   it('should render the component', () => {
     const onSubmit = jest.fn()
 
-    customRender(<Form formFields={agentFormFields} onSubmit={onSubmit} />)
+    customRender(<Form formFields={agentFormFields} initialValues={agentInitialValues} onSubmit={onSubmit} />)
 
     expect(screen.getByText(agentFormFields.name.label)).toBeInTheDocument()
   })