fix(console): display no data when no data is found by search filter (#5203)

packages/console/src/pages/Organizations/OrganizationsTable/index.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import useSWR from 'swr';
 
 import OrganizationIcon from '@/assets/icons/organization-preview.svg';
+import NotFoundDataPlaceholder from '@/components/EmptyDataPlaceholder';
 import ItemPreview from '@/components/ItemPreview';
 import ThemedIcon from '@/components/ThemedIcon';
 import { defaultPageSize } from '@/consts';
@@ -52,9 +53,13 @@ function OrganizationsTable({ isLoading, onCreate }: Props) {
       className={pageLayout.table}
       isLoading={isTableLoading}
       placeholder={
-        <EmptyDataPlaceholder
+        keyword ? (
-          buttonProps={{ title: 'organizations.create_organization', onClick: onCreate }}
+          <NotFoundDataPlaceholder />
-        />
+        ) : (
+          <EmptyDataPlaceholder
+            buttonProps={{ title: 'organizations.create_organization', onClick: onCreate }}
+          />
+        )
       }
       rowGroups={[{ key: 'data', data }]}
       rowClickHandler={({ id }) => {

packages/console/src/pages/Roles/index.tsx

@@ -13,6 +13,7 @@ import UserRoleIconDark from '@/assets/icons/user-role-dark.svg';
 import UserRoleIcon from '@/assets/icons/user-role.svg';
 import RolesEmptyDark from '@/assets/images/roles-empty-dark.svg';
 import RolesEmpty from '@/assets/images/roles-empty.svg';
+import EmptyDataPlaceholder from '@/components/EmptyDataPlaceholder';
 import ItemPreview from '@/components/ItemPreview';
 import ListPage from '@/components/ListPage';
 import { defaultPageSize } from '@/consts';
@@ -168,7 +169,9 @@ function Roles() {
             updateSearchParameters({ page });
           },
         },
-        placeholder: (
+        placeholder: keyword ? (
+          <EmptyDataPlaceholder />
+        ) : (
           <TablePlaceholder
             image={<RolesEmpty />}
             imageDark={<RolesEmptyDark />}

packages/console/src/pages/SignInExperience/tabs/Content/components/ManageLanguage/LanguageEditor/AddLanguageSelector.module.scss

@@ -46,6 +46,13 @@
         color: var(--color-text-secondary);
       }
     }
+
+    .noDataPlaceholder {
+      padding: _.unit(2);
+      color: var(--color-text-secondary);
+      font: var(--font-body-2);
+      user-select: none;
+    }
   }
 }
 

packages/console/src/pages/SignInExperience/tabs/Content/components/ManageLanguage/LanguageEditor/AddLanguageSelector.tsx

@@ -7,6 +7,7 @@ import { useTranslation } from 'react-i18next';
 import Plus from '@/assets/icons/plus.svg';
 import SearchIcon from '@/assets/icons/search.svg';
 import Button from '@/ds-components/Button';
+import DynamicT from '@/ds-components/DynamicT';
 import OverlayScrollbar from '@/ds-components/OverlayScrollbar';
 import TextInput from '@/ds-components/TextInput';
 import { onKeyDownHandler } from '@/utils/a11y';
@@ -89,25 +90,31 @@ function AddLanguageSelector({ options, onSelect }: Props) {
           />
         )}
       </div>
-      {isDropDownOpen && filteredOptions.length > 0 && (
+      {isDropDownOpen && (
         <OverlayScrollbar className={style.dropDown}>
-          {filteredOptions.map((languageTag) => (
+          {filteredOptions.length === 0 ? (
-            <div
+            <div className={style.noDataPlaceholder}>
-              key={languageTag}
+              <DynamicT forKey="errors.empty" />
-              role="tab"
-              tabIndex={0}
-              className={style.dropDownItem}
-              onKeyDown={onKeyDownHandler(() => {
-                handleSelect(languageTag);
-              })}
-              onClick={() => {
-                handleSelect(languageTag);
-              }}
-            >
-              <div className={style.languageName}>{uiLanguageNameMapping[languageTag]}</div>
-              <div className={style.languageTag}>{languageTag}</div>
             </div>
-          ))}
+          ) : (
+            filteredOptions.map((languageTag) => (
+              <div
+                key={languageTag}
+                role="tab"
+                tabIndex={0}
+                className={style.dropDownItem}
+                onKeyDown={onKeyDownHandler(() => {
+                  handleSelect(languageTag);
+                })}
+                onClick={() => {
+                  handleSelect(languageTag);
+                }}
+              >
+                <div className={style.languageName}>{uiLanguageNameMapping[languageTag]}</div>
+                <div className={style.languageTag}>{languageTag}</div>
+              </div>
+            ))
+          )}
         </OverlayScrollbar>
       )}
     </div>

packages/console/src/pages/Users/index.tsx

@@ -10,6 +10,7 @@ import UsersEmptyDark from '@/assets/images/users-empty-dark.svg';
 import UsersEmpty from '@/assets/images/users-empty.svg';
 import ApplicationName from '@/components/ApplicationName';
 import DateTime from '@/components/DateTime';
+import EmptyDataPlaceholder from '@/components/EmptyDataPlaceholder';
 import ItemPreview from '@/components/ItemPreview';
 import ListPage from '@/components/ListPage';
 import UserAvatar from '@/components/UserAvatar';
@@ -120,7 +121,9 @@ function Users() {
             }}
           />
         ),
-        placeholder: (
+        placeholder: keyword ? (
+          <EmptyDataPlaceholder />
+        ) : (
           <TablePlaceholder
             image={<UsersEmpty />}
             imageDark={<UsersEmptyDark />}