EPMRPP-79223 || add max-width and change onClick target integration i…

…tem (#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
reportportal · Dec 27, 2022 · ff7ef46 · ff7ef46
1 parent 8f44797
commit ff7ef46
Show file tree

Hide file tree

Showing 10 changed files with 79 additions and 32 deletions.
diff --git 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
@@ -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
@@ -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/...grationInfo/integrationCollection/integrationCollectionItem/integrationCollectionItem.jsx b/...grationInfo/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/...rationInfo/integrationCollection/integrationCollectionItem/integrationCollectionItem.scss b/...rationInfo/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/.../projectSettingsPageContainer/content/integrations/integrationsList/integrationsList.scss b/.../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
@@ -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/...src/pages/inside/projectSettingsPageContainer/content/patternAnalysis/patternAnalysis.jsx b/...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
@@ -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
@@ -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;
+}