Add missing validation messages

src/common/store/progress-bar-steps.js

@@ -178,3 +178,12 @@ export const useCompletedSteps = () => {
 
   return completedSteps;
 };
+
+const progressBarSelector = s => s.isMissingDataErrorShown;
+export const useValidationStatus = () => {
+  const isProgressBarErrorShown = useProgressBarStore(progressBarSelector);
+
+  return {
+    failed: isProgressBarErrorShown,
+  };
+};

src/common/translations/en.js

@@ -47,6 +47,7 @@ const en = {
     'error.file.size.exceeded': 'The file is too big.',
     'error.file.type.incorrect': 'Please upload a {{type}} file.',
     'error.invalid.facility.name': 'Facility name cannot exceed 100 characters.',
+    'error.invalid.building.name': 'Building name cannot exceed 100 characters.',
     'error.invalid.level.name': 'Level name cannot exceed 100 characters.',
     'error.invalid.feature.class.name': 'Feature class name contains restricted characters.',
     'error.invalid.property.name': 'Property name contains restricted characters.',
@@ -77,7 +78,8 @@ const en = {
     'error.upload.file.processing': 'Processing your package has failed. Please try again.',
     'error.validation.failed.missing.info': 'Validation failed. Required information is missing or not valid.',
     'error.vertical.extent.not.valid': 'Vertical extent must be a valid number greater than 0 and less than 100.',
-    'exterior.layer.not.selected.error': "Please select 'exterior' layer(s) to georeference your Facility",
+    'exterior.layer.not.selected.error': "Please select 'Exterior' layer(s) to georeference your Facility",
+    'footprint.layer.not.selected.error': "Please select 'Footprint' layer to georeference your Building",
     exterior: 'Exterior',
     footprint: 'Footprint',
     'facility.levels': 'Facility Levels',

src/components/dropdown/index.js

@@ -1,10 +1,12 @@
+import { cx } from '@emotion/css';
 import { Dropdown, Option, OptionGroup } from '@fluentui/react-components';
 import FieldError from 'components/field-error';
 import { useMemo, useRef, useState } from 'react';
 import {
   dropdownButton,
   dropdownOption,
   dropdownStyleObj,
+  dropdownWithError,
   errorContainer,
   filterInputStyle,
   hackInputStyle,
@@ -73,6 +75,7 @@ const DropdownComponent = props => {
     <div className={className}>
       <Dropdown
         size="small"
+        className={cx({ [dropdownWithError]: showError && message })}
         style={dropdownStyleObj}
         button={<div className={dropdownButton}>{children}</div>}
         onOpenChange={onOpenChangeCallback}

src/components/dropdown/style.js

@@ -59,3 +59,7 @@ export const errorContainer = css`
   align-items: center;
   color: ${color.redError};
 `;
+
+export const dropdownWithError = css`
+  border-color: ${color.redError} !important;
+`;

src/components/field-error/__snapshots__/field-error.test.js.snap

@@ -10,6 +10,8 @@ exports[`Field Error should render component when text is provided 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  font-size: 0.813rem;
+  color: #A80000;
 }
 
 .emotion-1 {

src/components/field-error/field-error.style.js

@@ -1,10 +1,11 @@
 import { css } from '@emotion/css';
-
-import { fontSize } from 'common/styles';
+import { color, fontSize } from 'common/styles';
 
 export const errorContainer = css`
   display: flex;
   align-items: center;
+  font-size: ${fontSize.sm};
+  color: ${color.redError};
 `;
 
 export const fieldErrorIconStyle = css`

src/pages/create-manifest/__snapshots__/file-field.test.js.snap → src/components/file-field/__snapshots__/file-field.test.js.snap

@@ -126,13 +126,15 @@ Object {
       <div
         class="emotion-0"
       >
-        <div
-          class="emotion-1"
-        >
+        <div>
           <div
-            class="emotion-2"
+            class="emotion-1"
           >
-            foobar
+            <div
+              class="emotion-2"
+            >
+              foobar
+            </div>
           </div>
         </div>
         <div
@@ -303,13 +305,15 @@ Object {
     <div
       class="emotion-0"
     >
-      <div
-        class="emotion-1"
-      >
+      <div>
         <div
-          class="emotion-2"
+          class="emotion-1"
         >
-          foobar
+          <div
+            class="emotion-2"
+          >
+            foobar
+          </div>
         </div>
       </div>
       <div

src/pages/create-manifest/file-field.js → src/components/file-field/file-field.js

@@ -1,11 +1,12 @@
 import { cx } from '@emotion/css';
 import { TextField } from '@fluentui/react';
+import FieldError from 'components/field-error';
 import FieldLabel from 'components/field-label';
 import DeleteIcon from 'pages/layers/delete-icon';
 import PropTypes from 'prop-types';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { TEST_ID } from './create-manifest';
+import { TEST_ID } from '../../pages/create-manifest/create-manifest';
 import {
   browseButtonContentStyle,
   browseButtonStyle,
@@ -14,7 +15,7 @@ import {
   formRowStyle,
   inputStyles,
   textFieldStyle,
-} from './create-manifest.style';
+} from '../../pages/create-manifest/create-manifest.style';
 
 const errors = {
   fileSizeExceeded: 'error.file.size.exceeded',
@@ -39,6 +40,8 @@ const FileField = props => {
     required = true,
     file,
     allowClear,
+    showError = true,
+    errorMessage,
   } = props;
 
   const { t } = useTranslation();
@@ -93,16 +96,23 @@ const FileField = props => {
     // eslint-disable-next-line
   }, []);
 
+  const message = useMemo(() => {
+    if (typeof errorMessage === 'string') return errorMessage;
+    if (typeof errorMessage === 'function') return errorMessage();
+  }, [errorMessage]);
+
   const handleRemoveFile = () => {
     setFilename('');
     onFileSelect(null);
   };
 
   return (
     <div className={formRowStyle}>
-      <FieldLabel required={required} tooltip={tooltip}>
-        {label}
-      </FieldLabel>
+      <div>
+        <FieldLabel required={required} tooltip={tooltip}>
+          {label}
+        </FieldLabel>
+      </div>
       <div className={cx(fieldStyle, fieldClassName)}>
         <TextField
           value={filename}
@@ -114,6 +124,7 @@ const FileField = props => {
           styles={inputStyles}
           onClick={onTextFieldClick}
           onKeyPress={onTextFieldKeyPress}
+          errorMessage={showError && message && <FieldError text={message} />}
         />
         {allowClear && filename && <DeleteIcon onDelete={handleRemoveFile} />}
         <label htmlFor={id} className={browseButtonStyle}>

src/pages/create-manifest/file-field.test.js → src/components/file-field/file-field.test.js

@@ -1,6 +1,6 @@
-import { render, screen, fireEvent } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 
-import FileField from './file-field';
+import FileField from '../../components/file-field/file-field';
 
 const defaultProps = {
   id: 'wootwoot',