TACKLE-541: Spanish translation for controls tabs and filters (#290)

* ES i18n for controls filters * ES i18n controls tabs Co-authored-by: Ian Bolton <ibolton@redhat.com>
konveyor · Jun 21, 2022 · d7bcc9b · d7bcc9b
1 parent ec3d441
commit d7bcc9b
Show file tree

Hide file tree

Showing 8 changed files with 85 additions and 33 deletions.
diff --git a/pkg/client/public/locales/en/translation.json b/pkg/client/public/locales/en/translation.json
@@ -27,6 +27,7 @@
         "downloadCsvTemplate": "Download CSV template",
         "edit": "Edit",
         "export": "Export",
+        "filterBy": "Filter by {{what}}",
         "import": "Import",
         "logout": "Logout",
         "manageAccount": "User management",
@@ -175,6 +176,7 @@
         "completed": "Completed",
         "confidence": "Confidence",
         "controls": "Controls",
+        "createdBy": "Created By",
         "credentials": "Credentials",
         "criticality": "Criticality",
         "currentLandscape": "Current landscape",

diff --git a/pkg/client/public/locales/es/translation.json b/pkg/client/public/locales/es/translation.json
@@ -27,6 +27,7 @@
         "downloadCsvTemplate": "Descargar plantilla CSV",
         "edit": "Editar",
         "export": "Exportar",
+        "filterBy": "Filtrar por {{what}}",
         "import": "Importar",
         "logout": "Cerrar sesión",
         "manageAccount": "Administrar cuenta",
@@ -175,6 +176,7 @@
         "completed": "Completado",
         "confidence": "Confianza",
         "controls": "Controles",
+        "createdBy": "Creado Por",
         "credentials": "Credenciales",
         "criticality": "Criticidad",
         "currentLandscape": "Actual visión general",

diff --git a/pkg/client/src/app/pages/controls/business-services/business-services.tsx b/pkg/client/src/app/pages/controls/business-services/business-services.tsx
@@ -83,27 +83,36 @@ export const BusinessServices: React.FC = () => {
   const filterCategories: FilterCategory<BusinessService>[] = [
     {
       key: "name",
-      title: "Name",
+      title: t("terms.name"),
       type: FilterType.search,
-      placeholderText: "Filter by name...",
+      placeholderText:
+        t("actions.filterBy", {
+          what: t("terms.name").toLowerCase(),
+        }) + "...",
       getItemValue: (item) => {
         return item?.name || "";
       },
     },
     {
       key: "description",
-      title: "Description",
+      title: t("terms.description"),
       type: FilterType.search,
-      placeholderText: "Filter by description...",
+      placeholderText:
+        t("actions.filterBy", {
+          what: t("terms.description").toLowerCase(),
+        }) + "...",
       getItemValue: (item) => {
         return item.description || "";
       },
     },
     {
       key: "owner",
-      title: "Created By",
+      title: t("terms.createdBy"),
       type: FilterType.search,
-      placeholderText: "Filter by owner...",
+      placeholderText:
+        t("actions.filterBy", {
+          what: t("terms.owner").toLowerCase(),
+        }) + "...",
       getItemValue: (item) => {
         return item.owner?.name || "";
       },

diff --git a/pkg/client/src/app/pages/controls/controls.tsx b/pkg/client/src/app/pages/controls/controls.tsx
@@ -75,20 +75,26 @@ export const Controls: React.FC = () => {
             history.push(Paths[tabs[tabIndex as number] as keyof typeof Paths]);
           }}
         >
-          <Tab eventKey={0} title={<TabTitleText>Stakeholders</TabTitleText>} />
+          <Tab
+            eventKey={0}
+            title={<TabTitleText>{t("terms.stakeholders")}</TabTitleText>}
+          />
           <Tab
             eventKey={1}
-            title={<TabTitleText>Stakeholder groups</TabTitleText>}
+            title={<TabTitleText>{t("terms.stakeholderGroups")}</TabTitleText>}
           />
           <Tab
             eventKey={2}
-            title={<TabTitleText>Job functions</TabTitleText>}
+            title={<TabTitleText>{t("terms.jobFunctions")}</TabTitleText>}
           />
           <Tab
             eventKey={3}
-            title={<TabTitleText>Business services</TabTitleText>}
+            title={<TabTitleText>{t("terms.businessServices")}</TabTitleText>}
+          />
+          <Tab
+            eventKey={4}
+            title={<TabTitleText>{t("terms.tags")}</TabTitleText>}
           />
-          <Tab eventKey={4} title={<TabTitleText>Tags</TabTitleText>} />
         </Tabs>
       </PageSection>
       <PageSection>

diff --git a/pkg/client/src/app/pages/controls/job-functions/job-functions.tsx b/pkg/client/src/app/pages/controls/job-functions/job-functions.tsx
@@ -68,9 +68,12 @@ export const JobFunctions: React.FC = () => {
   const filterCategories: FilterCategory<JobFunction>[] = [
     {
       key: "name",
-      title: "Name",
+      title: t("terms.name"),
       type: FilterType.search,
-      placeholderText: "Filter by name...",
+      placeholderText:
+        t("actions.filterBy", {
+          what: t("terms.name").toLowerCase(),
+        }) + "...",
       getItemValue: (item) => {
         return item?.name || "";
       },

diff --git a/pkg/client/src/app/pages/controls/stakeholder-groups/stakeholder-groups.tsx b/pkg/client/src/app/pages/controls/stakeholder-groups/stakeholder-groups.tsx
@@ -115,27 +115,36 @@ export const StakeholderGroups: React.FC = () => {
   const filterCategories: FilterCategory<StakeholderGroup>[] = [
     {
       key: "name",
-      title: "Name",
+      title: t("terms.name"),
       type: FilterType.search,
-      placeholderText: "Filter by name...",
+      placeholderText:
+        t("actions.filterBy", {
+          what: t("terms.name").toLowerCase(),
+        }) + "...",
       getItemValue: (item) => {
         return item?.name || "";
       },
     },
     {
       key: "description",
-      title: "Description",
+      title: t("terms.description"),
       type: FilterType.search,
-      placeholderText: "Filter by description...",
+      placeholderText:
+        t("actions.filterBy", {
+          what: t("terms.description").toLowerCase(),
+        }) + "...",
       getItemValue: (item) => {
         return item?.description || "";
       },
     },
     {
       key: "stakeholders",
-      title: "Stakeholders",
+      title: t("terms.stakeholders"),
       type: FilterType.search,
-      placeholderText: "Filter by stakeholders...",
+      placeholderText:
+        t("actions.filterBy", {
+          what: t("terms.stakeholders").toLowerCase(),
+        }) + "...",
       getItemValue: (stakeholderGroup) => {
         const stakeholders = stakeholderGroup.stakeholders?.map(
           (stakeholder) => stakeholder.name

diff --git a/pkg/client/src/app/pages/controls/stakeholders/stakeholders.tsx b/pkg/client/src/app/pages/controls/stakeholders/stakeholders.tsx
@@ -92,36 +92,48 @@ export const Stakeholders: React.FC = () => {
   const filterCategories: FilterCategory<Stakeholder>[] = [
     {
       key: "email",
-      title: "Email",
+      title: t("terms.email"),
       type: FilterType.search,
-      placeholderText: "Filter by email...",
+      placeholderText:
+        t("actions.filterBy", {
+          what: t("terms.email").toLowerCase(),
+        }) + "...",
       getItemValue: (item) => {
         return item?.email || "";
       },
     },
     {
       key: "name",
-      title: "Name",
+      title: t("terms.name"),
       type: FilterType.search,
-      placeholderText: "Filter by name...",
+      placeholderText:
+        t("actions.filterBy", {
+          what: t("terms.name").toLowerCase(),
+        }) + "...",
       getItemValue: (item) => {
         return item?.name || "";
       },
     },
     {
       key: "jobFunction",
-      title: "Job function",
+      title: t("terms.jobFunction"),
       type: FilterType.search,
-      placeholderText: "Filter by job function...",
+      placeholderText:
+        t("actions.filterBy", {
+          what: t("terms.jobFunction").toLowerCase(),
+        }) + "...",
       getItemValue: (item) => {
         return item.jobFunction?.name || "";
       },
     },
     {
       key: "stakeholderGroups",
-      title: "Stakeholder groups",
+      title: t("terms.stakeholderGroups"),
       type: FilterType.search,
-      placeholderText: "Filter by stakeholder groups...",
+      placeholderText:
+        t("actions.filterBy", {
+          what: t("terms.stakeholderGroups").toLowerCase(),
+        }) + "...",
       getItemValue: (stakeholder) => {
         const stakeholderGroups = stakeholder.stakeholderGroups?.map(
           (stakeholderGroup) => stakeholderGroup.name

diff --git a/pkg/client/src/app/pages/controls/tags/tags.tsx b/pkg/client/src/app/pages/controls/tags/tags.tsx
@@ -97,9 +97,12 @@ export const Tags: React.FC = () => {
   const filterCategories: FilterCategory<TagType>[] = [
     {
       key: "tags",
-      title: "Name",
+      title: t("terms.name"),
       type: FilterType.multiselect,
-      placeholderText: "Filter by name...",
+      placeholderText:
+        t("actions.filterBy", {
+          what: t("terms.name").toLowerCase(),
+        }) + "...",
       getItemValue: (item: TagType) => {
         let tagNames = item?.tags?.map((tag) => tag.name).join("");
         return tagNames || "";
@@ -114,18 +117,24 @@ export const Tags: React.FC = () => {
     },
     {
       key: "rank",
-      title: "Rank",
+      title: t("terms.rank"),
       type: FilterType.search,
-      placeholderText: "Filter by rank...",
+      placeholderText:
+        t("actions.filterBy", {
+          what: t("terms.rank").toLowerCase(),
+        }) + "...",
       getItemValue: (item) => {
         return item.rank?.toString() || "";
       },
     },
     {
       key: "color",
-      title: "Color",
+      title: t("terms.color"),
       type: FilterType.search,
-      placeholderText: "Filter by color...",
+      placeholderText:
+        t("actions.filterBy", {
+          what: t("terms.color").toLowerCase(),
+        }) + "...",
       getItemValue: (item) => {
         const colorLabel = DEFAULT_COLOR_LABELS.get(item?.colour || "");
         return colorLabel || "";