fix: Fix rows counter in the Edit Grade modal window

Merge pull request #386 from DmytroAlipov/fix-second-opening-grade-quince
fix: "An unexpected error occurred" after second opening any grade
2025-01-26 21:34:11 +05:30 · 2024-04-09 14:11:57 +03:00 · 2024-04-03 15:27:59 -03:00 · 2024-03-16 18:26:24 +02:00 · 2023-12-10 20:47:54 -03:00 · 2023-12-08 16:27:28 -03:00
17 changed files with 75 additions and 38 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
        "@edx/brand": "npm:@edx/brand-openedx@^1.2.0",
        "@edx/frontend-component-footer": "12.2.0",
        "@edx/frontend-component-header": "4.6.0",
-        "@edx/frontend-platform": "5.0.0",
+        "@edx/frontend-platform": "5.5.4",
        "@edx/paragon": "20.45.0",
        "@edx/react-unit-test-utils": "1.7.0",
        "@edx/reactifex": "^2.1.1",
@@ -2452,9 +2452,9 @@
      }
    },
    "node_modules/@edx/frontend-platform": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-5.0.0.tgz",
-      "integrity": "sha512-DD9/B4rnC3BKPiWlbEFF1JIYFbWC6vUBKTyN8sf4khi4DNhhWhsobk+iNeCWNzF9UgCPRbniIqesdV1F9NXNZw==",
+      "version": "5.5.4",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-5.5.4.tgz",
+      "integrity": "sha512-Yum+oST7XfDwDnDhBnzeR/mjp6O+G0g+5AZtIJ1BdTKQH1z9FObfim/pfoiI9STiYlguVpeWMkzWuca/QMLO/Q==",
      "dependencies": {
        "@cospired/i18n-iso-languages": "4.1.0",
        "@formatjs/intl-pluralrules": "4.3.3",
@@ -2482,7 +2482,7 @@
      },
      "peerDependencies": {
        "@edx/frontend-build": ">= 8.1.0 || ^12.9.0-alpha.1",
-        "@edx/paragon": ">= 10.0.0 < 21.0.0",
+        "@edx/paragon": ">= 10.0.0 < 22.0.0",
        "prop-types": "^15.7.2",
        "react": "^16.9.0 || ^17.0.0",
        "react-dom": "^16.9.0 || ^17.0.0",
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
    "@edx/brand": "npm:@edx/brand-openedx@^1.2.0",
    "@edx/frontend-component-footer": "12.2.0",
    "@edx/frontend-component-header": "4.6.0",
-    "@edx/frontend-platform": "5.0.0",
+    "@edx/frontend-platform": "5.5.4",
    "@edx/paragon": "20.45.0",
    "@edx/react-unit-test-utils": "1.7.0",
    "@edx/reactifex": "^2.1.1",
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -6,7 +6,6 @@ import { AppProvider } from '@edx/frontend-platform/react';
 import Footer from '@edx/frontend-component-footer';
 import Header from '@edx/frontend-component-header';

-import { routePath } from 'data/constants/app';
 import store from 'data/store';
 import GradebookPage from 'containers/GradebookPage';
 import './App.scss';
@@ -20,7 +19,7 @@ const App = () => (
      <main>
        <Routes>
          <Route
-            path={routePath}
+            path="/:courseId"
            element={<GradebookPage />}
          />
        </Routes>
--- a/src/App.test.jsx
+++ b/src/App.test.jsx
@@ -7,7 +7,6 @@ import { AppProvider } from '@edx/frontend-platform/react';
 import Footer from '@edx/frontend-component-footer';
 import Header from '@edx/frontend-component-header';

-import { routePath } from 'data/constants/app';
 import store from 'data/store';
 import GradebookPage from 'containers/GradebookPage';

@@ -21,9 +20,6 @@ jest.mock('react-router-dom', () => ({
 jest.mock('@edx/frontend-platform/react', () => ({
  AppProvider: () => 'AppProvider',
 }));
-jest.mock('data/constants/app', () => ({
-  routePath: '/:courseId',
-}));
 jest.mock('@edx/frontend-component-footer', () => 'Footer');
 jest.mock('data/store', () => 'testStore');
 jest.mock('containers/GradebookPage', () => 'GradebookPage');
@@ -66,7 +62,7 @@ describe('App router component', () => {
        expect(secondChild.find('main')).toEqual(shallow(
          <main>
            <Routes>
-              <Route path={routePath} element={<GradebookPage />} />
+              <Route path="/:courseId" element={<GradebookPage />} />
            </Routes>
          </main>,
        ));
--- a/src/components/GradebookHeader/snapshots/index.test.jsx.snap
+++ b/src/components/GradebookHeader/snapshots/index.test.jsx.snap
@@ -21,7 +21,9 @@ exports[`GradebookHeader component render default view shapshot 1`] = `
  <div
    className="subtitle-row d-flex justify-content-between align-items-center"
  >
-    <h2>
+    <h2
+      className="text-break"
+    >
      test-course-id
    </h2>
  </div>
@@ -49,7 +51,9 @@ exports[`GradebookHeader component render frozen grades snapshot: show frozen wa
  <div
    className="subtitle-row d-flex justify-content-between align-items-center"
  >
-    <h2>
+    <h2
+      className="text-break"
+    >
      test-course-id
    </h2>
  </div>
@@ -83,7 +87,9 @@ exports[`GradebookHeader component render show bulk management snapshot: show to
  <div
    className="subtitle-row d-flex justify-content-between align-items-center"
  >
-    <h2>
+    <h2
+      className="text-break"
+    >
      test-course-id
    </h2>
    <Button
@@ -117,7 +123,9 @@ exports[`GradebookHeader component render user cannot view gradebook snapshot: s
  <div
    className="subtitle-row d-flex justify-content-between align-items-center"
  >
-    <h2>
+    <h2
+      className="text-break"
+    >
      test-course-id
    </h2>
  </div>
--- a/src/components/GradebookHeader/index.jsx
+++ b/src/components/GradebookHeader/index.jsx
@@ -26,7 +26,7 @@ export const GradebookHeader = () => {
      </a>
      <h1>{formatMessage(messages.gradebook)}</h1>
      <div className="subtitle-row d-flex justify-content-between align-items-center">
-        <h2>{courseId}</h2>
+        <h2 className="text-break">{courseId}</h2>
        {showBulkManagement && (
          <Button variant="tertiary" onClick={handleToggleViewClick}>
            {formatMessage(toggleViewMessage)}
--- a/src/components/GradesView/EditModal/OverrideTable/snapshots/index.test.jsx.snap
+++ b/src/components/GradesView/EditModal/OverrideTable/snapshots/index.test.jsx.snap
@@ -20,6 +20,6 @@ exports[`OverrideTable component render snapshot 1`] = `
      },
    ]
  }
-  itemCount={2}
+  itemCount={3}
 />
 `;
--- a/src/components/GradesView/EditModal/OverrideTable/hooks.js
+++ b/src/components/GradesView/EditModal/OverrideTable/hooks.js
@@ -9,7 +9,7 @@ const useOverrideTableData = () => {
  const { formatMessage } = useIntl();

  const hide = selectors.grades.useHasOverrideErrors();
-  const gradeOverrides = selectors.grades.useGradeData().gradeOverrideHistoryResults;
+  const gradeOverrides = selectors.grades.useGradeData().gradeOverrideHistoryResults || [];
  const tableProps = {};
  if (!hide) {
    tableProps.columns = [
--- a/src/components/GradesView/EditModal/OverrideTable/index.jsx
+++ b/src/components/GradesView/EditModal/OverrideTable/index.jsx
@@ -20,18 +20,20 @@ export const OverrideTable = () => {

  if (hide) { return null; }

+  const tableData = [
+    ...data,
+    {
+      adjustedGrade: <AdjustedGradeInput />,
+      date: formatDateForDisplay(new Date()),
+      reason: <ReasonInput />,
+    },
+  ];
+
  return (
    <DataTable
      columns={columns}
-      data={[
-        ...data,
-        {
-          adjustedGrade: <AdjustedGradeInput />,
-          date: formatDateForDisplay(new Date()),
-          reason: <ReasonInput />,
-        },
-      ]}
-      itemCount={data.length}
+      data={tableData}
+      itemCount={tableData.length}
    />
  );
 };
--- a/src/components/GradesView/FilterMenuToggle/snapshots/index.test.jsx.snap
+++ b/src/components/GradesView/FilterMenuToggle/snapshots/index.test.jsx.snap
@@ -7,6 +7,7 @@ exports[`FilterMenuToggle component render snapshot 1`] = `
  onClick={[MockFunction hooks.toggleFilterMenu]}
 >
  <Icon
+    className="mr-1"
    src="FilterAlt"
  />
   
--- a/src/components/GradesView/FilterMenuToggle/index.jsx
+++ b/src/components/GradesView/FilterMenuToggle/index.jsx
@@ -21,7 +21,7 @@ export const FilterMenuToggle = () => {
      className="btn-primary align-self-start"
      onClick={toggleFilterMenu}
    >
-      <Icon src={FilterAlt} /> {formatMessage(messages.editFilters)}
+      <Icon src={FilterAlt} className="mr-1" /> {formatMessage(messages.editFilters)}
    </Button>
  );
 };
--- a/src/components/GradesView/GradesView.scss
+++ b/src/components/GradesView/GradesView.scss
@@ -46,6 +46,7 @@
 }
 .grade-history-header{
    float: left;
+    min-width: 170px;
 }

 .grade-history-assignment{
@@ -65,7 +66,7 @@
 .gradebook-container {
    width: 100%;
    overflow-x: auto;
-    height: 600px;
+    max-height: 600px;
    overflow-y: auto;
    position: relative;
 }
@@ -122,3 +123,34 @@ select#ScoreView.form-control {
        border-right-color: $black;
    }
 }
+
+#edit-filters-btn {
+    @include media-breakpoint-down(xs) {
+        width: 100%;
+        margin-bottom: 1rem;
+    }
+}
+
+.search-container {
+    @include media-breakpoint-down(xs) {
+        width: 100%;
+    }
+}
+
+.pgn__modal-body-content .pgn__data-table-layout-wrapper {
+    @include media-breakpoint-down(sm) {
+        clear: both;
+        padding: 1rem 0;
+    }
+}
+
+.page-gradebook {
+    position: relative;
+
+    .sidebar-container {
+        position: relative;
+    }
+    aside.sidebar {
+        overflow: auto;
+    }
+}
--- a/src/components/GradesView/SearchControls/snapshots/index.test.jsx.snap
+++ b/src/components/GradesView/SearchControls/snapshots/index.test.jsx.snap
@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`SearchControls component render snapshot 1`] = `
-<div>
+<div
+  className="search-container"
+>
  <SearchField
    inputLabel="test-input-label"
    onBlur={[MockFunction hooks.onBlur]}
--- a/src/components/GradesView/SearchControls/index.jsx
+++ b/src/components/GradesView/SearchControls/index.jsx
@@ -18,7 +18,7 @@ export const SearchControls = () => {
  } = useSearchControlsData();

  return (
-    <div>
+    <div className="search-container">
      <SearchField
        onSubmit={onSubmit}
        inputLabel={inputLabel}
--- a/src/components/GradesView/snapshots/index.test.jsx.snap
+++ b/src/components/GradesView/snapshots/index.test.jsx.snap
@@ -10,7 +10,7 @@ exports[`GradesView component render snapshot 1`] = `
    filter-step-heading
  </h3>
  <div
-    className="d-flex justify-content-between"
+    className="d-flex justify-content-between flex-wrap"
  >
    <FilterMenuToggle />
    <SearchControls />
--- a/src/components/GradesView/index.jsx
+++ b/src/components/GradesView/index.jsx
@@ -34,7 +34,7 @@ export const GradesView = ({ updateQueryParams }) => {
        {stepHeadings.filter}
      </h3>

-      <div className="d-flex justify-content-between">
+      <div className="d-flex justify-content-between flex-wrap">
        <FilterMenuToggle />
        <SearchControls />
      </div>
--- a/src/data/constants/app.js
+++ b/src/data/constants/app.js
@@ -1,7 +1,4 @@
 import { StrictDict } from 'utils';
-import { getConfig } from '@edx/frontend-platform';
-
-export const routePath = `${getConfig().PUBLIC_PATH}:courseId`;

 export const views = StrictDict({
  grades: 'grades',
Author	SHA1	Message	Date
Stanislav Lunyachek	706d0ba36b	fix: Fix rows counter in the Edit Grade modal window	2025-01-26 21:34:11 +05:30
Max Sokolski	aa2b1a56bc	Merge pull request #386 from DmytroAlipov/fix-second-opening-grade-quince fix: "An unexpected error occurred" after second opening any grade	2024-04-09 14:11:57 +03:00
Adolfo R. Brandes	e795163aa6	Merge pull request #370 from raccoongang/fix/fix-responsive-issues-quince fix: fix sidebar scrolling and adaptation for mobile	2024-04-03 15:27:59 -03:00
Dima Alipov	bd25b6b4d0	fix: "An unexpected error occurred" after second opening any grade	2024-03-16 18:26:24 +02:00
Adolfo R. Brandes	acdad5af00	Merge pull request #376 from arbrandes/fix-route-quince [Quince backport] fix: Route with PUBLIC_PATH	2023-12-10 20:47:54 -03:00
Adolfo R. Brandes	ba9fb375d9	fix: Route with PUBLIC_PATH Prior to this change, the MFE would fail to render with any PUBLIC_PATH set. Because that is now handled entirely by `frontend-platform`, we can avoid referring to PUBLIC_PATH entirely, here.	2023-12-08 16:27:28 -03:00
ihor-romaniuk	f303712830	fix: fix sidebar scrolling and adaptation for mobile - fix text overload in heading - fix appearance for sidebar with a short main content - fix transformation of search and filter button on mobile - fix extra empty space below main content table - fix adaptation modal content to mobile view	2023-10-27 10:34:00 +03:00
Syed Ali Abbas Zaidi	b536180a3e	chore: bump frontend-platform (#356 )	2023-10-18 11:22:51 +05:00