From a8b2a75dab7d96910a2e506a0982a1551937ab82 Mon Sep 17 00:00:00 2001
From: Beto Muniz <contato@betomuniz.com>
Date: Wed, 7 Aug 2024 18:08:13 -0300
Subject: [PATCH] GOps: Setup FullStory in the IRM configuration tracker
 (#90442)

* GOps: Setup support FullStory in the IRM configuration tracker

* fix: improve fs-unmask class application

* fix: remove extrtag as requested in PR review

* fix: revert extratag removed since it affects UI alignment

* fix: wrap text with trans component as betterer ask

* fix: update extraction
---
 .betterer.results                             |  3 ---
 .../components/ConfigCard.tsx                 | 27 +++++++++++--------
 .../components/Essentials.tsx                 | 23 ++++++++++------
 .../components/ProgressBar.tsx                |  4 +--
 public/locales/en-US/grafana.json             |  1 +
 public/locales/pseudo-LOCALE/grafana.json     |  1 +
 6 files changed, 35 insertions(+), 24 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index 63f14419f75..68d2a6b0b03 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -4435,9 +4435,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "0"],
       [0, 0, 0, "Do not use any type assertions.", "1"]
     ],
-    "public/app/features/gops/configuration-tracker/components/ConfigCard.tsx:5381": [
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
-    ],
     "public/app/features/gops/configuration-tracker/components/ConfigureIRM.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"]
diff --git a/public/app/features/gops/configuration-tracker/components/ConfigCard.tsx b/public/app/features/gops/configuration-tracker/components/ConfigCard.tsx
index f4f4986e2ea..12a4a50ff5e 100644
--- a/public/app/features/gops/configuration-tracker/components/ConfigCard.tsx
+++ b/public/app/features/gops/configuration-tracker/components/ConfigCard.tsx
@@ -3,6 +3,7 @@ import { css } from '@emotion/css';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Button, Icon, LoadingPlaceholder, Stack, useStyles2 } from '@grafana/ui';
+import { Trans } from '@grafana/ui/src/utils/i18n';
 
 import { IrmCardConfiguration } from './ConfigureIRM';
 import { ProgressBar, StepsStatus } from './ProgressBar';
@@ -20,17 +21,21 @@ export function ConfigCard({ config, handleActionClick, isLoading = false }: Con
       <div className={styles.cardContent}>
         <Stack direction={'column'} gap={1}>
           <Stack direction="row" alignItems="center" justifyContent="space-between" gap={1}>
-            <Stack direction={'row'} gap={1} alignItems={'center'}>
-              {config.title}
-              {config.titleIcon && <Icon name={config.titleIcon} />}
-              {/* Only show check icon when not loading */}
-              {config.isDone && !isLoading && <Icon name="check-circle" color="green" size="lg" />}
-            </Stack>
-            {config.stepsDone && config.totalStepsToDo && !isLoading && (
-              <Stack direction="row" gap={0.5}>
-                <StepsStatus stepsDone={config.stepsDone} totalStepsToDo={config.totalStepsToDo} />
-                complete
+            <div className="fs-unmask">
+              <Stack direction={'row'} gap={1} alignItems={'center'}>
+                {config.title}
+                {config.titleIcon && <Icon name={config.titleIcon} />}
+                {/* Only show check icon when not loading */}
+                {config.isDone && !isLoading && <Icon name="check-circle" color="green" size="lg" />}
               </Stack>
+            </div>
+            {config.stepsDone && config.totalStepsToDo && !isLoading && (
+              <div className="fs-unmask">
+                <Stack direction="row" gap={0.5}>
+                  <StepsStatus stepsDone={config.stepsDone} totalStepsToDo={config.totalStepsToDo} />
+                  <Trans>complete</Trans>
+                </Stack>
+              </div>
             )}
           </Stack>
           <Stack direction={'column'}>
@@ -42,7 +47,7 @@ export function ConfigCard({ config, handleActionClick, isLoading = false }: Con
           </Stack>
         </Stack>
         <Stack direction={'row'} gap={1} justifyContent={'flex-start'} alignItems={'flex-end'}>
-          <Button variant="secondary" onClick={() => handleActionClick(config.id, config.isDone)}>
+          <Button variant="secondary" onClick={() => handleActionClick(config.id, config.isDone)} className="fs-unmask">
             {config.actionButtonTitle}
           </Button>
         </Stack>
diff --git a/public/app/features/gops/configuration-tracker/components/Essentials.tsx b/public/app/features/gops/configuration-tracker/components/Essentials.tsx
index 0b4cddbcda9..a55b1c699b2 100644
--- a/public/app/features/gops/configuration-tracker/components/Essentials.tsx
+++ b/public/app/features/gops/configuration-tracker/components/Essentials.tsx
@@ -48,9 +48,13 @@ function Section({ section }: SectionProps) {
   const styles = useStyles2(getStyles);
   return (
     <div className={styles.wrapper}>
-      <Text element="h4">{section.title}</Text>
+      <Text element="h4">
+        <span className="fs-unmask">{section.title}</span>
+      </Text>
 
-      <Text color="secondary">{section.description}</Text>
+      <Text color="secondary">
+        <span className="fs-unmask">{section.description}</span>
+      </Text>
       <Stack direction={'column'} gap={2}>
         {section.steps.map((step, index) => (
           <Step key={index} step={step} />
@@ -61,9 +65,9 @@ function Section({ section }: SectionProps) {
 }
 function DoneIcon({ done }: { done: boolean }) {
   return done ? (
-    <Icon name="check-circle" color="green" data-testid="checked-step" />
+    <Icon name="check-circle" color="green" data-testid="checked-step" className="fs-unmask" />
   ) : (
-    <Icon name="circle" data-testid="unckecked-step" />
+    <Icon name="circle" data-testid="unckecked-step" className="fs-unmask" />
   );
 }
 interface StepProps {
@@ -75,7 +79,9 @@ function Step({ step }: StepProps) {
     <Stack direction={'row'} justifyContent={'space-between'} data-testid="step">
       <Stack direction={'row'} alignItems="center">
         {step.done !== undefined && <DoneIcon done={step.done} />}
-        <Text variant="body">{step.title}</Text>
+        <Text variant="body">
+          <span className="fs-unmask">{step.title}</span>
+        </Text>
         <Tooltip content={step.description} placement="right">
           <Icon name="question-circle" />
         </Tooltip>
@@ -108,7 +114,7 @@ function OpenLinkButton(props: LinkButtonProps) {
     : '';
   const urlToGo = done ? urlToGoWhenDone : urlToGoWhenNotDone;
   return (
-    <LinkButton href={urlToGo} variant="secondary">
+    <LinkButton href={urlToGo} variant="secondary" className="fs-unmask">
       {done ? (labelOnDone ?? label) : label}
     </LinkButton>
   );
@@ -144,11 +150,12 @@ function StepButton({
         return (
           <Dropdown
             overlay={
-              <Menu>
+              <Menu className="fs-unmask">
                 {options?.map((option) => (
                   <Menu.Item
                     label={option.label}
                     key={option.value}
+                    className="fs-unmask"
                     onClick={() => {
                       onClickOption?.(option.value);
                     }}
@@ -157,7 +164,7 @@ function StepButton({
               </Menu>
             }
           >
-            <Button variant="secondary" size="md">
+            <Button variant="secondary" size="md" className="fs-unmask">
               {label}
               <Icon name="angle-down" />
             </Button>
diff --git a/public/app/features/gops/configuration-tracker/components/ProgressBar.tsx b/public/app/features/gops/configuration-tracker/components/ProgressBar.tsx
index fc9f4d8636b..46009dbf528 100644
--- a/public/app/features/gops/configuration-tracker/components/ProgressBar.tsx
+++ b/public/app/features/gops/configuration-tracker/components/ProgressBar.tsx
@@ -16,9 +16,9 @@ export function ProgressBar({ stepsDone, totalStepsToDo }: { stepsDone: number;
 }
 export function StepsStatus({ stepsDone, totalStepsToDo }: { stepsDone: number; totalStepsToDo: number }) {
   return (
-    <div>
+    <span>
       <Text color="success">{stepsDone}</Text> of {totalStepsToDo}
-    </div>
+    </span>
   );
 }
 
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index ebb53e1ea5b..74e4296fc69 100644
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@@ -325,6 +325,7 @@
     },
     "save": "Save"
   },
+  "complete": "complete",
   "connections": {
     "connect-data": {
       "category-header-label": "Data sources",
diff --git a/public/locales/pseudo-LOCALE/grafana.json b/public/locales/pseudo-LOCALE/grafana.json
index a721e58ce1f..70255535804 100644
--- a/public/locales/pseudo-LOCALE/grafana.json
+++ b/public/locales/pseudo-LOCALE/grafana.json
@@ -325,6 +325,7 @@
     },
     "save": "Ŝävę"
   },
+  "complete": "čőmpľęŧę",
   "connections": {
     "connect-data": {
       "category-header-label": "Đäŧä şőūřčęş",