Merge pull request #355 from Gregory-Pereira/317-add-ui-linting-wf

adding a basic npm linting workflow for ui dir

.github/workflows/lint-ui.yml

@@ -0,0 +1,36 @@
+name: Lint UI changes
+
+on:
+  push:
+    branches: ["main"]
+    paths:
+      - '.github/workflows/lint-ui.yml'
+      - 'ui/*'
+      - '!ui/README.md'
+  pull_request:
+    branches: ["main"]
+    paths:
+      - '.github/workflows/lint-ui.yml'
+      - 'ui/*'
+      - '!ui/README.md'
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  npm-lint:
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+      - name: Install dependencies
+        run: npm install
+        working-directory: ui
+      - name: Run UI linting
+        run: npm run lint
+        working-directory: ui

ui/package.json

@@ -12,8 +12,8 @@
     "build": "webpack --config webpack.prod.js",
     "start": "dotenv -e .env -- cross-env sirv dist --cors --single --host --port 8080",
     "start:dev": "webpack serve --color --progress --config webpack.dev.js",
-    "eslint": "eslint --ext .tsx,.js ./src/",
-    "lint": "npm run eslint",
+    "lint": "eslint --ext .tsx,.js ./src/",
+    "lint-fix": "eslint --ext .tsx,.js ./src/ --fix",
     "format": "prettier --check --write ./src/**/*.{tsx,ts}",
     "type-check": "tsc --noEmit",
     "clean": "rimraf dist",

ui/src/app/AppLayout/AppLayout.tsx

@@ -1,23 +1,22 @@
 import * as React from 'react';
 import { NavLink, useLocation, useNavigate } from 'react-router-dom';
-import {
-  Brand,
-  Button,
-  Masthead,
-  MastheadBrand,
-  MastheadMain,
-  MastheadToggle,
-  MastheadContent,
-  Nav,
-  NavExpandable,
-  NavItem,
-  NavList,
-  Page,
-  PageSidebar,
-  PageSidebarBody,
-  SkipToContent
-} from '@patternfly/react-core';
-import { BarsIcon, SignOutAltIcon } from '@patternfly/react-icons';
+import { Brand } from '@patternfly/react-core/dist/dynamic/components/Brand'
+import { Button } from '@patternfly/react-core/dist/dynamic/components/Button'
+import { Masthead } from '@patternfly/react-core/dist/dynamic/components/Masthead'
+import { MastheadBrand } from '@patternfly/react-core/dist/dynamic/components/Masthead'
+import { MastheadContent } from '@patternfly/react-core/dist/dynamic/components/Masthead'
+import { MastheadMain } from '@patternfly/react-core/dist/dynamic/components/Masthead'
+import { MastheadToggle } from '@patternfly/react-core/dist/dynamic/components/Masthead'
+import { Nav } from '@patternfly/react-core/dist/dynamic/components/Nav'
+import { NavExpandable } from '@patternfly/react-core/dist/dynamic/components/Nav'
+import { NavItem } from '@patternfly/react-core/dist/dynamic/components/Nav'
+import { NavList } from '@patternfly/react-core/dist/dynamic/components/Nav'
+import { Page } from '@patternfly/react-core/dist/dynamic/components/Page'
+import { PageSidebar } from '@patternfly/react-core/dist/dynamic/components/Page'
+import { PageSidebarBody } from '@patternfly/react-core/dist/dynamic/components/Page'
+import { SkipToContent } from '@patternfly/react-core/dist/dynamic/components/SkipToContent'
+import BarsIcon from '@patternfly/react-icons/dist/dynamic/icons/bars-icon'
+import SignOutAltIcon from '@patternfly/react-icons/dist/dynamic/icons/sign-out-alt-icon'
 import { IAppRoute, IAppRouteGroup, routes } from '@app/routes';
 import { useAuth } from '../common/AuthContext';
 import { useTheme } from '../context/ThemeContext';

ui/src/app/Chat/Chat.tsx

@@ -1,9 +1,15 @@
 // Chat.tsx
-import React, { useState, useRef, useEffect } from 'react';
-import { ActionGroup, Button, Form, FormGroup, TextInput, Spinner } from '@patternfly/react-core';
+import React, { useEffect, useRef, useState } from 'react';
+import { ActionGroup } from '@patternfly/react-core/dist/dynamic/components/Form'
+import { Button } from '@patternfly/react-core/dist/dynamic/components/Button'
+import { Form } from '@patternfly/react-core/dist/dynamic/components/Form'
+import { FormGroup } from '@patternfly/react-core/dist/dynamic/components/Form'
+import { Spinner } from '@patternfly/react-core/dist/dynamic/components/Spinner'
+import { TextInput } from '@patternfly/react-core/dist/dynamic/components/TextInput'
 import { usePostChat } from "@app/common/HooksPostChat";
 import './ChatForm.css';
-import { UserIcon, CopyIcon } from "@patternfly/react-icons";
+import UserIcon from '@patternfly/react-icons/dist/dynamic/icons/user-icon'
+import CopyIcon from '@patternfly/react-icons/dist/dynamic/icons/copy-icon'
 import botIconSrc from '../bgimages/bot-icon-chat-32x32.svg';
 
 interface Message {

ui/src/app/Contribute/Knowledge/Knowledge.tsx

@@ -1,17 +1,15 @@
 import React, { useState } from 'react';
 import './Knowledge.css';
 import { usePostKnowledgePR } from "@app/common/HooksPostKnowledgePR";
-import {
-  Alert,
-  AlertActionCloseButton,
-  ActionGroup,
-  Button,
-  Text,
-  TextInput,
-  Form,
-  FormGroup,
-  TextArea,
-} from '@patternfly/react-core';
+import { ActionGroup } from '@patternfly/react-core/dist/dynamic/components/Form'
+import { Alert } from '@patternfly/react-core/dist/dynamic/components/Alert'
+import { AlertActionCloseButton } from '@patternfly/react-core/dist/dynamic/components/Alert'
+import { Button } from '@patternfly/react-core/dist/dynamic/components/Button'
+import { Form } from '@patternfly/react-core/dist/dynamic/components/Form'
+import { FormGroup } from '@patternfly/react-core/dist/dynamic/components/Form'
+import { Text } from '@patternfly/react-core/dist/dynamic/components/Text'
+import { TextArea } from '@patternfly/react-core/dist/dynamic/components/TextArea'
+import { TextInput } from '@patternfly/react-core/dist/dynamic/components/TextInput'
 
 export const KnowledgeForm: React.FunctionComponent = () => {
   const [email, setEmail] = useState('');

ui/src/app/Contribute/Skill/Skill.tsx

@@ -1,17 +1,15 @@
 import React, { useState } from 'react';
 import './Skill.css';
 import { usePostSkillPR } from "@app/common/HooksPostSkillPR";
-import {
-  Alert,
-  AlertActionCloseButton,
-  ActionGroup,
-  Button,
-  Text,
-  TextInput,
-  Form,
-  FormGroup,
-  TextArea,
-} from '@patternfly/react-core';
+import { ActionGroup } from '@patternfly/react-core/dist/dynamic/components/Form'
+import { Alert } from '@patternfly/react-core/dist/dynamic/components/Alert'
+import { AlertActionCloseButton } from '@patternfly/react-core/dist/dynamic/components/Alert'
+import { Button } from '@patternfly/react-core/dist/dynamic/components/Button'
+import { Form } from '@patternfly/react-core/dist/dynamic/components/Form'
+import { FormGroup } from '@patternfly/react-core/dist/dynamic/components/Form'
+import { Text } from '@patternfly/react-core/dist/dynamic/components/Text'
+import { TextArea } from '@patternfly/react-core/dist/dynamic/components/TextArea'
+import { TextInput } from '@patternfly/react-core/dist/dynamic/components/TextInput'
 
 export const SkillForm: React.FunctionComponent = () => {
   const [email, setEmail] = useState('');

ui/src/app/Dashboard/Dashboard.tsx

@@ -1,7 +1,11 @@
 // Dashboard.tsx
 import JobDurationChart from "@app/components/ChartJobDuration";
 import * as React from 'react';
-import { PageSection, Title, Card, CardBody, CardTitle } from '@patternfly/react-core';
+import { Card } from '@patternfly/react-core/dist/dynamic/components/Card'
+import { CardBody } from '@patternfly/react-core/dist/dynamic/components/Card'
+import { CardTitle } from '@patternfly/react-core/dist/dynamic/components/Card'
+import { PageSection } from '@patternfly/react-core/dist/dynamic/components/Page'
+import { Title } from '@patternfly/react-core/dist/dynamic/components/Title'
 import JobStatusPieChart from '@app/components/ChartJobDistribution';
 
 const Dashboard: React.FunctionComponent = () => {

ui/src/app/Jobs/All/All.tsx

@@ -5,9 +5,12 @@ import JobsLayout from "@app/common/JobsLayout";
 import { formatDate } from "@app/utils/dateUtils";
 import { getSortParams } from "@app/utils/tableUtils";
 import * as React from 'react';
-import { PageSection, Title } from '@patternfly/react-core';
-import { Table, Thead, Tr, Th, Td, Tbody, ExpandableRowContent } from '@patternfly/react-table';
-import { GithubIcon, CodeBranchIcon, AngleRightIcon } from '@patternfly/react-icons';
+import { PageSection } from '@patternfly/react-core/dist/dynamic/components/Page'
+import { Title } from '@patternfly/react-core/dist/dynamic/components/Title'
+import { ExpandableRowContent, Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
+import AngleRightIcon from '@patternfly/react-icons/dist/dynamic/icons/angle-right-icon'
+import CodeBranchIcon from '@patternfly/react-icons/dist/dynamic/icons/code-branch-icon'
+import GithubIcon from '@patternfly/react-icons/dist/dynamic/icons/github-icon'
 
 const AllJobs: React.FunctionComponent = () => {
   const jobs = useFetchJobs();

ui/src/app/Jobs/Failed/Failed.tsx

@@ -2,10 +2,13 @@ import { Columns } from "@app/common/DisplayColumns";
 import useFetchJobs from "@app/common/HooksApiServer";
 import JobsLayout from "@app/common/JobsLayout";
 import { formatDate } from '@app/utils/dateUtils';
-import {GithubIcon, AngleRightIcon, CodeBranchIcon} from "@patternfly/react-icons";
+import AngleRightIcon from '@patternfly/react-icons/dist/dynamic/icons/angle-right-icon'
+import CodeBranchIcon from '@patternfly/react-icons/dist/dynamic/icons/code-branch-icon'
+import GithubIcon from '@patternfly/react-icons/dist/dynamic/icons/github-icon'
 import * as React from 'react';
-import { PageSection, Title } from '@patternfly/react-core';
-import { Table, Thead, Tr, Th, Td, Tbody, ExpandableRowContent } from '@patternfly/react-table';
+import { PageSection } from '@patternfly/react-core/dist/dynamic/components/Page'
+import { Title } from '@patternfly/react-core/dist/dynamic/components/Title'
+import { ExpandableRowContent, Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import { getSortParams } from '@app/utils/tableUtils';
 
 const FailedJobs: React.FunctionComponent = () => {

ui/src/app/Jobs/Pending/Pending.tsx

@@ -3,10 +3,13 @@ import { Columns } from "@app/common/DisplayColumns";
 import useFetchJobs from "@app/common/HooksApiServer";
 import JobsLayout from "@app/common/JobsLayout";
 import { formatDate } from '@app/utils/dateUtils';
-import {GithubIcon, AngleRightIcon, CodeBranchIcon} from "@patternfly/react-icons";
+import AngleRightIcon from '@patternfly/react-icons/dist/dynamic/icons/angle-right-icon'
+import CodeBranchIcon from '@patternfly/react-icons/dist/dynamic/icons/code-branch-icon'
+import GithubIcon from '@patternfly/react-icons/dist/dynamic/icons/github-icon'
 import * as React from 'react';
-import { PageSection, Title } from '@patternfly/react-core';
-import { Table, Thead, Tr, Th, Td, Tbody, ExpandableRowContent } from '@patternfly/react-table';
+import { PageSection } from '@patternfly/react-core/dist/dynamic/components/Page'
+import { Title } from '@patternfly/react-core/dist/dynamic/components/Title'
+import { ExpandableRowContent, Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import { getSortParams } from '@app/utils/tableUtils';
 
 const PendingJobs: React.FunctionComponent = () => {

ui/src/app/Jobs/Running/Running.tsx

@@ -3,10 +3,13 @@ import { Columns } from "@app/common/DisplayColumns";
 import useFetchJobs from "@app/common/HooksApiServer";
 import JobsLayout from "@app/common/JobsLayout";
 import { formatDate } from '@app/utils/dateUtils';
-import {GithubIcon, AngleRightIcon, CodeBranchIcon} from "@patternfly/react-icons";
+import AngleRightIcon from '@patternfly/react-icons/dist/dynamic/icons/angle-right-icon'
+import CodeBranchIcon from '@patternfly/react-icons/dist/dynamic/icons/code-branch-icon'
+import GithubIcon from '@patternfly/react-icons/dist/dynamic/icons/github-icon'
 import * as React from 'react';
-import { PageSection, Title } from '@patternfly/react-core';
-import { Table, Thead, Tr, Th, Td, Tbody, ExpandableRowContent } from '@patternfly/react-table';
+import { PageSection } from '@patternfly/react-core/dist/dynamic/components/Page'
+import { Title } from '@patternfly/react-core/dist/dynamic/components/Title'
+import { ExpandableRowContent, Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import { getSortParams } from '@app/utils/tableUtils';
 
 const RunningJobs: React.FunctionComponent = () => {

ui/src/app/Jobs/Success/Success.tsx

@@ -3,10 +3,13 @@ import { Columns } from "@app/common/DisplayColumns";
 import useFetchJobs from "@app/common/HooksApiServer";
 import JobsLayout from "@app/common/JobsLayout";
 import { formatDate } from '@app/utils/dateUtils';
-import {GithubIcon, AngleRightIcon, CodeBranchIcon} from "@patternfly/react-icons";
+import AngleRightIcon from '@patternfly/react-icons/dist/dynamic/icons/angle-right-icon'
+import CodeBranchIcon from '@patternfly/react-icons/dist/dynamic/icons/code-branch-icon'
+import GithubIcon from '@patternfly/react-icons/dist/dynamic/icons/github-icon'
 import * as React from 'react';
-import { PageSection, Title } from '@patternfly/react-core';
-import { Table, Thead, Tr, Th, Td, Tbody, ExpandableRowContent } from '@patternfly/react-table';
+import { PageSection } from '@patternfly/react-core/dist/dynamic/components/Page'
+import { Title } from '@patternfly/react-core/dist/dynamic/components/Title'
+import { ExpandableRowContent, Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import { getSortParams } from '@app/utils/tableUtils';
 
 const SuccessJobs: React.FunctionComponent = () => {

ui/src/app/Login/Login.tsx

@@ -1,13 +1,11 @@
 // Login.tsx
-import {ExclamationCircleIcon} from "@patternfly/react-icons";
-import React, { useState, ChangeEvent } from "react";
-import {
-  LoginForm,
-  LoginPage,
-  ListItem,
-  ListVariant,
-  LoginFooterItem
-} from "@patternfly/react-core";
+import {ExclamationCircleIcon} from "@patternfly/react-icons/dist/dynamic/icons/exclamation-circle-icon";
+import React, { ChangeEvent, useState } from "react";
+import { LoginForm } from '@patternfly/react-core/dist/dynamic/components/LoginPage'
+import { LoginPage } from '@patternfly/react-core/dist/dynamic/components/LoginPage'
+import { ListItem } from '@patternfly/react-core/dist/dynamic/components/List'
+import { ListVariant } from '@patternfly/react-core/dist/dynamic/components/List'
+import { LoginFooterItem } from '@patternfly/react-core/dist/dynamic/components/LoginPage'
 import logo from '@app/bgimages/InstructLab-Logo.svg';
 import { useNavigate } from 'react-router-dom';
 import { useAuth } from "../common/AuthContext";

ui/src/app/NotFound/NotFound.tsx

@@ -1,15 +1,13 @@
 // NotFound.tsx
 import * as React from 'react';
-import { ExclamationTriangleIcon } from '@patternfly/react-icons';
-import {
-  Button,
-  EmptyState,
-  EmptyStateBody,
-  EmptyStateFooter,
-  EmptyStateHeader,
-  EmptyStateIcon,
-  PageSection,
-} from '@patternfly/react-core';
+import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/dynamic/icons/exclamation-triangle-icon';
+import { Button } from '@patternfly/react-core/dist/dynamic/components/Button'
+import { EmptyState } from '@patternfly/react-core/dist/dynamic/components/EmptyState'
+import { EmptyStateBody } from '@patternfly/react-core/dist/dynamic/components/EmptyState'
+import { EmptyStateFooter } from '@patternfly/react-core/dist/dynamic/components/EmptyState'
+import { EmptyStateHeader } from '@patternfly/react-core/dist/dynamic/components/EmptyState'
+import { EmptyStateIcon } from '@patternfly/react-core/dist/dynamic/components/EmptyState'
+import { PageSection } from '@patternfly/react-core/dist/dynamic/components/Page'
 import { useNavigate } from 'react-router-dom';
 
 const NotFound: React.FunctionComponent = () => {
@@ -24,7 +22,7 @@ const NotFound: React.FunctionComponent = () => {
       <EmptyState variant="full">
         <EmptyStateHeader titleText="404 Page not found" icon={<EmptyStateIcon icon={ExclamationTriangleIcon} />} headingLevel="h1" />
         <EmptyStateBody>
-          We didn't find a page that matches the address you navigated to.
+          We did not find a page that matches the address you navigated to.
         </EmptyStateBody>
         <EmptyStateFooter>
           <Button onClick={handleClick}>Take me home</Button>

ui/src/app/common/AuthContext.tsx

@@ -1,5 +1,5 @@
 // AuthContext.tsx
-import React, { createContext, useContext, useState, useEffect } from 'react';
+import React, { createContext, useContext, useEffect, useState  } from 'react';
 
 const AuthContext = createContext(null);
 

ui/src/app/components/ChartJobDistribution.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ChartPie, ChartLegend, ChartThemeColor } from '@patternfly/react-charts';
+import { ChartLegend, ChartPie, ChartThemeColor } from '@patternfly/react-charts';
 import { useNavigate } from 'react-router-dom';
 import useFetchJobs from '@app/common/HooksApiServer';
 

ui/src/app/components/ThemeToggle.tsx

@@ -1,8 +1,9 @@
 // ThemeToggle.tsx
 import React from 'react';
 import { useTheme } from '../context/ThemeContext';
-import { Button } from '@patternfly/react-core';
-import { SunIcon, MoonIcon } from '@patternfly/react-icons';
+import { Button } from '@patternfly/react-core/dist/dynamic/components/Button';
+import MoonIcon from '@patternfly/react-icons/dist/dynamic/icons/moon-icon'
+import SunIcon from '@patternfly/react-icons/dist/dynamic/icons/sun-icon'
 
 const ThemeToggle: React.FC = () => {
   const { theme, setTheme } = useTheme();

ui/src/app/context/ThemeContext.tsx

@@ -1,5 +1,5 @@
 // ThemeContext.tsx
-import React, { createContext, useContext, useState, ReactNode } from 'react';
+import React, { ReactNode, createContext, useContext, useState } from 'react';
 
 type Theme = 'light' | 'dark';
 interface ThemeContextType {

ui/src/app/index.tsx

@@ -3,7 +3,7 @@ import { AuthProvider } from '@app/common/AuthContext';
 import { ThemeProvider } from '@app/context/ThemeContext';
 import * as React from 'react';
 import '@patternfly/react-core/dist/styles/base.css';
-import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import { BrowserRouter as Route, Router, Routes } from 'react-router-dom';
 import { AppLayout } from '@app/AppLayout/AppLayout';
 import { AppRoutes } from '@app/routes';
 import Login from '@app/Login/Login';

ui/src/app/routes.tsx

@@ -1,6 +1,6 @@
 // routes.tsx
 import React from 'react';
-import { Routes, Route, Navigate } from 'react-router-dom';
+import { Navigate, Route, Routes } from 'react-router-dom';
 import { useAuth } from '@app/common/AuthContext';
 import { NotFound } from '@app/NotFound/NotFound';
 import { Dashboard } from '@app/Dashboard/Dashboard';
@@ -109,7 +109,7 @@ const routes: Array<IAppRoute | IAppRouteGroup> = [
 export const AppRoutes = (): React.ReactElement => (
   <Routes>
     <Route path="/login" element={<Login />} />
-    {routes.map((route, idx) =>
+    {routes.map((route) =>
       'routes' in route ? (
         route.routes?.map((subRoute) => (
           <Route key={subRoute.path} path={subRoute.path} element={<PrivateRoute element={subRoute.element} />} />