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

@@ -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"]

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>

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>

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>
   );
 }
 

public/locales/en-US/grafana.json

@@ -325,6 +325,7 @@
     },
     "save": "Save"
   },
+  "complete": "complete",
   "connections": {
     "connect-data": {
       "category-header-label": "Data sources",

public/locales/pseudo-LOCALE/grafana.json

@@ -325,6 +325,7 @@
     },
     "save": "Ŝävę"
   },
+  "complete": "čőmpľęŧę",
   "connections": {
     "connect-data": {
       "category-header-label": "Đäŧä şőūřčęş",