Allow only single layer for footprint

Azure · Feb 2, 2024 · 543ec33 · 543ec33
1 parent a326252
commit 543ec33
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 13 deletions.
diff --git a/src/common/translations/en.js b/src/common/translations/en.js
@@ -79,6 +79,7 @@ const en = {
     '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: 'Exterior',
+    footprint: 'Footprint',
     'facility.levels': 'Facility Levels',
     'building.levels': 'Building Levels',
     'facility.name': 'Facility name',

diff --git a/src/pages/georeference/__snapshots__/georeference.test.js.snap b/src/pages/georeference/__snapshots__/georeference.test.js.snap
@@ -72,6 +72,12 @@ Object {
   height: 1.5rem;
 }
 
+.emotion-6:after {
+  content: ' *';
+  color: #A4262C;
+  white-space: pre;
+}
+
 .emotion-7 {
   max-width: 18.25rem;
   -webkit-box-flex: 1;
@@ -88,6 +94,27 @@ Object {
   overflow: hidden;
 }
 
+.emotion-11 {
+  height: 1.5rem;
+  line-height: 1.5rem;
+  max-width: 15rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 13rem;
+  max-width: none;
+  line-height: 1.5rem;
+  height: 1.5rem;
+}
+
 .emotion-12 {
   width: 18.25rem;
 }
@@ -227,7 +254,7 @@ Object {
               class="emotion-5"
             >
               <div
-                class="emotion-6"
+                class="emotion-11"
               >
                 anchor.point.longitude
               </div>
@@ -262,7 +289,7 @@ Object {
               class="emotion-5"
             >
               <div
-                class="emotion-6"
+                class="emotion-11"
               >
                 anchor.point.latitude
               </div>
@@ -297,7 +324,7 @@ Object {
               class="emotion-5"
             >
               <div
-                class="emotion-6"
+                class="emotion-11"
               >
                 anchor.point.angle
               </div>
@@ -401,6 +428,12 @@ Object {
   height: 1.5rem;
 }
 
+.emotion-6:after {
+  content: ' *';
+  color: #A4262C;
+  white-space: pre;
+}
+
 .emotion-7 {
   max-width: 18.25rem;
   -webkit-box-flex: 1;
@@ -417,6 +450,27 @@ Object {
   overflow: hidden;
 }
 
+.emotion-11 {
+  height: 1.5rem;
+  line-height: 1.5rem;
+  max-width: 15rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 13rem;
+  max-width: none;
+  line-height: 1.5rem;
+  height: 1.5rem;
+}
+
 .emotion-12 {
   width: 18.25rem;
 }
@@ -555,7 +609,7 @@ Object {
             class="emotion-5"
           >
             <div
-              class="emotion-6"
+              class="emotion-11"
             >
               anchor.point.longitude
             </div>
@@ -590,7 +644,7 @@ Object {
             class="emotion-5"
           >
             <div
-              class="emotion-6"
+              class="emotion-11"
             >
               anchor.point.latitude
             </div>
@@ -625,7 +679,7 @@ Object {
             class="emotion-5"
           >
             <div
-              class="emotion-6"
+              class="emotion-11"
             >
               anchor.point.angle
             </div>

diff --git a/src/pages/georeference/georeference.js b/src/pages/georeference/georeference.js
@@ -1,11 +1,14 @@
-import { useMemo, useCallback } from 'react';
 import { TextField } from '@fluentui/react';
+import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { shallow } from 'zustand/shallow';
 
-import FieldLabel from 'components/field-label';
-import Dropdown from 'components/dropdown';
 import { useGeometryStore, useLayersStore } from 'common/store';
+import Dropdown from 'components/dropdown';
+import FieldLabel from 'components/field-label';
+import PageDescription from 'components/page-description/page-description';
+import { useFeatureFlags } from 'hooks';
+import CheckedMap from './checked-map';
 import {
   container,
   dropdownStyles,
@@ -15,9 +18,7 @@ import {
   textFieldStyle,
   textInputStyles,
 } from './georeference.style';
-import CheckedMap from './checked-map';
 import MapError from './map-error';
-import PageDescription from 'components/page-description/page-description';
 
 const geometryStoreSelector = s => [s.dwgLayers, s.setDwgLayers, s.anchorPoint.coordinates, s.anchorPoint.angle];
 const layersSelector = s => s.polygonLayerNames;
@@ -29,6 +30,7 @@ function Georeference() {
     shallow
   );
   const polygonLayers = useLayersStore(layersSelector);
+  const { isPlacesPreview } = useFeatureFlags();
 
   const options = useMemo(() => {
     if (polygonLayers.length === 0) {
@@ -62,13 +64,15 @@ function Georeference() {
       <div className={container}>
         <div className={textFieldColumn}>
           <div className={textFieldRow}>
-            <FieldLabel className={textFieldLabelStyle}>{t('exterior')}</FieldLabel>
+            <FieldLabel className={textFieldLabelStyle} required>
+              {isPlacesPreview ? t('footprint') : t('exterior')}
+            </FieldLabel>
             <Dropdown
               placeholder={t('geography')}
               onOptionSelect={onExteriorLayersSelect}
               className={dropdownStyles}
               options={options}
-              multiselect={polygonLayers.length !== 0}
+              multiselect={polygonLayers.length !== 0 && !isPlacesPreview}
               selectedOptions={dwgLayers}
               showFilter
             >

diff --git a/src/pages/georeference/georeference.test.js b/src/pages/georeference/georeference.test.js
@@ -4,6 +4,9 @@ import { useGeometryStore } from 'common/store';
 import Georeference from './georeference';
 
 jest.mock('./checked-map', () => () => <div>it's map</div>);
+jest.mock('hooks', () => ({
+  useFeatureFlags: () => ({ isPlacesPreview: false }),
+}));
 
 describe('Georeference', () => {
   beforeEach(() => {