From 15a87b7d2e9cb43f33e8700a72f3d7b95efd0105 Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Wed, 11 Aug 2021 11:33:51 +0200
Subject: [PATCH] added empty state for new realms with no sessions (#986)

---
 src/sessions/SessionsSection.tsx | 19 +++++++++++--------
 src/sessions/messages.ts         |  2 ++
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/sessions/SessionsSection.tsx b/src/sessions/SessionsSection.tsx
index 5eee4d7732..feb90cb586 100644
--- a/src/sessions/SessionsSection.tsx
+++ b/src/sessions/SessionsSection.tsx
@@ -1,19 +1,21 @@
 import React, { useState } from "react";
 import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
+import moment from "moment";
 import {
   PageSection,
   Select,
   SelectOption,
   SelectVariant,
 } from "@patternfly/react-core";
-import moment from "moment";
-import type UserSessionRepresentation from "keycloak-admin/lib/defs/userSessionRepresentation";
+import { FilterIcon } from "@patternfly/react-icons";
 
+import type UserSessionRepresentation from "keycloak-admin/lib/defs/userSessionRepresentation";
+import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
 import { ViewHeader } from "../components/view-header/ViewHeader";
 import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable";
 import { useAdminClient } from "../context/auth/AdminClient";
-import { FilterIcon } from "@patternfly/react-icons";
+
 import "./SessionsSection.css";
 
 const Clients = (row: UserSessionRepresentation) => {
@@ -88,28 +90,23 @@ export const SessionsSection = () => {
               selections={filterType}
             >
               <SelectOption
-                key={0}
                 data-testid="all-sessions-option"
                 value={t("sessionsType.allSessions")}
                 isPlaceholder
               />
               <SelectOption
-                key={1}
                 data-testid="regular-sso-option"
                 value={t("sessionsType.regularSSO")}
               />
               <SelectOption
-                key={2}
                 data-testid="offline-option"
                 value={t("sessionsType.offline")}
               />
               <SelectOption
-                key={3}
                 data-testid="direct-grant-option"
                 value={t("sessionsType.directGrant")}
               />
               <SelectOption
-                key={4}
                 data-testid="service-account-option"
                 value={t("sessionsType.serviceAccount")}
               />
@@ -136,6 +133,12 @@ export const SessionsSection = () => {
               cellRenderer: Clients,
             },
           ]}
+          emptyState={
+            <ListEmptyState
+              message={t("emptyTitle")}
+              instructions={t("emptyInstructions")}
+            />
+          }
         />
       </PageSection>
     </>
diff --git a/src/sessions/messages.ts b/src/sessions/messages.ts
index ca5d7ceef9..19ef72cced 100644
--- a/src/sessions/messages.ts
+++ b/src/sessions/messages.ts
@@ -14,5 +14,7 @@ export default {
       directGrant: "Direct grant",
       serviceAccount: "Service account",
     },
+    emptyTitle: "No sessions",
+    emptyInstructions: "There are no active sessions on this realm",
   },
 };