Fix issues where users could change view while waiting for a newly ch…

…anged view
Puzzlepart · Jan 24, 2024 · 8bbd3c9 · 8bbd3c9
1 parent a0505cc
commit 8bbd3c9
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 25 deletions.
diff --git a/SharePointFramework/PortfolioWebParts/src/components/List/ListHeader/ListHeader.tsx b/SharePointFramework/PortfolioWebParts/src/components/List/ListHeader/ListHeader.tsx
@@ -25,29 +25,33 @@ export const ListHeader: FC<IListHeaderProps> = (props) => {
           <div className={styles.header}>
             <WebPartTitle title={props.title} />
           </div>
-          {hasError && (
+          {hasError ? (
             <div className={styles.errorContainer}>
               <UserMessage title={strings.ErrorTitle} text={props.error.message} intent='error' />
             </div>
-          )}
-          <div className={styles.commandBar}>
-            <div
-              className={styles.search}
-              hidden={!props.searchBox || props?.searchBox?.hidden || hasError}
-            >
-              <SearchBox
-                className={styles.searchBox}
-                placeholder={strings.SearchBoxPlaceholderFallbackText}
-                aria-label={strings.SearchBoxPlaceholderFallbackText}
-                title={strings.SearchBoxPlaceholderFallbackText}
-                size='large'
-                appearance='filled-lighter'
-                contentAfter={null}
-                {...props.searchBox}
+          ) : (
+            <div className={styles.commandBar}>
+              <div
+                className={styles.search}
+                hidden={!props.searchBox || props?.searchBox?.hidden || hasError}
+              >
+                <SearchBox
+                  className={styles.searchBox}
+                  placeholder={strings.SearchBoxPlaceholderFallbackText}
+                  aria-label={strings.SearchBoxPlaceholderFallbackText}
+                  title={strings.SearchBoxPlaceholderFallbackText}
+                  size='large'
+                  appearance='filled-lighter'
+                  contentAfter={null}
+                  {...props.searchBox}
+                />
+              </div>
+              <Toolbar
+                items={context.props.menuItems}
+                filterPanel={context.props.filterPanelProps}
               />
             </div>
-            <Toolbar items={context.props.menuItems} filterPanel={context.props.filterPanelProps} />
-          </div>
+          )}
           {props.defaultRender && (
             <div className={styles.headerColumns} hidden={hasError}>
               {props.defaultRender(props.headerProps)}

diff --git a/...tFramework/PortfolioWebParts/src/components/PortfolioAggregation/PortfolioAggregation.tsx b/...tFramework/PortfolioWebParts/src/components/PortfolioAggregation/PortfolioAggregation.tsx
@@ -21,14 +21,15 @@ export const PortfolioAggregation: FC<IPortfolioAggregationProps> = (props) => {
     filterPanelProps,
     selection
   } = usePortfolioAggregation(props)
+
   return (
     <div className={styles.root}>
       <PortfolioAggregationContext.Provider value={context}>
         <div className={styles.container}>
           <List
             key={context.state.currentView?.id}
             title={props.title}
-            enableShimmer={context.state.loading}
+            enableShimmer={context.state.loading || context.state.isChangingView}
             items={context.items}
             columns={context.columns}
             groups={context.state.groups}

diff --git a/...ork/PortfolioWebParts/src/components/PortfolioAggregation/ToolbarItems/useToolbarItems.ts b/...ork/PortfolioWebParts/src/components/PortfolioAggregation/ToolbarItems/useToolbarItems.ts
@@ -66,11 +66,13 @@ export function useToolbarItems(context: IPortfolioAggregationContext) {
           new ListMenuItem(null, strings.ExcelExportButtonLabel)
             .setIcon('ExcelLogoInverse')
             .setOnClick(exportToExcel)
+            .setDisabled(context.state.isChangingView)
             .setStyle({ color: '#10793F' }),
         new ListMenuItem(context.state.currentView?.title, strings.PortfolioViewsListName)
           .setIcon(Icons.ContentView)
           .setWidth('fit-content')
           .setStyle({ minWidth: '145px' })
+          .setDisabled(context.state.isChangingView)
           .setItems(
             [
               new ListMenuItem(strings.ListViewText)
@@ -105,9 +107,12 @@ export function useToolbarItems(context: IPortfolioAggregationContext) {
             ],
             checkedValues
           ),
-        new ListMenuItem(null, strings.FilterText).setIcon('Filter').setOnClick(() => {
-          context.dispatch(TOGGLE_FILTER_PANEL())
-        })
+        new ListMenuItem(null, strings.FilterText)
+          .setIcon('Filter')
+          .setOnClick(() => {
+            context.dispatch(TOGGLE_FILTER_PANEL())
+          })
+          .setDisabled(context.state.isChangingView)
       ].filter(Boolean),
     [context.state, context.props]
   )

diff --git a/...WebParts/src/components/PortfolioAggregation/reducer/createPortfolioAggregationReducer.ts b/...WebParts/src/components/PortfolioAggregation/reducer/createPortfolioAggregationReducer.ts
@@ -91,6 +91,8 @@ export const createPortfolioAggregationReducer = (
         : sortArray(allColumnsForCategory, 'sortOrder')
       state.allColumnsForCategory = allColumnsForCategory
       state.loading = false
+      state.error = null
+      state.isChangingView = false
     },
     [TOGGLE_COLUMN_FORM_PANEL.type]: (
       state,
@@ -251,6 +253,7 @@ export const createPortfolioAggregationReducer = (
       state.activeFilters = {}
     },
     [SET_DATA_SOURCE.type]: (state, { payload }: ReturnType<typeof SET_DATA_SOURCE>) => {
+      state.isChangingView = !!payload
       const obj: IPortfolioAggregationHashState = {}
       if (state.currentView) obj.viewId = payload.dataSource.id.toString()
       if (state.groupBy) obj.groupBy = state.groupBy.fieldName
@@ -260,6 +263,7 @@ export const createPortfolioAggregationReducer = (
     },
     [START_FETCH.type]: (state) => {
       state.loading = true
+      state.isChangingView = true
     },
     [EXECUTE_SEARCH.type]: (state, { payload }: ReturnType<typeof EXECUTE_SEARCH>) => {
       state.searchTerm = payload

diff --git a/SharePointFramework/PortfolioWebParts/src/components/PortfolioAggregation/types.ts b/SharePointFramework/PortfolioWebParts/src/components/PortfolioAggregation/types.ts
@@ -179,6 +179,11 @@ export interface IPortfolioAggregationState
    */
   isExporting?: boolean
 
+  /**
+   * Is changing view
+   */
+  isChangingView?: boolean
+
   /**
    * Views available for the data source category.
    */

diff --git a/SharePointFramework/PortfolioWebParts/src/data/index.ts b/SharePointFramework/PortfolioWebParts/src/data/index.ts
@@ -746,7 +746,7 @@ export class DataAdapter implements IPortfolioWebPartsDataAdapter {
 
       return items
     } catch (error) {
-      throw new Error(format(strings.DataSourceError, dataSourceName))
+      throw new Error(`${format(strings.DataSourceError, dataSourceName)}  ${error}`)
     }
   }
 

diff --git a/SharePointFramework/PortfolioWebParts/src/loc/nb-no.js b/SharePointFramework/PortfolioWebParts/src/loc/nb-no.js
@@ -86,7 +86,7 @@ define([], function () {
     DataSourceCategoryDescription: 'Angi en datakildekategori for å kunne velge mellom flere datakilder i webdelen.',
     DataSourceCategoryError: 'Det skjedde en feil under uthenting av datakilder med kategori **{0}**.',
     DataSourceCategoryLabel: 'Kategori for datakilder',
-    DataSourceError: 'Det skjedde en feil under uthenting av data fra datakilde med navn **{0}**.',
+    DataSourceError: 'Det skjedde en feil under uthenting av data fra datakilde med navn **{0}**. Oppdater siden og prøv igjen.',
     DataSourceGroupName: 'Datakilder',
     DataSourceItemNotFound: 'Datakilde ble ikke funnet',
     DataSourceLabel: 'Datakilde',

diff --git a/SharePointFramework/ProgramWebParts/src/loc/nb-no.js b/SharePointFramework/ProgramWebParts/src/loc/nb-no.js
@@ -86,7 +86,7 @@ define([], function () {
     DataSourceCategoryDescription: 'Angi en datakildekategori for å kunne velge mellom flere datakilder i webdelen.',
     DataSourceCategoryError: 'Det skjedde en feil under uthenting av datakilder med kategori **{0}**.',
     DataSourceCategoryLabel: 'Kategori for datakilder',
-    DataSourceError: 'Det skjedde en feil under uthenting av data fra datakilde med navn **{0}**.',
+    DataSourceError: 'Det skjedde en feil under uthenting av data fra datakilde med navn **{0}**. Oppdater siden og prøv igjen.',
     DataSourceGroupName: 'Datakilder',
     DataSourceLabel: 'Datakilde',
     DataSourceLevelDescription: 'Velg nivå for datakilde. Kun datakilder med dette nivået vil være tilgjengelig i webdelen.',