:Merge branch 'develop' of github.com:podaac/swodlr-ui into develop

.github/workflows/build.yml

@@ -167,17 +167,26 @@ jobs:
         with:
           name: build
           path: build/*
+      - name: Generate GitHub App Token
+        id: generate_token
+        uses: actions/create-github-app-token@v1
+        with:
+          app-id: ${{ secrets.GH_APP_ID }}
+          private-key: ${{ secrets.GH_APP_PRIVATE_KEY }}
       - name: Commit Version Bump
         # If building an alpha, release candidate, or release then we commit the version bump back to the repo
         if: |
           steps.alpha.conclusion == 'success'   ||
           steps.rc.conclusion == 'success'      ||
           steps.release.conclusion == 'success'
         run: |
-          git config user.name "${GITHUB_ACTOR}"
+          git config user.name "PODAAC-CICD"
           git config user.email "${GITHUB_ACTOR}@users.noreply.github.com"
+          echo "machine github.com login x-access-token password ${{ steps.generate_token.outputs.token }}" > ~/.netrc
           git commit -am "/version ${{ env.software_version }}"
           git push
+        env:
+          GH_APP_TOKEN: ${{ steps.generate_token.outputs.token }}
       - name: Push Tag
         if: |
           steps.alpha.conclusion == 'success'   ||

package.json

@@ -1,6 +1,6 @@
 {
   "name": "swodlr-ui",
-  "version": "1.0.0",
+  "version": "1.0.1-1",
   "private": true,
   "engines": {
     "node": ">=18.0.0"

src/components/app/App.css

@@ -229,7 +229,8 @@ CUSTOMIZE PRODUCT CONTAINER
   left: 0;
   z-index: 1000;
   padding-top: 125px;
-  padding-bottom: 58px
+  padding-bottom: 58px;
+  /* overflow-y: auto; */
 }
 
 .sidebar-resize {
@@ -419,7 +420,14 @@ ABOUT PAGE
 
 .about-page {
   max-height: 82vh;
-  /* overflow-y: auto; */
+  background-color: #3d5d82;
+  overflow-y: scroll;
+}
+
+.my-data-page {
+  max-height: 82vh;
+  background-color: #3d5d82;
+  /* overflow-y: scroll; */
 }
 
 .about-card {

src/components/history/GeneratedProductHistory.tsx

@@ -11,7 +11,7 @@ import HistoryFilters from "./HistoryFilters";
 import { Adjust, FilterParameters, OutputGranuleExtentFlagOptions, OutputSamplingGridType, RasterResolution } from "../../types/historyPageTypes";
 import { setShowReGenerateProductModalTrue } from "../sidebar/actions/modalSlice";
 import ReGenerateProductsModal from "./ReGenerateProductsModal";
-import { setAllUserProducts, setGranulesToReGenerate, setUserProducts, setWaitingForMyDataFiltering } from "../sidebar/actions/productSlice";
+import { setAllUserProducts, setGranulesToReGenerate, setUserProducts, setWaitingForMyDataFiltering, setWaitingForProductsToLoad } from "../sidebar/actions/productSlice";
 
 export const productPassesFilterCheck = (currentFilters: FilterParameters, cycle: number, pass: number, scene: number, outputGranuleExtentFlag: boolean, status: string, outputSamplingGridType: string, rasterResolution: number, dateGenerated: string, utmZoneAdjust?: number, mgrsBandAdjust?: number): boolean => {
     let productPassesFilter = true
@@ -58,6 +58,8 @@ const GeneratedProductHistory = () => {
     const colorModeClass = useAppSelector((state) => state.navbar.colorModeClass)
     const userProducts = useAppSelector((state) => state.product.userProducts)
     const currentFilters = useAppSelector((state) => state.product.currentFilters)
+    const waitingForProductsToLoad = useAppSelector((state) => state.product.waitingForProductsToLoad)
+    const waitingForMyDataFiltering = useAppSelector((state) => state.product.waitingForMyDataFiltering)
     const { search } = useLocation()
     const navigate = useNavigate()
     const [totalNumberOfProducts, setTotalNumberOfProducts] = useState<number>(0)
@@ -66,11 +68,12 @@ const GeneratedProductHistory = () => {
     const [allChecked, setAllChecked] = useState<boolean>(false)
 
     useEffect(() => {
-        dispatch(setWaitingForMyDataFiltering(true))
         // get the data for the first page
         // go through all the user product data to get the id of each one so that 
         const fetchData = async () => {
+            if(!waitingForMyDataFiltering) dispatch(setWaitingForProductsToLoad(true))
             await getUserProducts({limit: '1000000'}).then(response => {
+                dispatch(setWaitingForProductsToLoad(false))
                 // filter products for what is in the filter
                 const allProducts = response.products as Product[]
                 setTotalNumberOfProducts(allProducts.length)
@@ -161,16 +164,12 @@ const GeneratedProductHistory = () => {
         const downloadUrlList = checkedProducts.map(product => product.granules.map(granule => granule.uri)).flat()
         return (
             <Row>
-                {<Col xs={2} style={{height: '100%'}}><HistoryFilters /></Col>}
-
-
+                {<Col xs={2} style={{height: '100%'}}><HistoryFilters /></Col>}                
                 <Col xs={10}>
                     <div style={{padding: '0px 20px 20px 20px'}} id='history-table'>
                     <div>
                     {
-                    totalNumberOfProducts === 0 ?
-                    <Row>{productHistoryAlert()}</Row>
-                    :<>
+                    <>
                     <Row>
                         <Col xs={1}>
                         <DropdownButton data-bs-theme='dark' style={{}} id="dropdown-basic-button" title={<><Badge bg="secondary">{checkedProducts.length}</Badge> Actions</>}>
@@ -226,21 +225,23 @@ const GeneratedProductHistory = () => {
                     }
                     </div>
                     {<DataPagination totalNumberOfProducts={totalNumberOfProducts} totalNumberOfFilteredProducts={totalNumberOfFilteredProducts} />}
+                    {!waitingForProductsToLoad && userProducts.length === 0 ? <Row>{productHistoryAlert()}</Row> : null}
+                    {waitingForProductsToLoad ? waitingForProductsToLoadSpinner() : null}
                 </div>
                 </Col>
             </Row>
         )
-    }
+    } 
 
     const productHistoryAlert = () => {
-        const alertMessage = 'No products have been generated. Go to the Product Customization page to generate products.'
-        return <Col style={{margin: '30px'}}><Alert variant='warning' onClick={() => navigate(`/generatedProductHistory${search}`)} style={{cursor: 'pointer'}}>{alertMessage}</Alert></Col>
+        const alertMessage = 'No products generated with these filters. Click here or go to the Product Customization page to generate products.'
+        return <Col style={{margin: '30px'}}><Alert variant='warning' onClick={() => navigate(`/customizeProduct/configureOptions${search}`)} style={{cursor: 'pointer'}}>{alertMessage}</Alert></Col>
     }
 
     const waitingForProductsToLoadSpinner = () => {
         return (
             <div>
-                <h5>Loading Data Table...</h5>
+                <h5>Loading Product Data...</h5>
                 <Spinner animation="border" role="status">
                     <span className="visually-hidden">Loading...</span>
                 </Spinner> 
@@ -258,10 +259,10 @@ const GeneratedProductHistory = () => {
 
     return (
         <>
-        <h4 style={{marginTop: '80px', paddingBottom: '0px', marginBottom: '0px'}}>Generated Products Data</h4>
-        <Col className='about-page' style={{marginRight: '20px', marginLeft: '20px'}}>
-            <Row className='normal-row'>{totalNumberOfProducts === 0 ? waitingForProductsToLoadSpinner() : renderProductHistoryViews()}</Row>
-        </Col>
+            <h4 style={{marginTop: '80px', paddingBottom: '0px', marginBottom: '0px'}}>Generated Products Data</h4>
+            <Col className='my-data-page' style={{marginRight: '20px', marginLeft: '20px'}}>
+                <Row className='normal-row'>{renderProductHistoryViews()}</Row>
+            </Col>
         </>
     );
 }

src/components/history/HistoryFilters.tsx

@@ -1,7 +1,7 @@
 import { Accordion, Button, Col, Form, Row, Spinner } from "react-bootstrap";
 import { ProductState } from "../../types/graphqlTypes";
 import { useAppDispatch, useAppSelector } from "../../redux/hooks";
-import { setCurrentFilter } from "../sidebar/actions/productSlice";
+import { setCurrentFilter, setWaitingForMyDataFiltering } from "../sidebar/actions/productSlice";
 import { defaultFilterParameters, defaultSpatialSearchEndDate, defaultSpatialSearchStartDate, inputBounds, parameterOptionValues, rasterResolutionOptions } from "../../constants/rasterParameterConstants";
 import { useState } from "react";
 import { OutputGranuleExtentFlagOptions, OutputSamplingGridType, RasterResolution, Adjust, FilterParameters, FilterAction } from "../../types/historyPageTypes";
@@ -124,6 +124,11 @@ const HistoryFilters = () => {
         setCurrentFilters(currentFiltersToModify)
     }
 
+    const handleApplyFilters = () => {
+        dispatch(setCurrentFilter(currentFilters))
+        dispatch(setWaitingForMyDataFiltering(true))
+    }
+
     const statusOptions = ['NEW', 'UNAVAILABLE', 'GENERATING', 'ERROR', 'READY', 'AVAILABLE']
     const outputGranuleExtentFlagOptions = ['128 x 128', '256 x 128']
     const outputSamplingGridTypeOptions = parameterOptionValues.outputSamplingGridType.values.map(value => {
@@ -314,7 +319,7 @@ const HistoryFilters = () => {
                     </Accordion.Item>
                 </Accordion>
             </Row>
-                <Button style={{marginTop: '10px', marginBottom: '10px'}} disabled={!cycleIsValid || !passIsValid || !sceneIsValid} onClick={() => dispatch(setCurrentFilter(currentFilters))}>{waitingForMyDataFiltering ? 
+                <Button style={{marginTop: '10px', marginBottom: '10px'}} disabled={!cycleIsValid || !passIsValid || !sceneIsValid} onClick={() => handleApplyFilters()}>{waitingForMyDataFiltering ? 
                             <Spinner size="sm" animation="border" role="status">
                             <span className="visually-hidden">Loading...</span>
                         </Spinner> 

src/components/sidebar/GranuleSelectionAndConfigurationView.tsx

@@ -17,20 +17,16 @@ const GranuleSelectionAndConfigurationView = (props: GranuleSelectionAndConfigur
     const fetchData = async () => {
       const userHasCorrectEdlPermissions = await checkUseHasCorrectEdlPermissions()
       dispatch(setUserHasCorrectEdlPermissions(userHasCorrectEdlPermissions))
+      if (!skipTutorial && userAuthenticated) {
+        dispatch(setShowTutorialModalTrue())
+        dispatch(setSkipTutorialTrue())
+      }
     }
 
     // call the function
     fetchData()
   }, [])
 
-  useEffect(() => {
-    if (!skipTutorial && userAuthenticated) {
-      dispatch(setShowTutorialModalTrue())
-      dispatch(setSkipTutorialTrue())
-    }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [userAuthenticated])
-
   return (
     <>
       <CustomizeProductsSidebar mode={mode}/>

src/components/sidebar/actions/productSlice.ts

@@ -30,6 +30,7 @@ interface GranuleState {
     currentFilters: FilterParameters,
     granulesToReGenerate: Product[],
     waitingForMyDataFiltering: boolean,
+    waitingForProductsToLoad: boolean
 }
 
 const {name, cycle, pass, scene, ...generateProductParametersFiltered } = parameterOptionDefaults
@@ -59,6 +60,7 @@ const initialState: GranuleState = {
     currentFilters: defaultFilterParameters,
     granulesToReGenerate: [],
     waitingForMyDataFiltering: false,
+    waitingForProductsToLoad: false
 }
 
 
@@ -178,6 +180,9 @@ export const productSlice = createSlice({
     },
     setWaitingForMyDataFiltering: (state, action: PayloadAction<boolean>) => {
       state.waitingForMyDataFiltering = action.payload
+    },
+    setWaitingForProductsToLoad: (state, action: PayloadAction<boolean>) => {
+      state.waitingForProductsToLoad = action.payload
     }
   },
 })
@@ -206,7 +211,8 @@ export const {
     setHistoryPageState,
     addPageToHistoryPageState,
     setCurrentFilter,
-    setWaitingForMyDataFiltering
+    setWaitingForMyDataFiltering,
+    setWaitingForProductsToLoad
 } = productSlice.actions
 
 export default productSlice.reducer