EPMRPP-76489 || add project settings layout

app/src/layouts/appLayout/appLayout.jsx

@@ -22,19 +22,26 @@ import { AppHeader } from './appHeader';
 import { AppSidebar } from './appSidebar';
 import { DemoBanner } from './demoBanner';
 
-const AppLayoutComponent = ({ children, isDemoInstance }) => (
-  <Layout Header={AppHeader} Sidebar={AppSidebar} Banner={isDemoInstance ? DemoBanner : null}>
+const AppLayoutComponent = ({ children, isDemoInstance, rawContent }) => (
+  <Layout
+    Header={AppHeader}
+    Sidebar={AppSidebar}
+    Banner={isDemoInstance ? DemoBanner : null}
+    rawContent={rawContent}
+  >
     {children}
   </Layout>
 );
 
 AppLayoutComponent.propTypes = {
   children: PropTypes.node,
   isDemoInstance: PropTypes.bool,
+  rawContent: PropTypes.bool,
 };
 AppLayoutComponent.defaultProps = {
   children: null,
   isDemoInstance: false,
+  rawContent: false,
 };
 
 export const AppLayout = connect((state) => ({

app/src/layouts/appLayout/rawContentAppLayout/index.js

@@ -0,0 +1,17 @@
+/*
+ * 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.
+ */
+
+export { RawContentAppLayout } from './rawContentAppLayout';

app/src/layouts/appLayout/rawContentAppLayout/rawContentAppLayout.jsx

@@ -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.
+ */
+
+import React from 'react';
+import { AppLayout } from '../appLayout';
+
+export const RawContentAppLayout = (props) => <AppLayout {...props} rawContent />;

app/src/layouts/common/layout/layout.jsx

@@ -28,12 +28,14 @@ export class Layout extends Component {
     Banner: PropTypes.elementType,
     Header: PropTypes.elementType,
     Sidebar: PropTypes.elementType,
+    rawContent: PropTypes.bool,
   };
   static defaultProps = {
     children: null,
     Banner: null,
     Header: null,
     Sidebar: null,
+    rawContent: false,
   };
 
   state = {
@@ -79,7 +81,18 @@ export class Layout extends Component {
   };
 
   render() {
-    const { Header, Sidebar, Banner } = this.props;
+    const { Header, Sidebar, Banner, rawContent, children } = this.props;
+    const header = (
+      <div className={cx('header-container')}>
+        {Header && (
+          <Header
+            isSideMenuOpened={this.state.sideMenuOpened}
+            toggleSideMenu={this.toggleSideMenu}
+          />
+        )}
+      </div>
+    );
+
     return (
       <div className={cx('layout')}>
         <div className={cx('slide-container', { 'side-menu-opened': this.state.sideMenuOpened })}>
@@ -95,24 +108,24 @@ export class Layout extends Component {
           </div>
           <div className={cx('content')}>
             {Banner && <Banner />}
-            <ScrollWrapper
-              withBackToTop
-              withFooter
-              resetRequired={this.state.resetScroll}
-              onReset={this.unmarkScrollToReset}
-            >
-              <div className={cx('scrolling-content')}>
-                <div className={cx('header-container')}>
-                  {Header && (
-                    <Header
-                      isSideMenuOpened={this.state.sideMenuOpened}
-                      toggleSideMenu={this.toggleSideMenu}
-                    />
-                  )}
+            {rawContent ? (
+              <>
+                {header}
+                {children}
+              </>
+            ) : (
+              <ScrollWrapper
+                withBackToTop
+                withFooter
+                resetRequired={this.state.resetScroll}
+                onReset={this.unmarkScrollToReset}
+              >
+                <div className={cx('scrolling-content')}>
+                  {header}
+                  <div className={cx('page-container')}>{children}</div>
                 </div>
-                <div className={cx('page-container')}>{this.props.children}</div>
-              </div>
-            </ScrollWrapper>
+              </ScrollWrapper>
+            )}
             <div
               className={cx('sidebar-close-area', { visible: this.state.sideMenuOpened })}
               onClick={this.toggleSideMenu}

app/src/layouts/settingsLayout/index.js

@@ -0,0 +1,17 @@
+/*
+ * 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.
+ */
+
+export { SettingsLayout } from './settingsLayout';

app/src/layouts/settingsLayout/settingsLayout.jsx

@@ -0,0 +1,40 @@
+/*
+ * 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 React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames/bind';
+import styles from './settingsLayout.scss';
+
+const cx = classNames.bind(styles);
+
+export const SettingsLayout = ({ navigation, children }) => (
+  <div className={cx('container')}>
+    <div className={cx('navigation')}>{navigation}</div>
+    <div className={cx('section')}>{children}</div>
+  </div>
+);
+
+SettingsLayout.propTypes = {
+  navigation: PropTypes.node,
+  header: PropTypes.node,
+  children: PropTypes.node,
+};
+SettingsLayout.defaultProps = {
+  navigation: null,
+  header: null,
+  children: null,
+};

app/src/layouts/settingsLayout/settingsLayout.scss

@@ -0,0 +1,33 @@
+/*!
+ * 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.
+ */
+
+.container {
+  display: flex;
+  height: 100%;
+  background: $COLOR--bg-000;
+}
+
+.navigation {
+  flex-shrink: 0;
+  width: 353px;
+  border-right: 1px solid $COLOR--e-100;
+  box-sizing: border-box;
+}
+
+.section {
+  width: 100%;
+  background: $COLOR--bg-100;
+}