Feature/swodlr UI 107 - gray out some product customization options (#…

…110) * /version v1.0.0-rc.1 * /version v1.0.0-rc.2 * Pull in recent changes to 1.0.0 * /version v1.0.0-rc.3 * Fix umm-t record * /version v1.0.0-rc.4 * Fix umm-t record * /version v1.0.0-rc.5 * Fix umm-t record * /version v1.0.0-rc.6 * /version v1.0.0-rc.7 * issue/manual-granule-input-hotfix: fixed how ranged of scenes are processed (#86) Co-authored-by: jbyrne <[email protected]> * Issues/swodlr UI 72 essential UI bug fixes (#87) * issues/swodlr-ui-72: fix cps url params bug * issues/swodlr-ui-72 * issues/swodlr-ui-75: fixed a couple bugs * issues/swodlr-ui-72: fixed map movement, adjust options, data page limit, etc * issues/swodlr-ui-72: changed spatial search beginning date in range * issues/swodlr-ui-72-essential-fixes: cleaned up comments --------- Co-authored-by: jbyrne <[email protected]> * /version v1.0.0-rc.8 * feature/demo-uwg-june2024: fix tutorial popup * feature/demo-uwg-june2024: fix my data page loading bug * feature/demo-uwg-june2024: fix my data page no data navigation * feature/swodlr-ui-107: grey out some product customization options * feature/swodlr-ui-107: added info alert about disabled parameter options * feature/swodlr-ui-107: added feature not available tooltip * feature/swodlr-ui-107: change feature not available alert message --------- Co-authored-by: frankinspace <[email protected]> Co-authored-by: Frank Greguska <[email protected]> Co-authored-by: Jonathan M Smolenski <[email protected]> Co-authored-by: jonathansmolenski <[email protected]> Co-authored-by: jbyrne <[email protected]>
podaac · Jun 12, 2024 · 84b6f6f · 84b6f6f
1 parent 93ed708
commit 84b6f6f
Showing 1 changed file with 48 additions and 12 deletions.
diff --git a/src/components/sidebar/ProductCustomization.tsx b/src/components/sidebar/ProductCustomization.tsx
@@ -1,13 +1,15 @@
 import { useEffect } from 'react';
 import { useAppDispatch, useAppSelector } from '../../redux/hooks'
 import Form from 'react-bootstrap/Form';
-import { Col, OverlayTrigger, Row, Tooltip } from 'react-bootstrap';
+import { Alert, Col, OverlayTrigger, Row, Tooltip } from 'react-bootstrap';
 import { parameterHelp, parameterOptionValues } from '../../constants/rasterParameterConstants'
 import { InfoCircle } from 'react-bootstrap-icons';
 import { setGenerateProductParameters, setShowUTMAdvancedOptions } from "./actions/productSlice";
 import { useSearchParams } from 'react-router-dom';
 import { GenerateProductParameters } from '../../types/constantTypes';
 
+// TODO: revert back after ONLY RESOLUTION SELECTION period is over. Search todos related to disabled and featureNotAvailable
+
 const ProductCustomization = () => {
     const colorModeClass = useAppSelector((state) => state.navbar.colorModeClass)
     const generateProductParameters = useAppSelector((state) => state.product.generateProductParameters)
@@ -149,20 +151,40 @@ const ProductCustomization = () => {
         </OverlayTrigger>
     )
 
+    const renderFeatureNotAvailable = (jsxContents: JSX.Element, featureDisabled: boolean) => {
+        return featureDisabled ?
+            <OverlayTrigger
+                placement="right"
+                overlay={
+                    <Tooltip id="feature-not-available-tooltip">Option not currently available.</Tooltip>
+                }
+            >
+                {<span>{jsxContents}</span>}
+            </OverlayTrigger>
+            : jsxContents
+    }
+
     const renderOutputSamplingGridTypeInputs = (outputSamplingGridType: string) => {
         const inputArray = parameterOptionValues.outputSamplingGridType.values.map((value, index) => {
+            // TODO: Remove featureNotAvailable after ONLY RESOLUTION SELECTION period is over
+            const featureNotAvailable = value === 'lat/lon'
             const resolutionToUse: number = value === 'utm' ? rasterResolutionUTM : rasterResolutionGEO
             return (
-                <Form.Check 
-                    checked={value === generateProductParameters.outputSamplingGridType}
-                    inline 
-                    label={String(value).toUpperCase()} 
-                    name="outputSamplingGridTypeGroup" 
-                    type={'radio'} 
-                    id={`outputSamplingGridTypeGroup-radio-${index}`} 
-                    onChange={() => setOutputSamplingGridType(value as string, resolutionToUse)}
-                    key={`outputSamplingGridTypeGroup-radio-key-${index}`}
-                />
+                renderFeatureNotAvailable(               
+                    <Form.Check 
+                        checked={value === generateProductParameters.outputSamplingGridType}
+                        // TODO: Remove disabled after ONLY RESOLUTION SELECTION period is over
+                        disabled={featureNotAvailable}
+                        inline 
+                        label={String(value).toUpperCase()} 
+                        name="outputSamplingGridTypeGroup" 
+                        type={'radio'} 
+                        id={`outputSamplingGridTypeGroup-radio-${index}`} 
+                        onChange={() => setOutputSamplingGridType(value as string, resolutionToUse)}
+                        key={`outputSamplingGridTypeGroup-radio-key-${index}`}
+                    />,
+                    featureNotAvailable
+                )
             )}
         )
         inputArray.push(
@@ -198,17 +220,24 @@ const ProductCustomization = () => {
                     </Col>
                 <Col md={{ span: 5, offset: 1 }}>
                     {parameterOptionValues.outputGranuleExtentFlag.values.map((value, index) => {
+                        // TODO: Remove featureNotAvailable after ONLY RESOLUTION SELECTION period is over
+                        const featureNotAvailable: boolean = Boolean(value)
                         return (
+                            renderFeatureNotAvailable(
                             <Form.Check 
                                 checked={value === generateProductParameters.outputGranuleExtentFlag}
                                 inline 
+                                // TODO: Remove disabled after ONLY RESOLUTION SELECTION period is over
+                                disabled={featureNotAvailable}
                                 label={value ? '256 x 128 km' : '128 x 128 km'} 
                                 name="outputGranuleExtentFlagTypeGroup" 
                                 type={'radio'} 
                                 id={`outputGranuleExtentFlagTypeGroup-radio-${index}`} 
                                 onChange={() => setOutputGranuleExtentFlag(value)}
                                 key={`outputGranuleExtentFlagTypeGroup-radio-key-${index}`}
-                            />
+                            />,
+                            featureNotAvailable
+                            )
                         )
                     })}
                 </Col>
@@ -236,6 +265,13 @@ const ProductCustomization = () => {
                 </Col>
                 <Col md={{ span: 2, offset: 0 }} style={{paddingLeft: '0px'}}>{renderRasterResolutionUnits(outputSamplingGridType)}</Col>
             </Row>
+            <Row>
+                <Col>
+                    <Alert key='alert-features-not-available' variant='warning'>
+                        Some options are not enabled in the current version of SWODLR and will be enabled at a later date
+                    </Alert>
+                </Col>
+            </Row>
         </div>
     </div>      
   );