Fixed these 2 issues: (#741)

* fix order of alerts where the newest is on the top

* removed double loading indicator

* fixes showing old alerts again

src/components/alert/AlertPanel.tsx

@@ -23,7 +23,6 @@ export function AlertPanel({ alerts, onCloseAlert }: AlertPanelProps) {
     <AlertGroup isToast>
       {alerts.map(({ key, variant, message, description }) => (
         <Alert
-          timeout={true}
           key={key}
           isLiveRegion
           variant={AlertVariant[variant]}

src/components/alert/Alerts.tsx

@@ -27,10 +27,12 @@ export const AlertProvider = ({ children }: { children: ReactNode }) => {
 
   const addAlert = (
     message: string,
-    variant: AlertVariant = AlertVariant.default,
+    variant: AlertVariant = AlertVariant.success,
     description?: string
   ) => {
-    setAlerts([...alerts, { key: createId(), message, variant, description }]);
+    const key = createId();
+    setTimeout(() => hideAlert(key), 8000);
+    setAlerts([{ key, message, variant, description }, ...alerts]);
   };
 
   return (

src/components/table-toolbar/KeycloakDataTable.tsx

@@ -142,6 +142,7 @@ export type DataListProps<T> = Omit<
   icon?: React.ComponentClass<SVGIconProps>;
   isNotCompact?: boolean;
   isRadio?: boolean;
+  isSearching?: boolean;
 };
 
 /**
@@ -186,6 +187,7 @@ export function KeycloakDataTable<T>({
   subToolbar,
   emptyState,
   icon,
+  isSearching = false,
   ...props
 }: DataListProps<T>) {
   const { t } = useTranslation();
@@ -256,7 +258,7 @@ export function KeycloakDataTable<T>({
           ? (node as TitleCell).title.props.children
           : (node as TitleCell).title
           ? (node as TitleCell).title
-          : (node as JSX.Element).props.children
+          : (node as JSX.Element).props?.children
       );
     }
     return "";
@@ -375,8 +377,10 @@ export function KeycloakDataTable<T>({
 
   return (
     <>
-      {!rows && loading && <Loading />}
+      {((data && data.length > 0) ||
-      {((data && data.length > 0) || search !== "" || !emptyState) && (
+        search !== "" ||
+        isSearching ||
+        loading) && (
         <PaginatingTableToolbar
           count={data?.length || 0}
           first={first}
@@ -413,7 +417,7 @@ export function KeycloakDataTable<T>({
           )}
           {!loading &&
             (!data || data.length === 0) &&
-            (search !== "" || !emptyState) &&
+            (search !== "" || !isSearching) &&
             searchPlaceholderKey && (
               <ListEmptyState
                 hasIcon={true}

src/realm-settings/KeysListTab.tsx

@@ -272,19 +272,18 @@ export const KeysListTab = ({ realmComponents }: KeysListTabProps) => {
               transforms: [cellWidth(20)],
             },
           ]}
+          isSearching={!!filterType}
           emptyState={
-            filterType ? undefined : (
+            <ListEmptyState
-              <ListEmptyState
+              hasIcon={true}
-                hasIcon={true}
+              message={t("realm-settings:noKeys")}
-                message={t("realm-settings:noKeys")}
+              instructions={
-                instructions={
+                t(`realm-settings:noKeysDescription`) +
-                  t(`realm-settings:noKeysDescription`) +
+                `${filterType.toLocaleLowerCase()}.`
-                  `${filterType.toLocaleLowerCase()}.`
+              }
-                }
+              primaryActionText={t("createRole")}
-                primaryActionText={t("createRole")}
+              onPrimaryAction={goToCreate}
-                onPrimaryAction={goToCreate}
+            />
-              />
-            )
           }
         />
       </PageSection>