From 02dfddfbd89e4225d67020ca2367d4a0ccf2823b Mon Sep 17 00:00:00 2001
From: Gilles Dubreuil <gdubreui@redhat.com>
Date: Mon, 27 Mar 2023 15:40:09 +0200
Subject: [PATCH] :sparkles: Empty component when no tags (#764)

* Empty component when no tags

* Add button

* change test style

(cherry picked from commit d7d0270a59032134c60ff1bcadef710cd609e6cc)
Signed-off-by: Gilles Dubreuil <gdubreui@redhat.com>
---
 client/public/locales/en/translation.json     |  4 ++-
 client/public/locales/es/translation.json     |  4 ++-
 .../application-tags/application-tags.tsx     | 30 +++++++++++++++++--
 3 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/client/public/locales/en/translation.json b/client/public/locales/en/translation.json
index 4d55e11d1b..0726994e5e 100644
--- a/client/public/locales/en/translation.json
+++ b/client/public/locales/en/translation.json
@@ -25,6 +25,7 @@
     "createNew": "Create new",
     "createTag": "Create tag",
     "createTagCategory": "Create tag category",
+    "createTags": "Create tags",
     "delete": "Delete",
     "discardAssessment": "Discard assessment/review",
     "downloadCsvTemplate": "Download CSV template",
@@ -136,7 +137,8 @@
     "reviewInstructions": "Use this section to provide your assessment of the possible migration/modernization plan and effort estimation.",
     "savingSelection": "Saving selection",
     "selectOwnerFromStakeholdersList": "Select owner from list of stakeholders",
-    "suggestedAdoptionPlanHelpText": "The suggested approach to migration based on effort, priority, and dependencies."
+    "suggestedAdoptionPlanHelpText": "The suggested approach to migration based on effort, priority, and dependencies.",
+    "toTagApplication": "Either no tags exist yet or you may not have permission to view any. If you have permission, try creating a new custom tag."
   },
   "proposedActions": {
     "refactor": "Refactor",
diff --git a/client/public/locales/es/translation.json b/client/public/locales/es/translation.json
index d4cdcb64a2..021ec18a3a 100644
--- a/client/public/locales/es/translation.json
+++ b/client/public/locales/es/translation.json
@@ -25,6 +25,7 @@
     "createNew": "Crear nuevo",
     "createTag": "Crear etiqueta",
     "createTagCategory": "Crear categoría de etiqueta",
+    "createTags": "Create tags",
     "delete": "Eliminar",
     "discardAssessment": "Descartar evaluación/revisar",
     "downloadCsvTemplate": "Descargar plantilla CSV",
@@ -136,7 +137,8 @@
     "reviewInstructions": "Utilice esta sección para proporcionar su evaluación del posible plan de migración / modernización y la estimación del esfuerzo.",
     "savingSelection": "Guardando selección",
     "selectOwnerFromStakeholdersList": "Seleccione un propietario de la lista de interesados",
-    "suggestedAdoptionPlanHelpText": "El enfoque sugerido para la migración basado en el esfuerzo, la prioridad y las dependencias."
+    "suggestedAdoptionPlanHelpText": "El enfoque sugerido para la migración basado en el esfuerzo, la prioridad y las dependencias.",
+    "toTagApplication": "Todavía no existen etiquetas o es posible que no tenga permiso para ver ninguna. Si tiene permiso, intente crear una nueva etiqueta personalizada."
   },
   "proposedActions": {
     "refactor": "",
diff --git a/client/src/app/pages/applications/components/application-tags/application-tags.tsx b/client/src/app/pages/applications/components/application-tags/application-tags.tsx
index fccb9bb842..a93580bad8 100644
--- a/client/src/app/pages/applications/components/application-tags/application-tags.tsx
+++ b/client/src/app/pages/applications/components/application-tags/application-tags.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
+  Button,
   Flex,
   Label,
   Spinner,
@@ -10,12 +11,13 @@ import {
   ToolbarContent,
   ToolbarToggleGroup,
   ToolbarItem,
+  ButtonVariant,
 } from "@patternfly/react-core";
 import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";
 import textStyles from "@patternfly/react-styles/css/utilities/Text/text";
 import FilterIcon from "@patternfly/react-icons/dist/esm/icons/filter-icon";
 import { DEFAULT_COLOR_LABELS } from "@app/Constants";
-import { ConditionalRender } from "@app/shared/components";
+import { ConditionalRender, NoDataEmptyState } from "@app/shared/components";
 import { Application, Tag, TagCategory } from "@app/api/models";
 import { getTagById, getTagCategoryById } from "@app/api/rest";
 import {
@@ -24,6 +26,7 @@ import {
   FilterType,
 } from "@app/shared/components/FilterToolbar";
 import { useFilterState } from "@app/shared/hooks/useFilterState";
+import { useHistory } from "react-router-dom";
 
 interface TagWithSource extends Tag {
   source?: string;
@@ -44,6 +47,7 @@ export const ApplicationTags: React.FC<ApplicationTagsProps> = ({
   application,
 }) => {
   const { t } = useTranslation();
+  const history = useHistory();
 
   const [tags, setTags] = useState<TagWithSource[]>([]);
   const [tagCategoriesById, setTagCategoriesById] = useState<
@@ -164,7 +168,7 @@ export const ApplicationTags: React.FC<ApplicationTagsProps> = ({
     }
   });
 
-  return (
+  return !!tagsBySource.size ? (
     <ConditionalRender when={isFetching} then={<Spinner isSVG size="md" />}>
       <Toolbar
         clearAllFilters={() => setFilterValues({})}
@@ -242,5 +246,27 @@ export const ApplicationTags: React.FC<ApplicationTagsProps> = ({
           );
         })}
     </ConditionalRender>
+  ) : (
+    <>
+      <NoDataEmptyState
+        title={t("composed.noDataStateTitle", {
+          what: "tags",
+        })}
+        description={t("message.toTagApplication")}
+      />
+      <div className="pf-u-text-align-center">
+        <Button
+          type="button"
+          id="create-tags"
+          aria-label="Create Tags"
+          variant={ButtonVariant.primary}
+          onClick={() => {
+            history.push("/controls/tags");
+          }}
+        >
+          {t("actions.createTag")}
+        </Button>
+      </div>
+    </>
   );
 };