Merge branch 'develop'

Author: tuj

CHANGELOG.md

@@ -4,6 +4,13 @@ All notable changes to this project will be documented in this file.
 
 ## [Unreleased]
 
+## [1.5.0] - 2023-10-26
+
+- [#221](https://github.com/os2display/display-admin-client/pull/221)
+  - Fixed missing pagination button in drag-and-drop-table.
+- [#214](https://github.com/os2display/display-admin-client/pull/214)
+  - Use OIDC Code authorization flow and remove React StrictMode.
+
 ## [1.4.0] - 2023-09-14
 
 - [#210](https://github.com/os2display/display-admin-client/pull/210)

src/components/user/login.jsx

@@ -130,19 +130,19 @@ function Login() {
 
   useEffect(() => {
     let isMounted = true;
-    let idToken = null;
+    let code = null;
     let state = null;
 
     if (search) {
       const query = queryString.parse(search);
-      idToken = query.id_token;
+      code = query.code;
       state = query.state;
     }
 
     ConfigLoader.loadConfig().then((config) => {
-      if (state && idToken) {
+      if (state && code) {
         fetch(
-          `${config.api}v1/authentication/oidc/token?state=${state}&id_token=${idToken}`,
+          `${config.api}v1/authentication/oidc/token?state=${state}&code=${code}`,
           {
             mode: "cors",
             credentials: "include",

src/components/util/drag-and-drop-table/drag-and-drop-table.jsx

@@ -10,10 +10,6 @@ import ColumnProptypes from "../../proptypes/column-proptypes";
 import PaginationButton from "../forms/multiselect-dropdown/pagination-button";
 import "./drag-and-drop-table.scss";
 
-// Drag and drop component (react-beautiful-dnd) is replaced with hello-pangea/dnd,
-// because the drag and drop component does not work with react 18
-// https://github.com/atlassian/react-beautiful-dnd/issues/2350
-// If it some day works with react, we should consider changing it back
 /**
  * @param {object} props The props.
  * @param {Array} props.columns The columns for the table.
@@ -126,7 +122,7 @@ function DragAndDropTable({
                   {data.map((item, index) => (
                     <Draggable
                       key={item["@id"]}
-                      draggableId={item.title}
+                      draggableId={item["@id"]}
                       index={index}
                     >
                       {(providedDraggable, providedSnapshot) => (
@@ -164,7 +160,7 @@ function DragAndDropTable({
       <Row>
         <Col>
           {totalItems > data.length && (
-            <PaginationButton label={label} callback={callback} />
+            <PaginationButton label={label} callback={callback} showButton />
           )}
         </Col>
       </Row>
@@ -184,4 +180,5 @@ DragAndDropTable.propTypes = {
   callback: PropTypes.func.isRequired,
   totalItems: PropTypes.number.isRequired,
 };
+
 export default DragAndDropTable;

src/index.js

@@ -10,10 +10,8 @@ const root = createRoot(container);
 
 root.render(
   <Provider store={store}>
-    <React.StrictMode>
-      <BrowserRouter basename="/admin">
-        <App />
-      </BrowserRouter>
-    </React.StrictMode>
+    <BrowserRouter basename="/admin">
+      <App />
+    </BrowserRouter>
   </Provider>
 );