[TTAHUB-199] add all regions to activity report dropdown if user has central office

.circleci/config.yml

@@ -164,7 +164,7 @@ parameters:
     default: "main"
     type: string
   sandbox_git_branch:  # change to feature branch to test deployment
-    default: "js-specify-buildpack-version"
+    default: "TTAHUB-199/all-regions-selector-ar-page"
     type: string
   prod_new_relic_app_id:
     default: "877570491"

frontend/package.json

@@ -152,6 +152,8 @@
       "<rootDir>/src/index.js",
       "<rootDir>/src/setupProxy.js",
       "<rootDir>/src/pages/NotFound/index.js",
+      "<rootDir>/src/pages/Widgets/index.js",
+      "<rootDir>/src/widgets/Example.js",
       "<rootDir>/src/polyfills.js"
     ],
     "coverageThreshold": {

frontend/src/pages/Landing/RegionalSelect.js

@@ -20,7 +20,7 @@ const DropdownIndicator = (props) => (
 
 const Placeholder = (props) => <components.Placeholder {...props} />;
 
-export const getUserOptions = (regions) => regions.map((region) => ({ value: region, label: `Region ${region}` }));
+export const getUserOptions = (regions) => regions.map((region) => ({ value: region, label: `Region ${region}` })).sort((a, b) => a.value - b.value);
 
 const styles = {
   container: (provided, state) => {
@@ -42,6 +42,7 @@ const styles = {
     paddingBottom: '4px',
     whiteSpace: 'nowrap',
     color: 'white',
+    minWidth: '140px',
     width: '120px',
   }),
   indicatorSeparator: () => ({ display: 'none' }),
@@ -68,11 +69,10 @@ const styles = {
 
 function RegionalSelect(props) {
   const {
-    regions, onApply,
+    regions, onApply, hasCentralOffice,
   } = props;
 
   const [selectedItem, setSelectedItem] = useState();
-  const [appliedItem, setAppliedItem] = useState();
   const [menuIsOpen, setMenuIsOpen] = useState(false);
 
   // const delayedCloseMenu = () => setTimeout(setMenuIsOpen(false), 1000);
@@ -88,7 +88,6 @@ function RegionalSelect(props) {
           className="float-left margin-2 smart-hub--filter-button"
           onClick={() => {
             onApply(selectedItem);
-            setAppliedItem(selectedItem);
             setMenuIsOpen(false);
           }}
         >
@@ -118,17 +117,33 @@ function RegionalSelect(props) {
     data: PropTypes.shape({
       value: PropTypes.number,
       label: PropTypes.string,
-    }),
-    innerRef: PropTypes.func,
+    }).isRequired,
+    innerRef: PropTypes.func.isRequired,
+    // eslint-disable-next-line react/forbid-prop-types
     innerProps: PropTypes.object.isRequired,
   };
 
-  CustomOption.defaultProps = {
-    data: {},
-    innerRef: () => 0,
+  let options = [...getUserOptions(regions), { custom: true }];
+
+  if (hasCentralOffice) {
+    options = [...getUserOptions(regions), { label: 'All Regions', value: 14 }, { custom: true }];
+  }
+
+  const getValue = () => {
+    if (selectedItem) {
+      return {
+        value: selectedItem.value,
+        label: selectedItem.label,
+      };
+    }
+
+    if (hasCentralOffice) {
+      return { label: 'All Regions', value: 14 };
+    }
+
+    return options[0];
   };
 
-  const options = [...getUserOptions(regions), { custom: true }];
   return (
     <Select
       options={options}
@@ -138,23 +153,26 @@ function RegionalSelect(props) {
       onBlur={() => setMenuIsOpen(false)}
       // onBlur={() => delayedCloseMenu()}
       name="RegionalSelect"
-      defaultValue={options[0]}
-      value={{
-        value: selectedItem ? selectedItem.value : options[0].value,
-        label: appliedItem ? appliedItem.label : options[0].label,
-      }}
+      defaultValue={hasCentralOffice ? { label: 'All Regions', value: 14 } : options[0]}
+      value={getValue()}
       styles={styles}
       components={{ Placeholder, DropdownIndicator, Option: CustomOption }}
       placeholder="Select Region"
       closeMenuOnSelect={false}
       maxMenuHeight={600}
+      className="ttahub-region-select"
     />
   );
 }
 
 RegionalSelect.propTypes = {
   regions: PropTypes.arrayOf(PropTypes.number).isRequired,
   onApply: PropTypes.func.isRequired,
+  hasCentralOffice: PropTypes.bool,
+};
+
+RegionalSelect.defaultProps = {
+  hasCentralOffice: false,
 };
 
 export default RegionalSelect;

frontend/src/pages/Landing/__tests__/RegionalSelect.js

@@ -18,6 +18,7 @@ const renderRegionalSelect = () => {
       <RegionalSelect
         regions={[1, 2]}
         onApply={onApplyRegion}
+        hasCentralOffice
       />
     </Router>,
   );
@@ -27,15 +28,15 @@ const renderRegionalSelect = () => {
 describe('Regional Select', () => {
   test('displays correct region in input', async () => {
     renderRegionalSelect();
-    const input = await screen.findByText(/region 1/i);
+    const input = await screen.findByText(/all regions/i);
     expect(input).toBeVisible();
   });
 
   test('changes input value on apply', async () => {
     renderRegionalSelect();
-    let input = await screen.findByText(/region 1/i);
+    let input = await screen.findByText(/all regions/i);
     expect(input).toBeVisible();
-    await selectEvent.select(screen.getByText(/region 1/i), [/region 2/i]);
+    await selectEvent.select(input, [/region 2/i]);
     const applyButton = await screen.findByText(/apply/i);
     fireEvent.click(applyButton);
     input = await screen.findByText(/region 2/i);