From d104eb433af2749a494c43abe2f5b2dc1e3c90d9 Mon Sep 17 00:00:00 2001
From: AndreiShumski2 <andrei_shumski2@epam.com>
Date: Tue, 12 Oct 2021 10:40:53 +0300
Subject: [PATCH] STSMACOM-544 Config Manager keyboard shortcuts

---
 CHANGELOG.md                    |  1 +
 lib/ConfigManager/ConfigForm.js | 43 ++++++++++++++++++++++++---------
 2 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 24171cd1d..c1d130723 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ## [7.0.1] (IN PROGRESS)
 
 * Add disabled prop for `<LocationLookup>` component.
+* Config Manager | Apply baseline keyboard shortcuts. Refs STSMACOM-544.
 
 ## [7.0.0](https://github.com/folio-org/stripes-smart-components/tree/v7.0.0) (2021-09-27)
 [Full Changelog](https://github.com/folio-org/stripes-smart-components/compare/v6.1.0...v7.0.0)
diff --git a/lib/ConfigManager/ConfigForm.js b/lib/ConfigManager/ConfigForm.js
index f5432edbd..9f0c6ff17 100644
--- a/lib/ConfigManager/ConfigForm.js
+++ b/lib/ConfigManager/ConfigForm.js
@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import {
   Button,
+  checkScope,
+  HasCommand,
   Pane,
   PaneFooter,
 } from '@folio/stripes-components';
@@ -18,6 +20,19 @@ const ConfigForm = (props) => {
     children,
   } = props;
 
+  const shortcuts = [
+    {
+      name: 'save',
+      handler: e => {
+        e.preventDefault();
+
+        if (!(pristine || submitting)) {
+          handleSubmit();
+        }
+      },
+    },
+  ];
+
   const footer = (
     <PaneFooter
       renderEnd={(
@@ -35,19 +50,25 @@ const ConfigForm = (props) => {
   );
 
   return (
-    <form
-      id="config-form"
-      onSubmit={handleSubmit}
-      className={styles.configForm}
+    <HasCommand
+      commands={shortcuts}
+      isWithinScope={checkScope}
+      scope={document.body}
     >
-      <Pane
-        defaultWidth="fill"
-        paneTitle={label}
-        footer={footer}
+      <form
+        id="config-form"
+        onSubmit={handleSubmit}
+        className={styles.configForm}
       >
-        {children}
-      </Pane>
-    </form>
+        <Pane
+          defaultWidth="fill"
+          paneTitle={label}
+          footer={footer}
+        >
+          {children}
+        </Pane>
+      </form>
+    </HasCommand>
   );
 };