fix(web): refresh service/order on ws reconnect

* e.g. if you changed the config and restarted the service

web/ui/react-app/src/components/generic/form-item.tsx

@@ -84,9 +84,11 @@ const FormItem: FC<FormItemProps> = ({
   const { getValues, register, setError, clearErrors } = useFormContext();
   const error = useError(
     name,
-    required || isNumber || isRegex || isURL || registerParams["validate"]
-      ? true
-      : false
+    !!required ||
+      isNumber ||
+      isRegex ||
+      isURL ||
+      registerParams["validate"] !== undefined
   );
 
   const padding = formPadding({ col_xs, col_sm, position, positionXS });

web/ui/react-app/src/contexts/modal.tsx

@@ -11,7 +11,7 @@ interface ModalCtx {
 }
 
 /**
- * The modal context, which provides modals to the application.
+ * Provides modals to the application.
  *
  * @param modalType - The type of modal to display
  * @param service - The service to display in the modal
@@ -27,10 +27,10 @@ interface Props {
 }
 
 /**
- * Returns the modal provider, which provides modals to the application.
+ * Provides modals to the application.
  *
  * @param props - The children to render
- * @returns The modal provider, which provides modals to the application.
+ * @returns A Provider of modals to the application.
  */
 const ModalProvider = (props: Props): ReactElement => {
   const { modal, handleModal } = useModal();

web/ui/react-app/src/contexts/notification.tsx

@@ -19,12 +19,12 @@ interface NotificationCtx {
 }
 
 /**
- * The notification context, which provides notifications to the application.
+ * Provides notifications to the application and functions to add and remove them.
  *
  * @param notifications - The notifications to display
  * @param addNotification - Function to add a notification
  * @param removeNotification - Function to remove a notification
- * @returns The notification context
+ * @returns A context to view, add, and remove notifications
  */
 const NotificationContext = createContext<NotificationCtx>({
   notifications: [],
@@ -33,7 +33,7 @@ const NotificationContext = createContext<NotificationCtx>({
 });
 
 /**
- * @returns The notification provider, which provides notifications to the application.
+ * @returns A provider of notifications to the application.
  */
 const NotificationProvider = () => {
   const [notifications, setNotifications] = useState<NotificationType[]>([]);

web/ui/react-app/src/contexts/websocket.tsx

@@ -35,7 +35,7 @@ interface WebSocketCtx {
 }
 
 /**
- * The WebSocket context, which provides the WebSocket connection and monitor data.
+ * Provides the WebSocket connection and monitor data.
  *
  * @param ws - The WebSocket connection
  * @param connected - Whether the WebSocket connection is established
@@ -57,7 +57,7 @@ interface Props {
 
 const ws = new ReconnectingWebSocket(`${WS_ADDRESS}${getBasename()}/ws`);
 /**
- * @returns The WebSocket provider, which provides the WebSocket connection and monitor data.
+ * @returns The WebSocket connection and monitor data.
  */
 export const WebSocketProvider = (props: Props) => {
   const queryClient = useQueryClient();
@@ -108,6 +108,9 @@ export const WebSocketProvider = (props: Props) => {
   }, [orderData]);
 
   ws.onopen = () => {
+    queryClient.invalidateQueries({
+      queryKey: ["service/order"],
+    });
     setConnected(true);
   };
 

web/ui/react-app/src/reducers/monitor.tsx

@@ -100,7 +100,7 @@ export default function reducerMonitor(
           )
             return state;
 
-          state.service[id].status = state.service[id].status || {};
+          state.service[id].status = state.service[id].status ?? {};
 
           // latest_version
           state.service[id].status!.latest_version =