Allow for showing internal topics from the empty state when no topics…

… exist Fixes #672
streamshub · May 22, 2024 · 67c7f37 · 67c7f37
1 parent 4e1d49e
commit 67c7f37
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 9 deletions.
diff --git a/ui/components/TopicsTable/TopicsTable.tsx b/ui/components/TopicsTable/TopicsTable.tsx
@@ -124,6 +124,7 @@ export function TopicsTable({
         <EmptyStateNoTopics
           canCreate={isReadOnly === false}
           createHref={`${baseurl}/create`}
+          onShowHiddenTopics={() => onInternalTopicsChange(true)}
         />
       }
       emptyStateNoResults={

diff --git a/ui/components/TopicsTable/components/EmptyStateNoTopics.stories.tsx b/ui/components/TopicsTable/components/EmptyStateNoTopics.stories.tsx
@@ -7,4 +7,11 @@ export default {
 } as Meta<typeof Comp>;
 type Story = StoryObj<typeof Comp>;
 
-export const EmptyStateNoTopics: Story = {};
+export const Default: Story = {};
+
+export const CanCreate: Story = {
+  args: {
+    canCreate: true,
+    createHref: "#/sample",
+  },
+};
diff --git a/ui/components/TopicsTable/components/EmptyStateNoTopics.tsx b/ui/components/TopicsTable/components/EmptyStateNoTopics.tsx
@@ -1,21 +1,24 @@
 import { ButtonLink } from "@/components/Navigation/ButtonLink";
 import {
+  Button,
   EmptyState,
   EmptyStateActions,
   EmptyStateBody,
   EmptyStateFooter,
   EmptyStateHeader,
   EmptyStateIcon,
 } from "@/libs/patternfly/react-core";
-import { PlusCircleIcon } from "@patternfly/react-icons";
+import { PlusCircleIcon } from "@/libs/patternfly/react-icons";
 import { useTranslations } from "next-intl";
 
 export function EmptyStateNoTopics({
   canCreate,
   createHref,
+  onShowHiddenTopics,
 }: {
   canCreate: boolean;
   createHref: string;
+  onShowHiddenTopics: () => void;
 }) {
   const t = useTranslations();
   return (
@@ -28,15 +31,18 @@ export function EmptyStateNoTopics({
       <EmptyStateBody>
         {t("EmptyStateNoTopics.to_get_started_create_your_first_topic")}{" "}
       </EmptyStateBody>
-      {canCreate && (
-        <EmptyStateFooter>
-          <EmptyStateActions>
+      <EmptyStateFooter>
+        <EmptyStateActions>
+          {canCreate && (
             <ButtonLink variant="primary" href={createHref}>
               {t("EmptyStateNoTopics.create_a_topic")}
             </ButtonLink>
-          </EmptyStateActions>
-        </EmptyStateFooter>
-      )}
+          )}
+          <Button variant="secondary" onClick={onShowHiddenTopics}>
+            {t("EmptyStateNoTopics.show_hidden_topics")}
+          </Button>
+        </EmptyStateActions>
+      </EmptyStateFooter>
     </EmptyState>
   );
 }
diff --git a/ui/messages/en.json b/ui/messages/en.json
@@ -369,7 +369,8 @@
   },
   "EmptyStateNoTopics": {
     "to_get_started_create_your_first_topic": "To get started, create your first topic",
-    "create_a_topic": "Create a topic"
+    "create_a_topic": "Create a topic",
+    "show_hidden_topics": "Show hidden topics"
   },
   "ApplicationError": {
     "body": "Try clicking the button below, or refreshing the page. If the problem persists, contact your organization administrator.",