Merge pull request #3861 from kids-first/feat/SKFP-861-empty-set-filt…

…er-widget feat(widget): SKFP-861 empty for filter and set
kids-first · Nov 28, 2023 · ad13d56 · ad13d56
2 parents 156d43a + 32afe89
commit ad13d56
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 6 deletions.
diff --git a/src/locales/en.ts b/src/locales/en.ts
@@ -605,11 +605,12 @@ const en = {
         },
         savedFilters: {
           title: 'Saved Filters',
-          noSavedFilters: 'You have no saved filters',
+          noSavedFilters:
+            'A saved filter is a virtual query created by applying one or more filters to a data set. Save your first filter from the query builder at the top of the <a href="{dataExploHref}" style="text-decoration: underline;">Data Exploration</a> and <a href="{variantsHref}" style="text-decoration: underline;">Variants Exploration</a> pages.',
           lastSaved: 'Last saved: {date} ago',
           infoPopover: {
             content:
-              'A saved filter is a virtual query created by applying one or more filters to a data set. They can be saved and revisited for later use. You can create and manage saved filters from the query builder at the top of the <a href="{dataExploHref}" style="text-decoration: underline;">Data Exploration</a> and <a href="{variantsHref}" style="text-decoration: underline;">Variants</a> pages.',
+              'A saved filter is a virtual query created by applying one or more filters to a data set. They can be saved and revisited for later use. You can create and manage saved filters from the query builder at the top of the <a href="{dataExploHref}" style="text-decoration: underline;">Data Exploration</a> and <a href="{variantsHref}" style="text-decoration: underline;">Variants Exploration</a> pages.',
 
             title: 'Managing Saved Filters',
           },
@@ -627,11 +628,12 @@ const en = {
             variants: 'Variants',
           },
           title: 'Saved Sets',
-          noSavedFilters: 'You have no saved sets',
+          noSavedSets:
+            'A saved set is a collection of one or more entity IDs which can be saved and revisited for later use. Save your first set at the top of the table of results in the <a href="{dataExploHref}" style="text-decoration: underline;">Data Exploration</a> and <a href="{variantsHref}" style="text-decoration: underline;">Variants Exploration</a> pages.',
           lastSaved: 'Last saved: {date} ago',
           infoPopover: {
             content:
-              'A saved set is a collection of one or more entity IDs which can be saved and revisited for later use. You can create saved sets at the top of the table of results in the <a href="{dataExploHref}" style="text-decoration: underline;">Data Exploration</a> and <a href="{variantsHref}" style="text-decoration: underline;">Variants</a> pages.',
+              'A saved set is a collection of one or more entity IDs which can be saved and revisited for later use. You can create saved sets at the top of the table of results in the <a href="{dataExploHref}" style="text-decoration: underline;">Data Exploration</a> and <a href="{variantsHref}" style="text-decoration: underline;">Variants Exploration</a> pages.',
             title: 'Managing Saved Sets',
           },
         },

diff --git a/src/views/Dashboard/components/DashboardCards/SavedFilters/index.module.scss b/src/views/Dashboard/components/DashboardCards/SavedFilters/index.module.scss
@@ -10,6 +10,10 @@
   *[class$='-item-meta-description'] {
     font-size: 12px;
   }
+
+  div[class$='-list-empty-text'] {
+    padding: 24px;
+  }
 }
 
 .setTabs {
@@ -18,6 +22,10 @@
   :global(.ant-tabs-content) {
     height: 100%;
     overflow: auto;
+
+    :global(.ant-tabs-tabpane) {
+      height: 100%;
+    }
   }
 
   :global(.ant-tabs-tab) {

diff --git a/src/views/Dashboard/components/DashboardCards/SavedFilters/index.tsx b/src/views/Dashboard/components/DashboardCards/SavedFilters/index.tsx
@@ -56,7 +56,11 @@ const SavedFilterListWrapper = ({
       ) : (
         <Empty
           imageType="grid"
-          description={intl.get('screen.dashboard.cards.savedFilters.noSavedFilters')}
+          description={intl.getHTML('screen.dashboard.cards.savedFilters.noSavedFilters', {
+            dataExploHref: STATIC_ROUTES.DATA_EXPLORATION,
+            variantsHref: STATIC_ROUTES.VARIANTS,
+          })}
+          noPadding
         />
       ),
     }}

diff --git a/src/views/Dashboard/components/DashboardCards/SavedSets/index.module.scss b/src/views/Dashboard/components/DashboardCards/SavedSets/index.module.scss
@@ -12,6 +12,10 @@
   *[class$='-item-meta-description'] {
     font-size: 12px;
   }
+
+  div[class$='-list-empty-text'] {
+    padding: 24px;
+  }
 }
 
 .setTabs {
@@ -20,6 +24,10 @@
   :global(.ant-tabs-content) {
     height: 100%;
     overflow: auto;
+
+    :global(.ant-tabs-tabpane) {
+      height: 100%;
+    }
   }
 
   :global(.ant-tabs-tab) {

diff --git a/src/views/Dashboard/components/DashboardCards/SavedSets/index.tsx b/src/views/Dashboard/components/DashboardCards/SavedSets/index.tsx
@@ -53,7 +53,11 @@ const getItemList = (
       ) : (
         <Empty
           imageType="grid"
-          description={intl.get('screen.dashboard.cards.savedSets.noSavedFilters')}
+          description={intl.getHTML('screen.dashboard.cards.savedSets.noSavedSets', {
+            dataExploHref: STATIC_ROUTES.DATA_EXPLORATION,
+            variantsHref: STATIC_ROUTES.VARIANTS,
+          })}
+          noPadding
         />
       ),
     }}