From 2be382d01fb0bbe096e0903b79bf7cf8ecd4dd2f Mon Sep 17 00:00:00 2001
From: Carla Duarte <cduarte@edx.org>
Date: Fri, 14 Jan 2022 15:09:11 -0500
Subject: [PATCH] fix: RTL bug on progress tab (#804)

---
 .../grades/course-grade/CurrentGradeTooltip.jsx    | 14 +++++++++-----
 .../grades/course-grade/PassingGradeTooltip.jsx    | 14 +++++++++-----
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/course-home/progress-tab/grades/course-grade/CurrentGradeTooltip.jsx b/src/course-home/progress-tab/grades/course-grade/CurrentGradeTooltip.jsx
index 186020e1..e5004294 100644
--- a/src/course-home/progress-tab/grades/course-grade/CurrentGradeTooltip.jsx
+++ b/src/course-home/progress-tab/grades/course-grade/CurrentGradeTooltip.jsx
@@ -2,7 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 
-import { injectIntl, intlShape, isRtl } from '@edx/frontend-platform/i18n';
+import {
+  getLocale, injectIntl, intlShape, isRtl,
+} from '@edx/frontend-platform/i18n';
 import { OverlayTrigger, Popover } from '@edx/paragon';
 
 import { useModel } from '../../../../generic/model-store';
@@ -25,7 +27,9 @@ function CurrentGradeTooltip({ intl, tooltipClassName }) {
 
   let currentGradeDirection = currentGrade < 50 ? '' : '-';
 
-  if (isRtl) {
+  const isLocaleRtl = isRtl(getLocale());
+
+  if (isLocaleRtl) {
     currentGradeDirection = currentGrade < 50 ? '-' : '';
   }
 
@@ -43,14 +47,14 @@ function CurrentGradeTooltip({ intl, tooltipClassName }) {
         )}
       >
         <g>
-          <circle cx={`${Math.min(...[isRtl ? 100 - currentGrade : currentGrade, 100])}%`} cy="50%" r="8.5" fill="transparent" />
-          <rect className="grade-bar__divider" x={`${Math.min(...[isRtl ? 100 - currentGrade : currentGrade, 100])}%`} style={{ transform: 'translateY(2.61em)' }} />
+          <circle cx={`${Math.min(...[isLocaleRtl ? 100 - currentGrade : currentGrade, 100])}%`} cy="50%" r="8.5" fill="transparent" />
+          <rect className="grade-bar__divider" x={`${Math.min(...[isLocaleRtl ? 100 - currentGrade : currentGrade, 100])}%`} style={{ transform: 'translateY(2.61em)' }} />
         </g>
       </OverlayTrigger>
       <text
         className="x-small"
         textAnchor={currentGrade < 50 ? 'start' : 'end'}
-        x={`${Math.min(...[isRtl ? 100 - currentGrade : currentGrade, 100])}%`}
+        x={`${Math.min(...[isLocaleRtl ? 100 - currentGrade : currentGrade, 100])}%`}
         y="20px"
         style={{ transform: `translateX(${currentGradeDirection}3.4em)` }}
       >
diff --git a/src/course-home/progress-tab/grades/course-grade/PassingGradeTooltip.jsx b/src/course-home/progress-tab/grades/course-grade/PassingGradeTooltip.jsx
index ee8b5cb3..cc0f0497 100644
--- a/src/course-home/progress-tab/grades/course-grade/PassingGradeTooltip.jsx
+++ b/src/course-home/progress-tab/grades/course-grade/PassingGradeTooltip.jsx
@@ -1,15 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { injectIntl, intlShape, isRtl } from '@edx/frontend-platform/i18n';
+import {
+  getLocale, injectIntl, intlShape, isRtl,
+} from '@edx/frontend-platform/i18n';
 import { OverlayTrigger, Popover } from '@edx/paragon';
 
 import messages from '../messages';
 
 function PassingGradeTooltip({ intl, passingGrade, tooltipClassName }) {
+  const isLocaleRtl = isRtl(getLocale());
+
   let passingGradeDirection = passingGrade < 50 ? '' : '-';
 
-  if (isRtl) {
+  if (isLocaleRtl) {
     passingGradeDirection = passingGrade < 50 ? '-' : '';
   }
 
@@ -27,15 +31,15 @@ function PassingGradeTooltip({ intl, passingGrade, tooltipClassName }) {
         )}
       >
         <g>
-          <circle cx={`${isRtl ? 100 - passingGrade : passingGrade}%`} cy="50%" r="8.5" fill="transparent" />
-          <circle className="grade-bar--passing" cx={`${isRtl ? 100 - passingGrade : passingGrade}%`} cy="50%" r="4.5" />
+          <circle cx={`${isLocaleRtl ? 100 - passingGrade : passingGrade}%`} cy="50%" r="8.5" fill="transparent" />
+          <circle className="grade-bar--passing" cx={`${isLocaleRtl ? 100 - passingGrade : passingGrade}%`} cy="50%" r="4.5" />
         </g>
       </OverlayTrigger>
 
       <text
         className="x-small"
         textAnchor={passingGrade < 50 ? 'start' : 'end'}
-        x={`${isRtl ? 100 - passingGrade : passingGrade}%`}
+        x={`${isLocaleRtl ? 100 - passingGrade : passingGrade}%`}
         y="90px"
         style={{ transform: `translateX(${passingGradeDirection}3.4em)` }}
       >