From 2c1f62fea8849e7b471c3f4e4ae33d0d90f3cf00 Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Wed, 21 Sep 2022 16:27:23 +0200
Subject: [PATCH] Added empty state (#3366)

---
 apps/admin-ui/public/resources/en/clients.json      |  2 ++
 .../src/clients/authorization/Resources.tsx         | 13 ++++++++++++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/apps/admin-ui/public/resources/en/clients.json b/apps/admin-ui/public/resources/en/clients.json
index 07f0fd0a16..587328e8b8 100644
--- a/apps/admin-ui/public/resources/en/clients.json
+++ b/apps/admin-ui/public/resources/en/clients.json
@@ -146,6 +146,8 @@
   "allowRemoteResourceManagement": "Remote resource management",
   "resources": "Resources",
   "resource": "Resource",
+  "emptyResources": "No resources",
+  "emptyResourcesInstructions": "If you want to create a resource, please click the button below.",
   "allTypes": "All types",
   "scope": "Scope",
   "owner": "Owner",
diff --git a/apps/admin-ui/src/clients/authorization/Resources.tsx b/apps/admin-ui/src/clients/authorization/Resources.tsx
index afb45287f2..8eab10fea3 100644
--- a/apps/admin-ui/src/clients/authorization/Resources.tsx
+++ b/apps/admin-ui/src/clients/authorization/Resources.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Link } from "react-router-dom-v5-compat";
+import { Link, useNavigate } from "react-router-dom-v5-compat";
 import { useTranslation } from "react-i18next";
 import {
   Alert,
@@ -44,6 +44,7 @@ type ExpandableResourceRepresentation = ResourceRepresentation & {
 
 export const AuthorizationResources = ({ clientId }: ResourcesProps) => {
   const { t } = useTranslation("clients");
+  const navigate = useNavigate();
   const { adminClient } = useAdminClient();
   const { addAlert, addError } = useAlerts();
   const { realm } = useRealm();
@@ -294,6 +295,16 @@ export const AuthorizationResources = ({ clientId }: ResourcesProps) => {
           instructions={t("common:noSearchResultsInstructions")}
         />
       )}
+      {noData && !searching && (
+        <ListEmptyState
+          message={t("emptyResources")}
+          instructions={t("emptyResourcesInstructions")}
+          primaryActionText={t("createResource")}
+          onPrimaryAction={() =>
+            navigate(toCreateResource({ realm, id: clientId }))
+          }
+        />
+      )}
     </PageSection>
   );
 };