Update error messages in UI

Signed-off-by: Cintia Sanchez Garcia <[email protected]>

web/src/layout/audit/index.tsx

@@ -11,7 +11,7 @@ import {
  SubNavbar,
  useBreakpointDetect,
 } from 'clo-ui';
-import { isEmpty, isUndefined } from 'lodash';
+import { isEmpty, isNull, isUndefined } from 'lodash';
 import moment from 'moment';
 import { Fragment, useContext, useEffect, useState } from 'react';
 import { AiFillCheckCircle, AiFillCloseCircle } from 'react-icons/ai';
@@ -34,6 +34,10 @@ import Searchbar from './Searchbar';
 interface FiltersProp {
  [key: string]: string[];
 }
+interface ErrorContent {
+ withLegend: boolean;
+ text: string;
+}
 
 const Audit = () => {
  const navigate = useNavigate();
@@ -49,7 +53,7 @@ const Audit = () => {
  const [selectedOrg, setSelectedOrg] = useState<string | undefined | null>();
  const [organizations, setOrganizations] = useState<string[] | undefined>();
  const [changes, setChanges] = useState<Change[] | null | undefined>();
- const [apiError, setApiError] = useState<string | null>(null);
+ const [apiError, setApiError] = useState<ErrorContent | null>(null);
  const [alternativeView, setAlternativeView] = useState<boolean>(false);
  const limit = PAGINATION_LIMIT;
  const filtersApplied = !isEmpty(filters);
@@ -177,7 +181,10 @@ const Audit = () => {
  setTotal(parseInt(newSearchResults['Pagination-Total-Count']));
  setChanges(newSearchResults.items);
  } catch {
- setApiError('An error occurred searching changes.');
+ setApiError({
+ text: 'Something went wrong fetching the changes in this CLOWarden instance.',
+ withLegend: true,
+ });
  setChanges([]);
  setTotal(0);
  } finally {
@@ -203,10 +210,19 @@ const Audit = () => {
  setIsLoading(true);
  try {
  const orgs = await API.getOrganizations();
- setSelectedOrg(searchParams.get('organization') || orgs[0]);
- setOrganizations(orgs);
+ if (orgs.length > 0) {
+ setSelectedOrg(searchParams.get('organization') || orgs[0]);
+ setOrganizations(orgs);
+ } else {
+ setApiError({ text: 'There are no organizations registered in this CLOWarden instance.', withLegend: false });
+ setSelectedOrg(null);
+ setOrganizations([]);
+ }
  } catch {
- setApiError('Not organizations found.');
+ setApiError({
+ text: 'Something went wrong fetching the organizations registered in this CLOWarden instance.',
+ withLegend: true,
+ });
  setSelectedOrg(null);
  setOrganizations([]);
  } finally {
@@ -341,10 +357,12 @@ const Audit = () => {
  />
  </aside>
  <div className={`d-flex flex-column flex-grow-1 mt-2 mt-md-3 ${styles.contentWrapper}`}>
- {apiError && (
+ {!isNull(apiError) && (
  <NoData className={styles.extraMargin}>
- <div className="mb-4 mb-lg-5 h2">{apiError}</div>
- <p className="h5 mb-0">Please try again later.</p>
+ <>
+ <div className="h2">{apiError.text}</div>
+ {apiError.withLegend && <p className="mt-4 mt-lg-5 h5 mb-0">Please try again later.</p>}
+ </>
  </NoData>
  )}