UIREQMED-2: Add pages: Confirm item arrival, Mediated requests actions and Send item in transit

Author: Dmitriy-Litvinenko

CHANGELOG.md

@@ -1,7 +1,7 @@
 # Change history for ui-requests-mediated
 
 ## 1.1.0 (IN PROGRESS)
-
+* Add landing page actions: Confirm item arrival, Mediated requests actions and Send item in transit. Refs UIREQMED-2.
 
 ## 1.0.0
 

README.md

@@ -4,16 +4,6 @@ Copyright (C) 2023 The Open Library Foundation
 
 This software is distributed under the terms of the Apache License, Version 2.0. See the file "[LICENSE](LICENSE)" for more information.
 
-## Introduction
-
-Congratulations on creating a new Stripes UI app module!  Follow the instructions below to run ui-requests-mediated and start your development.
-
-TODO: Modify this README to replace these sections about getting started.
-
-## Prerequisites
-
-In order to view and log into the platform being served up, a suitable Okapi backend will need to be running. The [testing-backend](https://app.vagrantup.com/folio/boxes/testing-backend) Vagrant box should work if your app does not yet have its own backend module.
-
 ## Run your new app
 
 Run the following from the ui-requests-mediated directory to serve your new app using a development server:
@@ -35,18 +25,19 @@ stripes serve --okapi http://my-okapi.example.com:9130 --tenant my-tenant-id
 
 Run the included UI tests with the following command:
 ```
-stripes test karma
+yarn run test:jest"
 ```
 
-## What to do next?
-
-Now that your new app is running, search the code for "`new-app`" to find comments and subbed placeholders that may need your attention.
+## Introduction
 
-Please remove or customize the sample strings in `en.json` (lines 3-10) before merging this file to master; the translators do not need to be providing translations for these sample strings.
+This is a [Stripes](https://github.com/folio-org/stripes-core/) UI module
+for making requests on items.
 
-Read the [Stripes Module Developer's Guide](https://github.com/folio-org/stripes/blob/master/doc/dev-guide.md).
+## Additional information
 
-When your new UI app is ready and being built by CI, then adjust its Jenkinsfile to remove the `npmDeploy = 'no'` parameter (which is then superfluous).
+Other [modules](https://dev.folio.org/source-code/#client-side).
 
-TODO: Modify this README to replace these sections about getting started, link to your issue tracker, etc.
+See project [UIREQMED](https://issues.folio.org/browse/UIREQMED)
+at the [FOLIO issue tracker](https://dev.folio.org/guidelines/issue-tracker).
 
+Other FOLIO Developer documentation is at [dev.folio.org](https://dev.folio.org/)

package.json

@@ -42,7 +42,8 @@
     "regenerator-runtime": "^0.13.3"
   },
   "dependencies": {
-    "prop-types": "^15.6.0"
+    "prop-types": "^15.6.0",
+    "react-router-prop-types": "^1.0.4"
   },
   "peerDependencies": {
     "@folio/stripes": "^9.0.0",
@@ -79,6 +80,39 @@
           "settings.enabled"
         ],
         "visible": true
+      },
+      {
+        "permissionName": "ui-requests-mediated.view",
+        "displayName": "Mediated requests: View",
+        "subPermissions": [
+          "module.requests-mediated.enabled",
+          "settings.requests-mediated.enabled"
+        ],
+        "visible": true
+      },
+      {
+        "permissionName": "ui-requests-mediated.view-create",
+        "displayName": "Mediated requests: View, create",
+        "subPermissions": [
+          "ui-requests-mediated.view"
+        ],
+        "visible": true
+      },
+      {
+        "permissionName": "ui-requests-mediated.view-create-edit",
+        "displayName": "Mediated requests: View, create, edit",
+        "subPermissions": [
+          "ui-requests-mediated.view-create"
+        ],
+        "visible": true
+      },
+      {
+        "permissionName": "ui-requests-mediated.all",
+        "displayName": "Mediated requests: All permissions",
+        "subPermissions": [
+          "ui-requests-mediated.view-create-edit"
+        ],
+        "visible": true
       }
     ]
   }

src/components/ConfirmItemArrival/ConfirmItemArrival.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import ReactRouterPropTypes from 'react-router-prop-types';
+import { FormattedMessage } from 'react-intl';
+
+import {
+  Pane,
+  Paneset,
+} from '@folio/stripes/components';
+
+import NavigationMenu from '../NavigationMenu';
+
+import {
+  FILTER_PANE_WIDTH,
+  getConfirmItemArrivalUrl,
+} from '../../constants';
+
+export default class ConfirmItemArrival extends React.Component {
+  static propTypes = {
+    history: ReactRouterPropTypes.history.isRequired,
+    location: ReactRouterPropTypes.location.isRequired,
+  };
+
+  render() {
+    const {
+      history,
+      location,
+    } = this.props;
+
+    return (
+      <Paneset data-testid="confirmItemArrivalPaneSet">
+        <Pane
+          data-testid="confirmItemArrivalPane"
+          defaultWidth={FILTER_PANE_WIDTH}
+          paneTitle={<FormattedMessage id="ui-requests-mediated.app.filterPane.selectActivity" />}
+        >
+          <NavigationMenu
+            history={history}
+            location={location}
+            value={getConfirmItemArrivalUrl()}
+          />
+        </Pane>
+        <Pane
+          defaultWidth="fill"
+          paneTitle={<FormattedMessage id="ui-requests-mediated.app.confirmItemArrival.paneTitle" />}
+        />
+      </Paneset>
+    );
+  }
+}

src/components/ConfirmItemArrival/ConfirmItemArrival.test.js

@@ -0,0 +1,35 @@
+import {
+  render,
+  screen,
+  cleanup,
+} from '@folio/jest-config-stripes/testing-library/react';
+
+import ConfirmItemArrival from './ConfirmItemArrival';
+
+const testIds = {
+  confirmItemArrivalPaneSet: 'confirmItemArrivalPaneSet',
+  confirmItemArrivalPane: 'confirmItemArrivalPane',
+};
+const labelIds = {
+  paneTitle: 'ui-requests-mediated.app.confirmItemArrival.paneTitle',
+};
+
+describe('ConfirmItemArrival', () => {
+  beforeEach(() => {
+    render(<ConfirmItemArrival />);
+  });
+
+  afterEach(cleanup);
+
+  it('should render pane set', () => {
+    expect(screen.getByTestId(testIds.confirmItemArrivalPaneSet)).toBeInTheDocument();
+  });
+
+  it('should render pane', () => {
+    expect(screen.getByTestId(testIds.confirmItemArrivalPane)).toBeInTheDocument();
+  });
+
+  it('should render pane title', () => {
+    expect(screen.getByText(labelIds.paneTitle)).toBeVisible();
+  });
+});

src/components/ConfirmItemArrival/index.js

@@ -0,0 +1 @@
+export { default } from './ConfirmItemArrival';

src/components/MediatedRequestsActions/MediatedRequestsActions.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import ReactRouterPropTypes from 'react-router-prop-types';
+import { FormattedMessage } from 'react-intl';
+
+import {
+  AppIcon,
+} from '@folio/stripes/core';
+
+import {
+  Pane,
+  Paneset,
+} from '@folio/stripes/components';
+
+import NavigationMenu from '../NavigationMenu';
+
+import {
+  APP_ICON_NAME,
+  FILTER_PANE_WIDTH,
+  getMediatedRequestsActionsUrl,
+} from '../../constants';
+
+export default class MediatedRequestsActions extends React.Component {
+  static propTypes = {
+    history: ReactRouterPropTypes.history.isRequired,
+    location: ReactRouterPropTypes.location.isRequired,
+  };
+
+  render() {
+    const {
+      history,
+      location,
+    } = this.props;
+
+    return (
+      <Paneset data-testid="mediatedRequestsActionsPaneSet">
+        <Pane
+          data-testid="mediatedRequestsActionPane"
+          defaultWidth={FILTER_PANE_WIDTH}
+          paneTitle={<FormattedMessage id="ui-requests-mediated.app.filterPane.selectActivity" />}
+        >
+          <NavigationMenu
+            history={history}
+            location={location}
+            value={getMediatedRequestsActionsUrl()}
+          />
+        </Pane>
+        <Pane
+          defaultWidth="fill"
+          appIcon={<AppIcon app={APP_ICON_NAME} />}
+          paneTitle={<FormattedMessage id="ui-requests-mediated.app.mediatedRequestsActions.paneTitle" />}
+        />
+      </Paneset>
+    );
+  }
+}

src/components/MediatedRequestsActions/MediatedRequestsActions.test.js

@@ -0,0 +1,35 @@
+import {
+  render,
+  screen,
+  cleanup,
+} from '@folio/jest-config-stripes/testing-library/react';
+
+import MediatedRequestsActions from './MediatedRequestsActions';
+
+const testIds = {
+  mediatedRequestsActionsPaneSet: 'mediatedRequestsActionsPaneSet',
+  mediatedRequestsActionPane: 'mediatedRequestsActionPane',
+};
+const labelIds = {
+  paneTitle: 'ui-requests-mediated.app.mediatedRequestsActions.paneTitle',
+};
+
+describe('MediatedRequests', () => {
+  beforeEach(() => {
+    render(<MediatedRequestsActions />);
+  });
+
+  afterEach(cleanup);
+
+  it('should render pane set', () => {
+    expect(screen.getByTestId(testIds.mediatedRequestsActionsPaneSet)).toBeInTheDocument();
+  });
+
+  it('should render pane', () => {
+    expect(screen.getByTestId(testIds.mediatedRequestsActionPane)).toBeInTheDocument();
+  });
+
+  it('should render pane title', () => {
+    expect(screen.getByText(labelIds.paneTitle)).toBeVisible();
+  });
+});

src/components/MediatedRequestsActions/index.js

@@ -0,0 +1 @@
+export { default } from './MediatedRequestsActions';

src/components/NavigationMenu/NavigationMenu.css

@@ -0,0 +1,4 @@
+.separator {
+  border-bottom: 1px solid var(--color-border-p2);
+  margin-bottom: 1rem;
+}