From ff7ef464e6d48ce25a739823c03b3dfaa0fcb2c6 Mon Sep 17 00:00:00 2001
From: Alexander <Alexander_Krasovsky@epam.com>
Date: Tue, 27 Dec 2022 11:56:26 +0300
Subject: [PATCH] EPMRPP-79223 || add max-width and change onClick target
 integration item (#3363)

* EPMRPP-79223 || add max-width and change onClick target integration item

* EPMRPP-79223 || fix: add fill color on arrow if hover item

* EPMRPP-79223, EPMRPP-79899 || fix: create container component

* EPMRPP-79223, EPMRPP-79899 || fix: small formatting

* EPMRPP-79223, EPMRPP-79899 || fix: move to separate component
---
 .../content/defectTypes/defectTypes.jsx       |  5 ++--
 .../content/integrations/integrations.jsx     | 10 +++----
 .../content/integrations/integrations.scss    |  7 -----
 .../integrationCollectionItem.jsx             |  6 ++--
 .../integrationCollectionItem.scss            | 13 +++++----
 .../integrationsList/integrationsList.scss    |  1 +
 .../content/notifications/notifications.jsx   |  5 ++--
 .../patternAnalysis/patternAnalysis.jsx       | 15 ++++++----
 .../content/settingsPageContent.jsx           | 29 +++++++++++++++++++
 .../content/settingsPageContent.scss          | 20 +++++++++++++
 10 files changed, 79 insertions(+), 32 deletions(-)
 create mode 100644 app/src/pages/inside/projectSettingsPageContainer/content/settingsPageContent.jsx
 create mode 100644 app/src/pages/inside/projectSettingsPageContainer/content/settingsPageContent.scss

diff --git a/app/src/pages/inside/projectSettingsPageContainer/content/defectTypes/defectTypes.jsx b/app/src/pages/inside/projectSettingsPageContainer/content/defectTypes/defectTypes.jsx
index 872d5a3264..295479e32e 100644
--- a/app/src/pages/inside/projectSettingsPageContainer/content/defectTypes/defectTypes.jsx
+++ b/app/src/pages/inside/projectSettingsPageContainer/content/defectTypes/defectTypes.jsx
@@ -41,6 +41,7 @@ import {
 import { SystemMessage } from 'componentLibrary/systemMessage';
 import { COMMON_LOCALE_KEYS } from 'common/constants/localization';
 import { PROJECT_SETTINGS_DEFECT_TYPES_EVENTS } from 'analyticsEvents/projectSettingsPageEvents';
+import { SettingsPageContent } from '../settingsPageContent';
 import { DefectTypeRow } from './defectTypeRow';
 import { messages } from './defectTypesMessages';
 import styles from './defectTypes.scss';
@@ -145,7 +146,7 @@ export const DefectTypes = ({ setHeaderTitleNode }) => {
   }, [defectTypes, canAddNewDefectType, isEditable]);
 
   return (
-    <>
+    <SettingsPageContent>
       <TabDescription>{formatMessage(messages.description)}</TabDescription>
       <Divider />
       {(isInformationMessage || !canAddNewDefectType) && (
@@ -218,7 +219,7 @@ export const DefectTypes = ({ setHeaderTitleNode }) => {
           );
         })}
       </div>
-    </>
+    </SettingsPageContent>
   );
 };
 DefectTypes.propTypes = {
diff --git a/app/src/pages/inside/projectSettingsPageContainer/content/integrations/integrations.jsx b/app/src/pages/inside/projectSettingsPageContainer/content/integrations/integrations.jsx
index d6f39d7565..c545d32e7e 100644
--- a/app/src/pages/inside/projectSettingsPageContainer/content/integrations/integrations.jsx
+++ b/app/src/pages/inside/projectSettingsPageContainer/content/integrations/integrations.jsx
@@ -83,12 +83,10 @@ export const Integrations = () => {
       {query.subPage && !!Object.keys(plugin).length ? (
         <IntegrationInfo goBackHandler={goBackHandler} data={plugin} integrationId={query.id} />
       ) : (
-        <div className={cx('integrations')}>
-          <IntegrationsList
-            availableIntegrations={availableGroupedPlugins}
-            onItemClick={onItemClick}
-          />
-        </div>
+        <IntegrationsList
+          availableIntegrations={availableGroupedPlugins}
+          onItemClick={onItemClick}
+        />
       )}
     </>
   );
diff --git a/app/src/pages/inside/projectSettingsPageContainer/content/integrations/integrations.scss b/app/src/pages/inside/projectSettingsPageContainer/content/integrations/integrations.scss
index 14c8c868fe..ecc32e9bb8 100644
--- a/app/src/pages/inside/projectSettingsPageContainer/content/integrations/integrations.scss
+++ b/app/src/pages/inside/projectSettingsPageContainer/content/integrations/integrations.scss
@@ -14,13 +14,6 @@
  * limitations under the License.
  */
 
-.integrations {
-  margin-left: 49px;
-  @media (max-width: $SCREEN_XS_MAX) {
-    margin-left: 0;
-  }
-}
-
 .preloader {
   position: absolute;
   top: 50%;
diff --git a/app/src/pages/inside/projectSettingsPageContainer/content/integrations/integrationsList/integrationInfo/integrationCollection/integrationCollectionItem/integrationCollectionItem.jsx b/app/src/pages/inside/projectSettingsPageContainer/content/integrations/integrationsList/integrationInfo/integrationCollection/integrationCollectionItem/integrationCollectionItem.jsx
index 280fe71d79..3957120dbe 100644
--- a/app/src/pages/inside/projectSettingsPageContainer/content/integrations/integrationsList/integrationInfo/integrationCollection/integrationCollectionItem/integrationCollectionItem.jsx
+++ b/app/src/pages/inside/projectSettingsPageContainer/content/integrations/integrationsList/integrationInfo/integrationCollection/integrationCollectionItem/integrationCollectionItem.jsx
@@ -63,7 +63,7 @@ export const IntegrationCollectionItem = ({
     openIntegration(item);
   };
   return (
-    <li className={cx('instances-list-item', { disabled })}>
+    <li onClick={itemClickHandler} role="row" className={cx('instances-list-item', { disabled })}>
       <div className={cx('item-data')}>
         <div className={cx('general-info')}>
           <h4 className={cx('integration-name')}>{title}</h4>
@@ -78,9 +78,7 @@ export const IntegrationCollectionItem = ({
         </span>
       </div>
 
-      <div onClick={itemClickHandler} className={cx('arrow-control')}>
-        {Parser(ArrowIcon)}
-      </div>
+      <div className={cx('arrow-control')}>{Parser(ArrowIcon)}</div>
     </li>
   );
 };
diff --git a/app/src/pages/inside/projectSettingsPageContainer/content/integrations/integrationsList/integrationInfo/integrationCollection/integrationCollectionItem/integrationCollectionItem.scss b/app/src/pages/inside/projectSettingsPageContainer/content/integrations/integrationsList/integrationInfo/integrationCollection/integrationCollectionItem/integrationCollectionItem.scss
index e93e61175b..b42bb435ba 100644
--- a/app/src/pages/inside/projectSettingsPageContainer/content/integrations/integrationsList/integrationInfo/integrationCollection/integrationCollectionItem/integrationCollectionItem.scss
+++ b/app/src/pages/inside/projectSettingsPageContainer/content/integrations/integrationsList/integrationInfo/integrationCollection/integrationCollectionItem/integrationCollectionItem.scss
@@ -26,12 +26,20 @@
   border-radius: 8px;
   background-color: $COLOR--bg-000;
   margin-bottom: 8px;
+  cursor: pointer;
 
   &:hover {
     box-shadow: $BOX_SHADOW--item-hover;
+    .arrow-control {
+      svg {
+        fill: $COLOR--e-400;
+      }
+    }
   }
 
   &.disabled {
+    cursor: default;
+
     .integration-name {
       opacity: 0.4;
     }
@@ -84,15 +92,10 @@
 .arrow-control {
   width: 16px;
   height: 16px;
-  cursor: pointer;
 
   svg {
     fill: $COLOR--e-300;
 
-    &:hover {
-      fill: $COLOR--e-400;
-    }
-
     &:active {
       fill: $COLOR--e-200;
     }
diff --git a/app/src/pages/inside/projectSettingsPageContainer/content/integrations/integrationsList/integrationsList.scss b/app/src/pages/inside/projectSettingsPageContainer/content/integrations/integrationsList/integrationsList.scss
index 50bc1de76c..2329619ab8 100644
--- a/app/src/pages/inside/projectSettingsPageContainer/content/integrations/integrationsList/integrationsList.scss
+++ b/app/src/pages/inside/projectSettingsPageContainer/content/integrations/integrationsList/integrationsList.scss
@@ -21,6 +21,7 @@
 .integrations-list {
   display: flex;
   flex-direction: column;
+  align-items: center;
 }
 
 .integrations-group {
diff --git a/app/src/pages/inside/projectSettingsPageContainer/content/notifications/notifications.jsx b/app/src/pages/inside/projectSettingsPageContainer/content/notifications/notifications.jsx
index 400c03b44c..de4bf3670a 100644
--- a/app/src/pages/inside/projectSettingsPageContainer/content/notifications/notifications.jsx
+++ b/app/src/pages/inside/projectSettingsPageContainer/content/notifications/notifications.jsx
@@ -46,6 +46,7 @@ import { SpinningPreloader } from 'components/preloaders/spinningPreloader';
 import { PROJECT_SETTINGS_NOTIFICATIONS_EVENTS } from 'analyticsEvents/projectSettingsPageEvents';
 import { RuleList, FieldElement, NotificationRuleContent } from '../elements';
 import { Layout } from '../layout';
+import { SettingsPageContent } from '../settingsPageContent';
 import styles from './notifications.scss';
 import { DEFAULT_CASE_CONFIG } from './constants';
 import { convertNotificationCaseForSubmission } from './utils';
@@ -224,7 +225,7 @@ export const Notifications = ({ setHeaderTitleNode }) => {
   return (
     <>
       {notifications.length ? (
-        <>
+        <SettingsPageContent>
           <Layout description={formatMessage(messages.tabDescription)}>
             <FieldElement
               withoutProvider
@@ -251,7 +252,7 @@ export const Notifications = ({ setHeaderTitleNode }) => {
               dataAutomationId="notificationsRulesList"
             />
           </div>
-        </>
+        </SettingsPageContent>
       ) : (
         <EmptyStatePage
           title={formatMessage(messages.noItemsMessage)}
diff --git a/app/src/pages/inside/projectSettingsPageContainer/content/patternAnalysis/patternAnalysis.jsx b/app/src/pages/inside/projectSettingsPageContainer/content/patternAnalysis/patternAnalysis.jsx
index 0c596dc979..7154d5fc35 100644
--- a/app/src/pages/inside/projectSettingsPageContainer/content/patternAnalysis/patternAnalysis.jsx
+++ b/app/src/pages/inside/projectSettingsPageContainer/content/patternAnalysis/patternAnalysis.jsx
@@ -25,6 +25,7 @@ import { useIntl } from 'react-intl';
 import { canUpdateSettings } from 'common/utils/permissions';
 import { activeProjectRoleSelector, userAccountRoleSelector } from 'controllers/user';
 import PropTypes from 'prop-types';
+import { SettingsPageContent } from '../settingsPageContent';
 import { PatternAnalysisContent } from './patternAnalysisContent';
 import { EmptyStatePage } from '../emptyStatePage/';
 import { messages } from './messages';
@@ -66,12 +67,14 @@ export const PatternAnalysis = ({ setHeaderTitleNode }) => {
   return (
     <>
       {patterns.length > 0 ? (
-        <PatternAnalysisContent
-          setHeaderTitleNode={setHeaderTitleNode}
-          onAddPattern={onAddPattern}
-          patterns={patterns}
-          disabled={!isAbleToCreate}
-        />
+        <SettingsPageContent>
+          <PatternAnalysisContent
+            setHeaderTitleNode={setHeaderTitleNode}
+            onAddPattern={onAddPattern}
+            patterns={patterns}
+            disabled={!isAbleToCreate}
+          />
+        </SettingsPageContent>
       ) : (
         <EmptyStatePage
           title={formatMessage(messages.noPatternAnalysisTitle)}
diff --git a/app/src/pages/inside/projectSettingsPageContainer/content/settingsPageContent.jsx b/app/src/pages/inside/projectSettingsPageContainer/content/settingsPageContent.jsx
new file mode 100644
index 0000000000..a2dfdf91e0
--- /dev/null
+++ b/app/src/pages/inside/projectSettingsPageContainer/content/settingsPageContent.jsx
@@ -0,0 +1,29 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import PropTypes from 'prop-types';
+import classNames from 'classnames/bind';
+
+import styles from './settingsPageContent.scss';
+
+const cx = classNames.bind(styles);
+
+export const SettingsPageContent = ({ children }) => (
+  <div className={cx('settings-page-content')}>{children}</div>
+);
+SettingsPageContent.propTypes = {
+  children: PropTypes.node.isRequired,
+};
diff --git a/app/src/pages/inside/projectSettingsPageContainer/content/settingsPageContent.scss b/app/src/pages/inside/projectSettingsPageContainer/content/settingsPageContent.scss
new file mode 100644
index 0000000000..25acaa4655
--- /dev/null
+++ b/app/src/pages/inside/projectSettingsPageContainer/content/settingsPageContent.scss
@@ -0,0 +1,20 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.settings-page-content {
+  margin: 0 auto;
+  max-width: 1200px;
+}