✨ Empty component when no tags (konveyor#764)

* Empty component when no tags * Add button * change test style
mturley · Mar 27, 2023 · d7d0270 · d7d0270
1 parent 93f0382
commit d7d0270
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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>
+    </>
   );
 };