EPMRPP-79223, EPMRPP-79899 || fix: move to separate component

app/src/pages/inside/projectSettingsPageContainer/content/defectTypes/defectTypes.jsx

@@ -38,10 +38,10 @@ import {
   MAX_DEFECT_TYPES_COUNT,
   WARNING_DEFECT_TYPES_COUNT,
 } from 'pages/inside/projectSettingsPageContainer/content/defectTypes/constants';
-import { CenteredContainerForPage } from 'pages/inside/projectSettingsPageContainer';
 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';
@@ -146,7 +146,7 @@ export const DefectTypes = ({ setHeaderTitleNode }) => {
   }, [defectTypes, canAddNewDefectType, isEditable]);
 
   return (
-    <CenteredContainerForPage>
+    <SettingsPageContent>
       <TabDescription>{formatMessage(messages.description)}</TabDescription>
       <Divider />
       {(isInformationMessage || !canAddNewDefectType) && (
@@ -219,7 +219,7 @@ export const DefectTypes = ({ setHeaderTitleNode }) => {
           );
         })}
       </div>
-    </CenteredContainerForPage>
+    </SettingsPageContent>
   );
 };
 DefectTypes.propTypes = {

app/src/pages/inside/projectSettingsPageContainer/content/notifications/notifications.jsx

@@ -32,7 +32,6 @@ import { isEmailIntegrationAvailableSelector } from 'controllers/plugins';
 import { showModalAction } from 'controllers/modal';
 import { activeProjectRoleSelector, userAccountRoleSelector } from 'controllers/user';
 import { EmptyStatePage } from 'pages/inside/projectSettingsPageContainer/content/emptyStatePage';
-import { CenteredContainerForPage } from 'pages/inside/projectSettingsPageContainer';
 import { Button } from 'componentLibrary/button';
 import { Checkbox } from 'componentLibrary/checkbox';
 import {
@@ -47,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';
@@ -225,7 +225,7 @@ export const Notifications = ({ setHeaderTitleNode }) => {
   return (
     <>
       {notifications.length ? (
-        <CenteredContainerForPage>
+        <SettingsPageContent>
           <Layout description={formatMessage(messages.tabDescription)}>
             <FieldElement
               withoutProvider
@@ -252,7 +252,7 @@ export const Notifications = ({ setHeaderTitleNode }) => {
               dataAutomationId="notificationsRulesList"
             />
           </div>
-        </CenteredContainerForPage>
+        </SettingsPageContent>
       ) : (
         <EmptyStatePage
           title={formatMessage(messages.noItemsMessage)}

app/src/pages/inside/projectSettingsPageContainer/content/patternAnalysis/patternAnalysis.jsx

@@ -25,7 +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 { CenteredContainerForPage } from 'pages/inside/projectSettingsPageContainer';
+import { SettingsPageContent } from '../settingsPageContent';
 import { PatternAnalysisContent } from './patternAnalysisContent';
 import { EmptyStatePage } from '../emptyStatePage/';
 import { messages } from './messages';
@@ -67,14 +67,14 @@ export const PatternAnalysis = ({ setHeaderTitleNode }) => {
   return (
     <>
       {patterns.length > 0 ? (
-        <CenteredContainerForPage>
+        <SettingsPageContent>
           <PatternAnalysisContent
             setHeaderTitleNode={setHeaderTitleNode}
             onAddPattern={onAddPattern}
             patterns={patterns}
             disabled={!isAbleToCreate}
           />
-        </CenteredContainerForPage>
+        </SettingsPageContent>
       ) : (
         <EmptyStatePage
           title={formatMessage(messages.noPatternAnalysisTitle)}

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,
+};

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;
+}

app/src/pages/inside/projectSettingsPageContainer/index.js

@@ -14,7 +14,4 @@
  * limitations under the License.
  */
 
-export {
-  ProjectSettingsPageContainer,
-  CenteredContainerForPage,
-} from './projectSettingsPageContainer';
+export { ProjectSettingsPageContainer } from './projectSettingsPageContainer';

app/src/pages/inside/projectSettingsPageContainer/projectSettingsPageContainer.jsx

@@ -17,7 +17,6 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { FormattedMessage, useIntl } from 'react-intl';
-import PropTypes from 'prop-types';
 import classNames from 'classnames/bind';
 import {
   PROJECT_SETTINGS_TAB_PAGE,
@@ -200,10 +199,3 @@ export const ProjectSettingsPageContainer = () => {
     </SettingsLayout>
   );
 };
-
-export const CenteredContainerForPage = ({ children }) => (
-  <div className={cx('centred-content')}>{children}</div>
-);
-CenteredContainerForPage.propTypes = {
-  children: PropTypes.node.isRequired,
-};

app/src/pages/inside/projectSettingsPageContainer/projectSettingsPageContainer.scss

@@ -25,8 +25,3 @@ $Z-INDEX-PAGE-CONTAINER-HEADER: 2;
 .content {
   padding: 33px 32px 60px;
 }
-
-.centred-content {
-  margin: 0 auto;
-  max-width: 1200px;
-}