Merge pull request #157 from lokanandaprabhu/feature/SRVKP-6458

SRVKP-6458: Copy missing translations for other locales from console repository

locales/en/plugin__pipelines-console-plugin.json

@@ -21,7 +21,6 @@
   "{{taskRunLabel}} details": "{{taskRunLabel}} details",
   "<0>{{eventCount}} times in the last <3></3></0>": "<0>{{eventCount}} times in the last <3></3></0>",
   "<0>{{eventCount}} times</0>": "<0>{{eventCount}} times</0>",
-  "<0>{type === 'approve'\n          ? 'Are you sure you want to approve'\n          : 'Please provide a reason for not approving'} <2></2><3>{name}</3> in <7></7><8></8><9>{pipelineRunName}</9>{type === 'approve' ? '?' : '.'}</0>": "<0>{type === 'approve'\n          ? 'Are you sure you want to approve'\n          : 'Please provide a reason for not approving'} <2></2><3>{name}</3> in <7></7><8></8><9>{pipelineRunName}</9>{type === 'approve' ? '?' : '.'}</0>",
   "Access Mode": "Access Mode",
   "Access mode is set by storage class and cannot be changed": "Access mode is set by storage class and cannot be changed",
   "Access to": "Access to",
@@ -58,6 +57,7 @@
   "Approvers": "Approvers",
   "Archived": "Archived",
   "Archived in Tekton results": "Archived in Tekton results",
+  "Are you sure you want to approve": "Are you sure you want to approve",
   "Are you sure you want to remove <1>{{selection}}</1> from <4>{{pipelineName}}</4>?": "Are you sure you want to remove <1>{{selection}}</1> from <4>{{pipelineName}}</4>?",
   "Authentication type": "Authentication type",
   "Average duration": "Average duration",
@@ -172,6 +172,7 @@
   "High": "High",
   "Image Registry": "Image Registry",
   "Image Registry Credentials": "Image Registry Credentials",
+  "in": "in",
   "Increment": "Increment",
   "Info": "Info",
   "Init containers": "Init containers",
@@ -279,6 +280,7 @@
   "PipelineRuns": "PipelineRuns",
   "Pipelines": "Pipelines",
   "Please <2>try again</2>.": "Please <2>try again</2>.",
+  "Please provide a reason for not approving": "Please provide a reason for not approving",
   "Pod": "Pod",
   "Pod selector": "Pod selector",
   "Pods": "Pods",

src/components/approval-tasks/modal/Approval.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Trans, useTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import { Formik, FormikValues, FormikHelpers } from 'formik';
 import { Link } from 'react-router-dom-v5-compat';
 import { ResourceIcon, k8sPatch } from '@openshift-console/dynamic-plugin-sdk';
@@ -78,32 +78,35 @@ const Approval: ModalComponent<ApprovalProps> = ({
 
   const labelTitle = type === 'approve' ? t('Approve') : t('Reject');
 
+  const approvalMessage =
+    type === 'approve'
+      ? t('Are you sure you want to approve')
+      : t('Please provide a reason for not approving');
+
+  const approvalEnding = type === 'approve' ? '?' : '.';
+
   const labelDescription = (
-    <Trans t={t} ns="plugin__pipelines-console-plugin">
-      <p>
-        {type === 'approve'
-          ? 'Are you sure you want to approve'
-          : 'Please provide a reason for not approving'}{' '}
-        <ResourceIcon kind={getReferenceForModel(ApprovalTaskModel)} />
-        <Link
-          to={`/k8s/ns/${namespace}/${getReferenceForModel(
-            ApprovalTaskModel,
-          )}/${name}`}
-        >
-          {name}
-        </Link>{' '}
-        {'in'} <br />
-        <ResourceIcon kind={getReferenceForModel(PipelineRunModel)} />
-        <Link
-          to={`/k8s/ns/${namespace}/${getReferenceForModel(
-            PipelineRunModel,
-          )}/${pipelineRunName}`}
-        >
-          {pipelineRunName}
-        </Link>
-        {type === 'approve' ? '?' : '.'}
-      </p>
-    </Trans>
+    <p>
+      {approvalMessage}{' '}
+      <ResourceIcon kind={getReferenceForModel(ApprovalTaskModel)} />
+      <Link
+        to={`/k8s/ns/${namespace}/${getReferenceForModel(
+          ApprovalTaskModel,
+        )}/${name}`}
+      >
+        {name}
+      </Link>{' '}
+      {t('in')} <br />
+      <ResourceIcon kind={getReferenceForModel(PipelineRunModel)} />
+      <Link
+        to={`/k8s/ns/${namespace}/${getReferenceForModel(
+          PipelineRunModel,
+        )}/${pipelineRunName}`}
+      >
+        {pipelineRunName}
+      </Link>
+      {approvalEnding}
+    </p>
   );
   return (
     <ModalWrapper className="pipelines-approval-modal" onClose={closeModal}>

src/components/approval-tasks/modal/ApprovalModal.scss

@@ -6,3 +6,19 @@
 .pipelines-approval-modal__text-box {
   height: 8rem !important;
 }
+
+.pipelines-approval-modal__title {
+  padding-bottom: 0 !important;
+  padding-left: var(--pf-v5-global--spacer--xl);
+  padding-top: var(--pf-v5-global--spacer--md);
+}
+
+.pipelines-approval-modal__content {
+  padding-bottom: 0 !important;
+  padding-left: var(--pf-v5-global--spacer--xl);
+}
+
+.pipelines-approval-modal__footer {
+  padding-top: 0 !important;
+  padding-left: var(--pf-v5-global--spacer--xl);
+}

src/components/approval-tasks/modal/ApprovalModal.tsx

@@ -36,8 +36,10 @@ const ApprovalModal: React.FC<Props> = ({
   const dirty = type === 'reject' && _.isEmpty(values.reason);
   return (
     <Form className="modal-content" onSubmit={handleSubmit}>
-      <ModalTitle>{labelTitle}</ModalTitle>
-      <ModalBody>
+      <ModalTitle className="pipelines-approval-modal__title">
+        {labelTitle}
+      </ModalTitle>
+      <ModalBody className="pipelines-approval-modal__content">
         {labelDescription}
         <FormGroup label={t('Reason')} fieldId="reason">
           <TextArea
@@ -60,6 +62,7 @@ const ApprovalModal: React.FC<Props> = ({
         buttonAlignment="left"
         cancel={cancel}
         errorMessage={status?.error}
+        className="pipelines-approval-modal__footer"
       />
     </Form>
   );

src/components/modals/modal.tsx

@@ -36,9 +36,12 @@ export const ModalTitle: React.FC<ModalTitleProps> = ({
   </div>
 );
 
-export const ModalBody: React.FC<ModalBodyProps> = ({ children }) => (
+export const ModalBody: React.FC<ModalBodyProps> = ({
+  children,
+  className = 'modal-body-content',
+}) => (
   <div className="modal-body">
-    <div className="modal-body-content">{children}</div>
+    <div className={className}>{children}</div>
   </div>
 );
 
@@ -47,10 +50,11 @@ export const ModalFooter: React.FC<ModalFooterProps> = ({
   errorMessage,
   inProgress,
   children,
+  className = 'modal-footer',
 }) => {
   return (
     <ButtonBar
-      className="modal-footer"
+      className={className}
       errorMessage={errorMessage}
       infoMessage={message}
       inProgress={inProgress}