fix: gradebook table rtl tooltip position (#229)

Co-authored-by: vlasovmichael <mykhailo.vlasov@raccoongang.com>

src/components/GradesView/GradebookTable/LabelReplacements.jsx

@@ -7,7 +7,7 @@ import {
   OverlayTrigger,
   Tooltip,
 } from '@edx/paragon';
-import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, getLocale, isRtl } from '@edx/frontend-platform/i18n';
 
 import messages from './messages';
 
@@ -23,7 +23,7 @@ const TotalGradeLabelReplacement = () => (
     <OverlayTrigger
       trigger={['hover', 'focus']}
       key="left-basic"
-      placement="left"
+      placement={isRtl(getLocale()) ? 'right' : 'left'}
       overlay={(
         <Tooltip id="course-grade-tooltip">
           <FormattedMessage {...messages.totalGradePercentage} />

src/components/GradesView/GradebookTable/LabelReplacements.test.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
+import { getLocale } from '@edx/frontend-platform/i18n';
 
 import { OverlayTrigger } from '@edx/paragon';
 
@@ -35,3 +36,17 @@ describe('LabelReplacements', () => {
     });
   });
 });
+
+describe('snapshot', () => {
+  let el;
+  test('right to left overlay placement', () => {
+    getLocale.mockImplementation(() => 'en');
+    el = shallow(<TotalGradeLabelReplacement />);
+    expect(el).toMatchSnapshot();
+  });
+  test('left to right overlay placement', () => {
+    getLocale.mockImplementation(() => 'ar');
+    el = shallow(<TotalGradeLabelReplacement />);
+    expect(el).toMatchSnapshot();
+  });
+});

src/components/GradesView/GradebookTable/__snapshots__/LabelReplacements.test.jsx.snap

@@ -80,3 +80,99 @@ exports[`LabelReplacements UsernameLabelReplacement snapshot 1`] = `
   </div>
 </div>
 `;
+
+exports[`snapshot left to right overlay placement 1`] = `
+<div>
+  <OverlayTrigger
+    key="left-basic"
+    overlay={
+      <Tooltip
+        id="course-grade-tooltip"
+      >
+        <FormattedMessage
+          defaultMessage="Total Grade values are always displayed as a percentage"
+          description="Gradebook table message that total grades are displayed in percent format"
+          id="gradebook.GradesView.table.totalGradePercentage"
+        />
+      </Tooltip>
+    }
+    placement="right"
+    trigger={
+      Array [
+        "hover",
+        "focus",
+      ]
+    }
+  >
+    <div>
+      <FormattedMessage
+        defaultMessage="Total Grade (%)"
+        description="Gradebook table total grade column header"
+        id="gradebook.GradesView.table.headings.totalGrade"
+      />
+      <div
+        id="courseGradeTooltipIcon"
+      >
+        <Icon
+          className="fa fa-info-circle"
+          screenReaderText={
+            <FormattedMessage
+              defaultMessage="Total Grade values are always displayed as a percentage"
+              description="Gradebook table message that total grades are displayed in percent format"
+              id="gradebook.GradesView.table.totalGradePercentage"
+            />
+          }
+        />
+      </div>
+    </div>
+  </OverlayTrigger>
+</div>
+`;
+
+exports[`snapshot right to left overlay placement 1`] = `
+<div>
+  <OverlayTrigger
+    key="left-basic"
+    overlay={
+      <Tooltip
+        id="course-grade-tooltip"
+      >
+        <FormattedMessage
+          defaultMessage="Total Grade values are always displayed as a percentage"
+          description="Gradebook table message that total grades are displayed in percent format"
+          id="gradebook.GradesView.table.totalGradePercentage"
+        />
+      </Tooltip>
+    }
+    placement="left"
+    trigger={
+      Array [
+        "hover",
+        "focus",
+      ]
+    }
+  >
+    <div>
+      <FormattedMessage
+        defaultMessage="Total Grade (%)"
+        description="Gradebook table total grade column header"
+        id="gradebook.GradesView.table.headings.totalGrade"
+      />
+      <div
+        id="courseGradeTooltipIcon"
+      >
+        <Icon
+          className="fa fa-info-circle"
+          screenReaderText={
+            <FormattedMessage
+              defaultMessage="Total Grade values are always displayed as a percentage"
+              description="Gradebook table message that total grades are displayed in percent format"
+              id="gradebook.GradesView.table.totalGradePercentage"
+            />
+          }
+        />
+      </div>
+    </div>
+  </OverlayTrigger>
+</div>
+`;

src/components/GradesView/GradesView.scss

@@ -207,3 +207,13 @@
 select#ScoreView.form-control {
   padding-right: 26px;
 }
+
+[dir=rtl] #course-grade-tooltip .arrow {
+    right: initial;
+    left: 0;
+    
+    &:before {
+        border-width: 0.4rem 0.4rem 0.4rem 0;
+        border-right-color: $black;
+    }
+}

src/components/WithSidebar/__snapshots__/test.jsx.snap

@@ -2,7 +2,7 @@
 
 exports[`WithSidebar Component snapshots basic snapshot 1`] = `
 <div
-  className="d-flex sidebar-container"
+  className="d-flex sidebar-container page-gradebook"
 >
   <aside
     className="sidebar-class-names"

src/components/WithSidebar/index.jsx

@@ -32,7 +32,7 @@ export class WithSidebar extends React.Component {
 
   render() {
     return (
-      <div className="d-flex sidebar-container">
+      <div className="d-flex sidebar-container page-gradebook">
         <aside className={this.sidebarClassNames} onTransitionEnd={this.props.handleSlideDone}>
           { this.props.sidebar }
         </aside>

src/setupTest.js

@@ -19,5 +19,6 @@ jest.mock('@edx/frontend-platform/i18n', () => {
     }),
     defineMessages: m => m,
     FormattedMessage: () => 'FormattedMessage',
+    getLocale: jest.fn(),
   };
 });