Fix "in progress" and "error" states of UpdateStatus component

ui/src/components/common/UpdateStatus.test.tsx

@@ -0,0 +1,43 @@
+import { render, act } from 'testUtils';
+import UpdateStatus from './UpdateStatus';
+
+it('renders success by default', () => {
+  render(<UpdateStatus />);
+  expect(document.body).toHaveTextContent('Saved');
+});
+
+it('supports "success" status', () => {
+  render(<UpdateStatus status={UpdateStatus.SUCCESS} />);
+  expect(document.body).toHaveTextContent('Saved');
+});
+
+it('supports "in progress" status', () => {
+  render(<UpdateStatus status={UpdateStatus.IN_PROGRESS} />);
+  expect(document.body).toHaveTextContent('Saving');
+});
+
+it('supports "error" status', () => {
+  render(<UpdateStatus status={UpdateStatus.ERROR} />);
+  expect(document.body).toHaveTextContent('Error saving');
+});
+
+it('shows message when browser is offline', async () => {
+  render(<UpdateStatus />);
+  expect(document.body).toHaveTextContent('Saved');
+
+  jest.spyOn(navigator, 'onLine', 'get').mockReturnValue(false);
+
+  await act(async () => {
+    window.dispatchEvent(new Event('offline'));
+  });
+
+  expect(document.body).toHaveTextContent('Offline');
+
+  jest.spyOn(navigator, 'onLine', 'get').mockReturnValue(true);
+
+  await act(async () => {
+    window.dispatchEvent(new Event('online'));
+  });
+
+  expect(document.body).toHaveTextContent('Saved');
+});

ui/src/components/common/UpdateStatus.tsx

@@ -0,0 +1,84 @@
+import { useEffect, useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Intent, Spinner, Tag } from '@blueprintjs/core';
+
+enum Status {
+  SUCCESS = 'SUCCESS',
+  ERROR = 'ERROR',
+  IN_PROGRESS = 'IN_PROGRESS',
+}
+
+type UpdateStatusProps = {
+  status?: Status;
+};
+
+function UpdateStatus({ status }: UpdateStatusProps) {
+  const commonProps = { className: 'UpdateStatus', large: true, minimal: true };
+  const isOnline = useOnlineStatus();
+
+  if (!isOnline) {
+    return (
+      <Tag intent={Intent.DANGER} icon="error" {...commonProps}>
+        <FormattedMessage id="entity.status.offline" defaultMessage="Offline" />
+      </Tag>
+    );
+  }
+
+  if (status === Status.ERROR) {
+    return (
+      <Tag intent={Intent.DANGER} icon="error" {...commonProps}>
+        <FormattedMessage
+          id="entity.status.error"
+          defaultMessage="Error saving"
+        />
+      </Tag>
+    );
+  }
+
+  if (status === Status.IN_PROGRESS) {
+    return (
+      <Tag
+        intent={Intent.PRIMARY}
+        icon={<Spinner size={16} intent={Intent.PRIMARY} />}
+        {...commonProps}
+      >
+        <FormattedMessage
+          id="entity.status.in_progress"
+          defaultMessage="Saving"
+        />
+      </Tag>
+    );
+  }
+
+  // If no status or an unknown status is passed to the component, it will
+  // display "Saved". It would be better to be strict and always require a
+  // valid status. Keeping this behavior to prevent breaking API changes.
+  return (
+    <Tag intent={Intent.SUCCESS} icon="tick" {...commonProps}>
+      <FormattedMessage id="entity.status.success" defaultMessage="Saved" />
+    </Tag>
+  );
+}
+
+UpdateStatus.SUCCESS = Status.SUCCESS;
+UpdateStatus.ERROR = Status.ERROR;
+UpdateStatus.IN_PROGRESS = Status.IN_PROGRESS;
+
+function useOnlineStatus() {
+  const [isOnline, setIsOnline] = useState<boolean>(navigator.onLine);
+  const onChange = () => setIsOnline(navigator.onLine);
+
+  useEffect(() => {
+    window.addEventListener('online', onChange);
+    window.addEventListener('offline', onChange);
+
+    return () => {
+      window.removeEventListener('online', onChange);
+      window.removeEventListener('offline', onChange);
+    };
+  }, []);
+
+  return isOnline;
+}
+
+export default UpdateStatus;