From e32d14ea0edb36900b74b9f1dcaa5ec40a006c85 Mon Sep 17 00:00:00 2001
From: Sachin Chaurasiya <sachinchaurasiyachotey87@gmail.com>
Date: Tue, 30 Nov 2021 17:21:50 +0530
Subject: [PATCH] UI : Adding support for 3 column layout. (#1476)

* UI : Adding support for 3 column layout.

* Addressing review comment.

* Minor fix

* Css styling fix.
---
 .../components/containers/PageContainerV1.tsx | 24 ++++++++
 .../src/components/containers/PageLayout.tsx  | 56 +++++++++++++++++++
 .../main/resources/ui/src/styles/x-master.css | 12 ++++
 .../src/main/resources/ui/tailwind.config.js  |  6 +-
 4 files changed, 95 insertions(+), 3 deletions(-)
 create mode 100644 openmetadata-ui/src/main/resources/ui/src/components/containers/PageContainerV1.tsx
 create mode 100644 openmetadata-ui/src/main/resources/ui/src/components/containers/PageLayout.tsx

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/containers/PageContainerV1.tsx b/openmetadata-ui/src/main/resources/ui/src/components/containers/PageContainerV1.tsx
new file mode 100644
index 00000000000..879187cdbff
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/components/containers/PageContainerV1.tsx
@@ -0,0 +1,24 @@
+/*
+  * Licensed to the Apache Software Foundation (ASF) under one or more
+  * contributor license agreements. See the NOTICE file distributed with
+  * this work for additional information regarding copyright ownership.
+  * The ASF licenses this file to You 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, { ReactNode } from 'react';
+
+const PageContainerV1 = ({ children }: { children: ReactNode }) => {
+  return <div className="page-container-v1 tw-bg-body-main">{children}</div>;
+};
+
+export default PageContainerV1;
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/containers/PageLayout.tsx b/openmetadata-ui/src/main/resources/ui/src/components/containers/PageLayout.tsx
new file mode 100644
index 00000000000..3c378b8900b
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/components/containers/PageLayout.tsx
@@ -0,0 +1,56 @@
+/*
+  * Licensed to the Apache Software Foundation (ASF) under one or more
+  * contributor license agreements. See the NOTICE file distributed with
+  * this work for additional information regarding copyright ownership.
+  * The ASF licenses this file to You 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, { FC, ReactNode } from 'react';
+
+interface PageLayoutProp {
+  leftPanel?: ReactNode;
+  rightPanel?: ReactNode;
+  children: ReactNode;
+}
+
+const PageLayout: FC<PageLayoutProp> = ({
+  leftPanel,
+  children,
+  rightPanel,
+}: PageLayoutProp) => {
+  return (
+    <div className="tw-grid tw-grid-flow-col tw-gap-x-3 tw-px-4 tw-overflow-y-auto">
+      {leftPanel && (
+        <div
+          className="tw-col-span-1 tw-w-64 tw-overflow-y-auto tw-px-2 tw-py-1"
+          id="left-panel">
+          {leftPanel}
+        </div>
+      )}
+      <div
+        className="tw-col-span-3  tw-overflow-y-auto tw-px-2 tw-py-1"
+        id="center">
+        {children}
+      </div>
+      {rightPanel && (
+        <div
+          className="tw-col-span-1 tw-w-64  tw-overflow-y-auto tw-px-2 tw-py-1"
+          id="right-panel">
+          {rightPanel}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PageLayout;
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/x-master.css b/openmetadata-ui/src/main/resources/ui/src/styles/x-master.css
index fe944d312a6..ca3f9b16f55 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/x-master.css
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/x-master.css
@@ -734,3 +734,15 @@ body .profiler-graph .recharts-active-dot circle {
 .version-data {
   width: calc(100% - 330px);
 }
+
+/* page-container v1 */
+
+.page-container-v1 {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-content: flex-start;
+  position: relative;
+  height: calc(100% - 61px);
+  overflow-y: hidden;
+}
diff --git a/openmetadata-ui/src/main/resources/ui/tailwind.config.js b/openmetadata-ui/src/main/resources/ui/tailwind.config.js
index 3559261df4a..8262f0e9cf0 100644
--- a/openmetadata-ui/src/main/resources/ui/tailwind.config.js
+++ b/openmetadata-ui/src/main/resources/ui/tailwind.config.js
@@ -41,15 +41,15 @@ const statusRunning = '#276EF1';
 const statusQueued = '#777777';
 
 // Background colors
-const bodyBG = '#FCFBFE';
+const bodyBG = '#F8F9FA';
 const bodyHoverBG = '#F9F8FD';
 const tagBG = '#EEEAF8';
 const primaryBG = '#7147E840'; // 'rgba(113, 71, 232, 0.25)';
 const backdropBG = '#302E36';
 
 // Borders and Separators
-const mainBorder = '#E2DCE4';
-const mainSeparator = '#D9CEEE';
+const mainBorder = '#DCE3EC';
+const mainSeparator = '#DCE3EC';
 
 // Text color - Gray variants
 const textBody = '#37352f';