Add message in FilterPanel if it is empty #1444

Puzzlepart · Jan 25, 2024 · 224e8bf · 224e8bf
1 parent d275927
commit 224e8bf
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 0 deletions.
diff --git a/SharePointFramework/shared-library/src/components/FilterPanel/FilterPanel.tsx b/SharePointFramework/shared-library/src/components/FilterPanel/FilterPanel.tsx
@@ -5,6 +5,8 @@ import { IFilterPanelProps } from './types'
 import styles from './FilterPanel.module.scss'
 import { useId, IdPrefixProvider, FluentProvider } from '@fluentui/react-components'
 import { customLightTheme } from '../../util'
+import { UserMessage } from '../UserMessage'
+import strings from 'SharedLibraryStrings'
 
 export const FilterPanel: FC<IFilterPanelProps> = (props) => {
   const fluentProviderId = useId('fp-filter-panel')
@@ -14,6 +16,13 @@ export const FilterPanel: FC<IFilterPanelProps> = (props) => {
       <IdPrefixProvider value={fluentProviderId}>
         <FluentProvider theme={customLightTheme}>
           <div className={styles.filterPanel}>
+            {props.filters.length === 0 && (
+              <UserMessage
+                title={strings.FilterPanelEmptyTitle}
+                text={strings.FilterPanelEmptyMessage}
+                intent='info'
+              />
+            )}
             {props.filters
               .filter((f) => f.items.length > 1)
               .map((f, idx) => (

diff --git a/SharePointFramework/shared-library/src/loc/mystrings.d.ts b/SharePointFramework/shared-library/src/loc/mystrings.d.ts
@@ -35,6 +35,8 @@ declare interface ISharedLibraryStrings {
   ErrorTitle: string
   FiltersString: string
   FilterText: string
+  FilterPanelEmptyTitle: string
+  FilterPanelEmptyMessage: string
   GroupByLabel: string
   LastPublishedStatusreport: string
   LoadingText: string

diff --git a/SharePointFramework/shared-library/src/loc/nb-no.js b/SharePointFramework/shared-library/src/loc/nb-no.js
@@ -35,6 +35,8 @@ define([], function () {
     ErrorTitle: 'Det har oppstått en feil',
     FiltersString: 'Filtre',
     FilterText: 'Filtrer',
+    FilterPanelEmptyTitle: 'Ingen data å filtrere på',
+    FilterPanelEmptyMessage: 'Det er ingen data å filtrere på. Det kan være at ingen filtre er definert, eller at det ikke er noe data å filtrere på.',
     GroupByLabel: 'Grupper etter',
     LastPublishedStatusreport: 'Gå til siste statusrapport',
     LoadingText: 'Laster...',