Added empty state to add scope dialog (#2291)

src/clients/messages.ts

@@ -229,6 +229,8 @@ export default {
     },
     applyPolicy: "Apply policy",
     addClientScopes: "Add client scopes",
+    emptyAddClientScopes: "No client scopes",
+    emptyAddClientScopesInstructions: "There are no client scopes left to add",
     clientScope: "Client scope",
     groupsClaim: "Groups claim",
     addGroups: "Add groups",

src/clients/scopes/AddScopeDialog.tsx

@@ -26,6 +26,7 @@ import {
   clientScopeTypesDropdown,
 } from "../../components/client-scope/ClientScopeTypes";
 import { KeycloakDataTable } from "../../components/table-toolbar/KeycloakDataTable";
+import { ListEmptyState } from "../../components/list-empty-state/ListEmptyState";
 import { getProtocolName } from "../utils";
 import useToggle from "../../utils/useToggle";
 
@@ -302,6 +303,12 @@ export const AddScopeDialog = ({
             name: "description",
           },
         ]}
+        emptyState={
+          <ListEmptyState
+            message={t("emptyAddClientScopes")}
+            instructions={t("emptyAddClientScopesInstructions")}
+          />
+        }
       />
     </Modal>
   );

src/components/table-toolbar/KeycloakDataTable.tsx

@@ -251,7 +251,7 @@ export function KeycloakDataTable<T>({
       return getNodeText(
         isValidElement((node as TitleCell).title)
           ? (node as TitleCell).title.props?.children
-          : (node as JSX.Element).props.children
+          : (node as JSX.Element).props?.children
       );
     }
     return "";