Additional icons for new statuses & Change Password Requirement for IEC Security

packages/react-components/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.8.54",
+  "version": "0.8.63",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

packages/react-components/src/Accounts/Accounts.tsx

@@ -128,28 +128,37 @@ const Accounts: React.FC<UserGroupProps> = ({ host, token, userGroupsDefaultSele
     setRows(changedRows);
   };
 
+  const handleError = (error, action) => {
+    try {
+      if (error instanceof Error) {
+        const errorMessage = error.message;
+        const parsedError = JSON.parse(errorMessage);
+        const firstErrorMessage = parsedError.errors[0]?.description;
+        setErrorMessage(firstErrorMessage);
+      } else {
+        console.log(`${action}: Received non-Error object:`, error);
+      }
+    } catch (e) {
+      console.log(`${action}: Failed to parse error response.`, e);
+    }
+  };
+
   const handleSubmit = (row, isNew = false) => {
+    const onSuccess = () => {
+      setErrorMessage('');
+      fetchData();
+    };
+
+    const onError = (error) => {
+      handleError(error, isNew ? 'Create Account' : 'Update Account');
+    };
+
     if (isNew) {
-      return createAccount(host, token, { ...row }).subscribe(
-        () => {
-          fetchData();
-        },
-        (error) => {
-          console.log('Create Account: ', error);
-        }
-      );
+      return createAccount(host, token, { ...row }).subscribe(onSuccess, onError);
     } else {
-      return updateAccount(host, token, { ...row }).subscribe(
-        () => {
-          fetchData();
-        },
-        (error) => {
-          setErrorMessage('Passwords must be at least 7 characters');
-          console.log('Update Account: ', error);
-        }
-      );
+      return updateAccount(host, token, { ...row }).subscribe(onSuccess, onError);
     }
-  };
+  };  
 
   const handleDelete = (row) => {
     deleteAccount(host, token, row.id).subscribe(

packages/react-components/src/Auth/LoginForm/LoginForm.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import {
   Button,
   Checkbox,

packages/react-components/src/Jobs/JobList/helpers/StatusCell.tsx

@@ -1,17 +1,14 @@
-import {
-  Box,
-  CircularProgress,
-  Tooltip,
-  Typography,
-} from '@material-ui/core';
+import { Box, CircularProgress, Tooltip, Typography } from '@material-ui/core';
 import { blue, green, red, yellow } from '@material-ui/core/colors';
 import {
+  AccessTimeOutlined,
   Cancel,
   CancelScheduleSend,
   CheckCircle,
   Error,
   HelpOutline,
   HourglassEmpty,
+  PlayCircleFilled,
   TimerOffOutlined,
 } from '@material-ui/icons';
 import React, { useMemo } from 'react';
@@ -31,7 +28,12 @@ const StatusCell = ({ row }: { row: any }) => {
         return (
           <Tooltip title={status}>
             <Box position="relative" display="inline-flex">
-              <CircularProgress style={{ color: blue[900] }} variant={'indeterminate'} size={28} thickness={4} />
+              <CircularProgress
+                style={{ color: blue[900] }}
+                variant={'indeterminate'}
+                size={28}
+                thickness={4}
+              />
               <Box
                 top={0}
                 left={0}
@@ -42,7 +44,13 @@ const StatusCell = ({ row }: { row: any }) => {
                 alignItems="center"
                 justifyContent="center"
               >
-                <Typography variant="caption" component="div" style={{ fontSize: 10 }}>{progress ? `${progress}%` : ''}</Typography>
+                <Typography
+                  variant="caption"
+                  component="div"
+                  style={{ fontSize: 10 }}
+                >
+                  {progress ? `${progress}%` : ''}
+                </Typography>
               </Box>
             </Box>
           </Tooltip>
@@ -78,6 +86,24 @@ const StatusCell = ({ row }: { row: any }) => {
             <TimerOffOutlined style={{ color: yellow[900] }} />
           </Tooltip>
         );
+      case 'Starting':
+        return (
+          <Tooltip title={status}>
+            <PlayCircleFilled style={{ color: green[900] }} />
+          </Tooltip>
+        );
+      case 'TimedOut':
+        return (
+          <Tooltip title={status}>
+            <AccessTimeOutlined style={{ color: red[900] }} />
+          </Tooltip>
+        );
+      case 'Rejected':
+        return (
+          <Tooltip title={status}>
+            <Cancel style={{ color: red[900] }} />
+          </Tooltip>
+        );
       default:
         return (
           <Tooltip title={status}>

packages/react-components/src/common/Table/Popup.tsx

@@ -45,6 +45,7 @@ const Popup: React.FC<PopupProps> = ({
   hasPassword,
   userGroupsDefaultSelected,
   errorMessage,
+  passwordRequired,
 }) => {
   const [error, setError] = useState<boolean>(false);
   const [passwordStrengthColor, setPasswordStrengthColor] = useState('red');
@@ -142,8 +143,8 @@ const Popup: React.FC<PopupProps> = ({
                     variant="standard"
                     required={isNew}
                     value={row.password || ''}
-                    error={!passwordValid || errorMessage!==''}
-                    helperText={errorMessage}
+                    error={!passwordValid || passwordRequired}
+                    helperText={passwordRequired ? errorMessage : ''}
                     InputProps={{ endAdornment }}
                     onChange={onChange}
                     autoComplete="new-password"
@@ -158,12 +159,12 @@ const Popup: React.FC<PopupProps> = ({
                     required={isNew}
                     label="Repeat Password"
                     value={row.repeatPassword || ''}
-                    error={!passwordValid || errorMessage!==''}
+                    error={!passwordValid || passwordRequired}
                     onChange={onChange}
                     helperText={
                       (!passwordValid && 'Passwords do not match') ||
-                      errorMessage
-                    }                    
+                      (passwordRequired ? errorMessage : '')
+                    }                  
                     autoComplete="new-password"
                   />
                 </>

packages/react-components/src/common/Table/PopupEditing.tsx

@@ -114,22 +114,33 @@ const PopupEditing = React.memo(
             const rowIds = isNew ? [0] : editingRowIds;
 
             const applyChanges = () => {
-              metadata?.forEach((item, index) => {
-                if (editedRow.metadata === undefined || editedRow.metadata[metadata[index].key] === undefined) {
-                  editedRow.metadata = {
-                    ...editedRow.metadata,
-                    [metadata[index].key]: metadata[index].default,
-                  };
-                }
-              });
-
-              if (isNew) {
-                commitAddedRows({ rowIds });
-                onSave(editedRow, isNew);
-              } else {
-                stopEditRows({ rowIds });
-                commitChangedRows({ rowIds });
-                onSave(editedRow);
+              try {
+                metadata?.forEach((item, index) => {
+                  if (
+                    editedRow.metadata === undefined ||
+                    editedRow.metadata[metadata[index].key] === undefined
+                  ) {
+                    editedRow.metadata = {
+                      ...editedRow.metadata,
+                      [metadata[index].key]: metadata[index].default,
+                    };
+                  }
+                });
+
+                if (isNew) {
+                  commitAddedRows({ rowIds });
+              } 
+
+              if (errorMessage !== '') {
+                  stopEditRows({ rowIds });
+                  commitChangedRows({ rowIds });
+              }
+
+              onSave(editedRow, isNew);
+
+              } catch (error) {
+                console.error('Error applying changes:', error);
+                cancelChanges();
               }
             };
 
@@ -162,6 +173,7 @@ const PopupEditing = React.memo(
                 hasPassword={hasPassword}
                 userGroupsDefaultSelected={userGroupsDefaultSelected}
                 errorMessage={errorMessage}
+                passwordRequired={editedRow?.password?.length < 6}
               />
             );
           }}

packages/react-components/src/common/Table/types.ts

@@ -144,6 +144,7 @@ export interface PopupProps {
    */
   userGroupsDefaultSelected?: string[];
   errorMessage?: string;
+  passwordRequired?: boolean;
 }
 
 export interface MetadataEditorProps {