Users/v pnizetic/bug fixes (#134)

* Fix vertical extent error

* Fix preview map min height

* Fix preview map positioning and fonts

* Implement full manifest store reset

* Reset all stores on file upload screen

* Convert subkey field to uncontrolled

* Prevent file automatic reupload

src/common/store/index.js

@@ -7,8 +7,8 @@ export {
   useCompletedSteps,
   useProgressBarSteps,
   useProgressBarStore,
-} from './progress-bar-steps';
-export { resetStores } from './reset';
+} from './progress-bar-steps.store';
+export { resetAllStores } from './reset';
 export { LRO_STATUS, useResponseStore } from './response.store';
 export { useReviewManifestJson, useReviewManifestStore } from './review-manifest.store';
 export { getDomain, useUserStore } from './user.store';

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

@@ -2,7 +2,7 @@ import { renderHook } from '@testing-library/react';
 import { useGeometryStore } from './geometry.store';
 import { useLayersStore } from './layers.store';
 import { useLevelsStore } from './levels.store';
-import { useCompletedSteps } from './progress-bar-steps';
+import { useCompletedSteps } from './progress-bar-steps.store';
 import { useReviewManifestStore } from './review-manifest.store';
 
 jest.mock('hooks', () => ({

src/common/store/reset.js

@@ -1,13 +1,17 @@
-import { useProgressBarStore } from './progress-bar-steps';
-import { useLayersStore } from './layers.store';
+import { useConversionStore } from './conversion.store';
 import { useGeometryStore } from './geometry.store';
+import { useLayersStore } from './layers.store';
 import { useLevelsStore } from './levels.store';
+import { useProgressBarStore } from './progress-bar-steps.store';
+import { useResponseStore } from './response.store';
 import { useReviewManifestStore } from './review-manifest.store';
 
-export function resetStores() {
+export function resetAllStores() {
   useProgressBarStore.getState().reset();
   useLayersStore.getState().reset();
   useGeometryStore.getState().reset();
   useLevelsStore.getState().reset();
-  useReviewManifestStore.getState().setManifestReviewed(false);
+  useReviewManifestStore.getState().reset();
+  useResponseStore.getState().reset();
+  useConversionStore.getState().reset();
 }

src/common/store/response.store.js

@@ -8,8 +8,7 @@ import { createWithEqualityFn } from 'zustand/traditional';
 import { useGeometryStore } from './geometry.store';
 import { useLayersStore } from './layers.store';
 import { useLevelsStore } from './levels.store';
-import { useProgressBarStore } from './progress-bar-steps';
-import { resetStores } from './reset';
+import { useProgressBarStore } from './progress-bar-steps.store';
 import { useReviewManifestStore } from './review-manifest.store';
 
 const OPERATION_LOCATION = 'Operation-Location';
@@ -26,12 +25,19 @@ export const LRO_STATUS = {
   FAILED: 'Failed',
 };
 
+const getDefaultState = () => ({
+  operationLocation: '',
+  lroStatus: '',
+  errorMessage: '',
+  refreshRunning: false,
+});
+
 export const useResponseStore = createWithEqualityFn(
   (set, get) => ({
-    operationLocation: '',
-    lroStatus: '',
-    errorMessage: '',
-    refreshRunning: false,
+    ...getDefaultState(),
+    reset: () => {
+      set({ ...getDefaultState() });
+    },
     acknowledgeError: () => {
       set({
         errorMessage: '',
@@ -145,8 +151,6 @@ export const useResponseStore = createWithEqualityFn(
     fetchManifestData: async fetchUrl => {
       return fetchWithRetries(fetchUrl)
         .then(async data => {
-          resetStores();
-
           // Compute and store useful response data
           const layerNames = new Set();
           const polygonLayerNames = new Set();
@@ -289,7 +293,7 @@ export const isValidManifestVersion = version => {
 
   if (version === PLACES_PREVIEW.VERSION) return true;
   if (!isPlacesPreview) return manifestVersion >= 2;
-  
+
   return false;
 };
 

src/common/store/review-manifest.store.js

@@ -7,10 +7,18 @@ import { useGeometryStore } from './geometry.store';
 import { useLayersStore } from './layers.store';
 import { useLevelsStore } from './levels.store';
 
+const getDefaultState = () => ({
+  manifestReviewed: false,
+  originalPackage: null,
+});
+
 export const useReviewManifestStore = createWithEqualityFn(
   (set, get) => ({
-    manifestReviewed: false,
-    originalPackage: null,
+    ...getDefaultState(),
+    reset: () =>
+      set({
+        ...getDefaultState(),
+      }),
     getOriginalManifestJson: async () => {
       const { originalPackage } = get();
 
@@ -152,14 +160,11 @@ export const usePlacesReviewManifestJson = () => {
       dwgLayers,
       levels: levels.map(level => {
         const formattedLevel = {
-          ...level,
+          filename: level.filename,
+          levelName: level.levelName,
           ordinal: Number(level.ordinal),
         };
-        if (isNumeric(formattedLevel.verticalExtent)) {
-          formattedLevel.verticalExtent = Number(formattedLevel.verticalExtent);
-        } else {
-          delete formattedLevel.verticalExtent;
-        }
+
         return formattedLevel;
       }),
     },

src/components/file-field/file-field.js

@@ -38,7 +38,6 @@ const FileField = props => {
     onError,
     tooltip,
     required = true,
-    file,
     allowClear,
     showError = true,
     errorMessage,
@@ -50,23 +49,26 @@ const FileField = props => {
   const [filename, setFilename] = useState('');
 
   const onTextFieldClick = useCallback(() => {
-    document.getElementById(id).click();
-  }, [id]);
-  const onTextFieldKeyPress = useCallback(
-    e => {
-      if (e.key === 'Enter') {
-        document.getElementById(id).click();
-      }
-    },
-    [id]
-  );
+    fileInputRef.current.click();
+  }, []);
+
+  const onTextFieldKeyPress = useCallback(e => {
+    if (e.key === 'Enter') {
+      fileInputRef.current.click();
+    }
+  }, []);
 
   const clearFile = useCallback(() => {
     setFilename('');
     if (fileInputRef.current) fileInputRef.current.value = '';
     onFileSelect(null);
   }, [onFileSelect]);
 
+  useEffect(() => {
+    clearFile();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const pickFile = useCallback(
     e => {
       const { files } = e.target;
@@ -83,6 +85,7 @@ const FileField = props => {
         onError(t(errors.fileSizeExceeded));
         return;
       }
+
       if (!fileTypes[fileType].includes(type)) {
         clearFile();
         onError(t(errors.fileTypeIncorrect, { type: fileType.toUpperCase() }));
@@ -95,13 +98,6 @@ const FileField = props => {
     [fileType, onError, onFileSelect, setFilename, clearFile, t]
   );
 
-  useEffect(() => {
-    if (file?.name) {
-      pickFile({ target: { files: [file] } });
-    }
-    // eslint-disable-next-line
-  }, []);
-
   const message = useMemo(() => {
     if (typeof errorMessage === 'string') return errorMessage;
     if (typeof errorMessage === 'function') return errorMessage();

src/components/footer/footer.js

@@ -2,7 +2,7 @@ import { DefaultButton, PrimaryButton } from '@fluentui/react';
 import { PATHS } from 'common';
 import featureFlags from 'common/feature-flags';
 import { useConversionStore, useProgressBarSteps, useReviewManifestJson, useReviewManifestStore } from 'common/store';
-import { useValidationStatus } from 'common/store/progress-bar-steps';
+import { useValidationStatus } from 'common/store/progress-bar-steps.store';
 import { usePlacesReviewManifestJson } from 'common/store/review-manifest.store';
 import dayjs from 'dayjs';
 import { saveAs } from 'file-saver';

src/pages/create-manifest/create-manifest.js

@@ -2,7 +2,7 @@ import { cx } from '@emotion/css';
 import { MessageBar, MessageBarType, PrimaryButton, TextField } from '@fluentui/react';
 import { PATHS } from 'common';
 import { getEnvs } from 'common/functions';
-import { resetStores, useConversionStore, useResponseStore, useUserStore } from 'common/store';
+import { resetAllStores, useResponseStore, useUserStore } from 'common/store';
 import Dropdown from 'components/dropdown';
 import FieldLabel from 'components/field-label';
 import FileField from 'components/file-field/file-field';
@@ -34,8 +34,7 @@ export const TEST_ID = {
 };
 
 const userStoreSelector = s => [s.setGeography, s.geography, s.setSubscriptionKey, s.subscriptionKey];
-const responseStoreSelector = s => [s.acknowledgeError, s.errorMessage, s.uploadFile];
-const conversionStoreSelector = s => s.reset;
+const responseStoreSelector = s => [s.errorMessage, s.uploadFile];
 
 const CreateManifestPage = () => {
   const { t } = useTranslation();
@@ -45,8 +44,7 @@ const CreateManifestPage = () => {
   const [file, setFile] = useState(null);
 
   const [setGeo, geo, setSubKey, subKey] = useUserStore(userStoreSelector);
-  const [acknowledgeApiError, apiErrorMessage, uploadFile] = useResponseStore(responseStoreSelector);
-  const resetConversionStore = useConversionStore(conversionStoreSelector);
+  const [apiErrorMessage, uploadFile] = useResponseStore(responseStoreSelector);
   const { isPlacesPreview } = useFeatureFlags();
 
   const environmentOptions = useMemo(
@@ -59,9 +57,7 @@ const CreateManifestPage = () => {
   );
 
   useEffect(() => {
-    resetStores();
-    resetConversionStore();
-    acknowledgeApiError();
+    resetAllStores();
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
@@ -129,11 +125,10 @@ const CreateManifestPage = () => {
           <TextField
             className={textFieldStyle}
             ariaLabel={t('subscription.key')}
-            value={subKey}
-            type={'password'}
+            type="password"
             data-testid={TEST_ID.SUBSCRIPTION_KEY_FIELD}
             aria-required
-            canRevealPassword={true}
+            canRevealPassword
             onChange={updateSubKey}
             styles={inputStyles}
           />

src/pages/georeference/georeference.js

@@ -1,6 +1,6 @@
 import { TextField } from '@fluentui/react';
 import { useGeometryStore, useLayersStore } from 'common/store';
-import { useValidationStatus } from 'common/store/progress-bar-steps';
+import { useValidationStatus } from 'common/store/progress-bar-steps.store';
 import { ColumnLayout, ColumnLayoutItem } from 'components/column-layout';
 import Dropdown from 'components/dropdown';
 import FieldLabel from 'components/field-label';

src/pages/layers/categoryLayer.js

@@ -1,5 +1,5 @@
 import { useLayersStore } from 'common/store';
-import { useValidationStatus } from 'common/store/progress-bar-steps';
+import { useValidationStatus } from 'common/store/progress-bar-steps.store';
 import { FieldLabel } from 'components';
 import Dropdown from 'components/dropdown';
 import PropTypes from 'prop-types';

src/pages/layers/layer.js

@@ -1,6 +1,6 @@
 import { TextField } from '@fluentui/react';
 import { useLayersStore } from 'common/store';
-import { useValidationStatus } from 'common/store/progress-bar-steps';
+import { useValidationStatus } from 'common/store/progress-bar-steps.store';
 import { FieldLabel } from 'components';
 import Dropdown from 'components/dropdown';
 import FieldError from 'components/field-error';

src/pages/layers/preview-map/index.js

@@ -133,8 +133,8 @@ const PreviewMap = props => {
       const distanceX = x - midPoints.midX;
       // starting point of canvas is left top corner, therefore Y coordinate needs to be negated. Same for offset.
       const distanceY = midPoints.midY - y;
-      const newX = width / 2 + distanceX * midPoints.multiplier + midPoints.offsetX;
-      const newY = height / 2 + distanceY * midPoints.multiplier - midPoints.offsetY;
+      const newX = width / 2 + distanceX * midPoints.multiplier;
+      const newY = height / 2 + distanceY * midPoints.multiplier;
 
       const paddedX = canvasPadding + (newX * (width - 2 * canvasPadding)) / width;
       const paddedY = canvasPadding + (newY * (height - 2 * canvasPadding)) / height;
@@ -194,6 +194,7 @@ const PreviewMap = props => {
     ctx.setTransform(1, 0, 0, 1, 0, 0);
 
     ctx.strokeStyle = '#333';
+    ctx.lineWidth = midPoints.multiplier * 0.1;
     ctx.save();
 
     ctx.translate(transformations.x, transformations.y);
@@ -226,7 +227,7 @@ const PreviewMap = props => {
     mergedTextLayer.forEach(layer => {
       const [x, y] = toRelativePoint(layer.displayPoint);
 
-      ctx.font = '1.6px Arial';
+      ctx.font = `${midPoints.multiplier * 0.2}px Arial`;
       ctx.fillStyle = '#0068b7';
       ctx.textAlign = 'center';
       ctx.textBaseline = 'middle';
@@ -237,7 +238,7 @@ const PreviewMap = props => {
         value = categoryMap[layer.value.toLowerCase().trim()] || PLACES_PREVIEW.DEFAULT_IMDF_CATEGORY;
 
         ctx.fillStyle = '#F5AC72';
-        ctx.font = 'italic 1.6px Arial';
+        ctx.font = `italic ${midPoints.multiplier * 0.2}px Arial`;
       }
 
       ctx.fillText(value, x, y);

src/pages/layers/preview-map/utils.js

@@ -55,17 +55,15 @@ export function getMidPointsFromLayers(dwgLayers, width, height) {
 
   const diffX = maxX - minX;
   const diffY = maxY - minY;
-  const diff = diffX > diffY ? diffX : diffY;
-  const multiplier = Math.min(width, height) / diff;
-  const offsetY = diffX > diffY ? (width - multiplier * diffY) / 3 : 0;
-  const offsetX = diffX < diffY ? 0 : (height - multiplier * diffX) / 3;
+  const multiplier = Math.min(width / diffX, height / diffY);
+
+  const midX = (minX + maxX) / 2;
+  const midY = (minY + maxY) / 2;
 
   return {
     multiplier,
-    midX: (minX + maxX) / 2,
-    midY: (minY + maxY) / 2,
-    offsetY,
-    offsetX,
+    midX,
+    midY,
   };
 }
 

src/pages/layers/units/index.js

@@ -26,7 +26,12 @@ export const Units = () => {
   ]);
 
   const texts = useMemo(() => {
-    return textLayers.filter(t => t.name === categoryLayer).flatMap(t => t?.textList?.map(t => t.value.toLowerCase().trim())).filter(t => t !== undefined) || [];
+    return (
+      textLayers
+        .filter(t => t.name === categoryLayer)
+        .flatMap(t => t?.textList?.map(t => t.value.toLowerCase().trim()))
+        .filter(t => t !== undefined) || []
+    );
   }, [categoryLayer, textLayers]);
 
   useEffect(() => {
@@ -84,7 +89,7 @@ export const Units = () => {
         </FillScreenContainer>
       </ColumnLayoutItem>
       <FillScreenContainer style={{ overflowY: 'unset' }} offsetBottom={150} offsetRight={20}>
-        {({ height, width }) => <PreviewMap height={height} width={width} />}
+        {({ height, width }) => <PreviewMap height={Math.max(height, 512)} width={width} />}
       </FillScreenContainer>
     </ColumnLayout>
   );

src/pages/review/index.js

@@ -1,4 +1,4 @@
-import { useProgressBarStore, useValidationStatus } from 'common/store/progress-bar-steps';
+import { useProgressBarStore, useValidationStatus } from 'common/store/progress-bar-steps.store';
 import { useFeatureFlags } from 'hooks';
 import SummaryTab from 'pages/summary';
 import { useEffect } from 'react';

src/pages/review/index.test.js

@@ -7,8 +7,8 @@ jest.mock('hooks', () => ({
   useFeatureFlags: () => ({ isPlacesPreview: false }),
 }));
 
-jest.mock('common/store/progress-bar-steps', () => ({
-  ...jest.requireActual('common/store/progress-bar-steps'),
+jest.mock('common/store/progress-bar-steps.store', () => ({
+  ...jest.requireActual('common/store/progress-bar-steps.store'),
   useCompletedSteps: () => mockCompletedSteps,
 }));
 

src/pages/summary/index.js

@@ -2,7 +2,7 @@ import { cx } from '@emotion/css';
 import { MessageBar, MessageBarType } from '@fluentui/react';
 import { languages } from 'common/languages';
 import { useGeometryStore, useLayersStore, useLevelsStore, useReviewManifestStore } from 'common/store';
-import { useValidationStatus } from 'common/store/progress-bar-steps';
+import { useValidationStatus } from 'common/store/progress-bar-steps.store';
 import { color } from 'common/styles';
 import { ColumnLayout, ColumnLayoutItem } from 'components/column-layout';
 import CheckedMap from 'pages/georeference/checked-map';