From a985b5f519b0e6a5eb204345df20e26628b14cce Mon Sep 17 00:00:00 2001
From: Wroud <wrouds@gmail.com>
Date: Wed, 7 Apr 2021 17:31:07 +0300
Subject: [PATCH] feat: CB-854 connection tabs design

---
 .../packages/core-blocks/src/Tabs/TabList.tsx |  2 +-
 .../ConnectionsTable/ConnectionEdit.tsx       |  2 +-
 .../CreateConnection/CreateConnection.tsx     |  1 +
 .../src/ConnectionForm/ConnectionForm.tsx     | 32 +++++++++++++------
 .../PublicConnectionForm.tsx                  |  7 ++--
 5 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/webapp/packages/core-blocks/src/Tabs/TabList.tsx b/webapp/packages/core-blocks/src/Tabs/TabList.tsx
index 1105fc7dd4..decf1f5c41 100644
--- a/webapp/packages/core-blocks/src/Tabs/TabList.tsx
+++ b/webapp/packages/core-blocks/src/Tabs/TabList.tsx
@@ -46,7 +46,7 @@ export const TabList: React.FC<Props> = observer(function TabList({
             component={tabInfo.tab?.()}
             {...state.props}
             style={style}
-            disabled={tabInfo.isDisabled?.(tabInfo.key, state.props)}
+            disabled={props.disabled || tabInfo.isDisabled?.(tabInfo.key, state.props)}
             onOpen={tabInfo.onOpen}
             onClose={tabInfo.onClose}
           />
diff --git a/webapp/packages/core-connections/src/Administration/Connections/ConnectionsTable/ConnectionEdit.tsx b/webapp/packages/core-connections/src/Administration/Connections/ConnectionsTable/ConnectionEdit.tsx
index 6e5633df10..2effeefec7 100644
--- a/webapp/packages/core-connections/src/Administration/Connections/ConnectionsTable/ConnectionEdit.tsx
+++ b/webapp/packages/core-connections/src/Administration/Connections/ConnectionsTable/ConnectionEdit.tsx
@@ -33,7 +33,7 @@ const styles = composes(
       padding: 24px 0;
       display: flex;
       flex-direction: column;
-      height: 630px;
+      height: 640px;
     }
   `
 );
diff --git a/webapp/packages/core-connections/src/Administration/Connections/CreateConnection/CreateConnection.tsx b/webapp/packages/core-connections/src/Administration/Connections/CreateConnection/CreateConnection.tsx
index eb7244077a..1a1486761b 100644
--- a/webapp/packages/core-connections/src/Administration/Connections/CreateConnection/CreateConnection.tsx
+++ b/webapp/packages/core-connections/src/Administration/Connections/CreateConnection/CreateConnection.tsx
@@ -55,6 +55,7 @@ const styles = composes(
       position: relative;
       display: flex;
       flex-direction: column;
+      padding-top: 16px;
       flex: 1;
       overflow: auto;
     }
diff --git a/webapp/packages/core-connections/src/ConnectionForm/ConnectionForm.tsx b/webapp/packages/core-connections/src/ConnectionForm/ConnectionForm.tsx
index 186852b28a..acf88a0c25 100644
--- a/webapp/packages/core-connections/src/ConnectionForm/ConnectionForm.tsx
+++ b/webapp/packages/core-connections/src/ConnectionForm/ConnectionForm.tsx
@@ -12,7 +12,7 @@ import styled, { css } from 'reshadow';
 
 import {
   TabsState, TabList,
-  Button, BORDER_TAB_STYLES, TabPanelList, Placeholder, useObjectRef
+  Button, UNDERLINE_TAB_STYLES, TabPanelList, Placeholder, useObjectRef
 } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 import { useTranslate } from '@cloudbeaver/core-localization';
@@ -24,12 +24,8 @@ import { useConnectionFormState } from './useConnectionFormState';
 
 const styles = composes(
   css`
-    Tab {
-      composes: theme-ripple theme-background-secondary theme-text-on-secondary from global;
-    }
-
     TabList {
-      composes: theme-background-surface theme-text-on-surface from global;
+      composes: theme-border-color-background theme-background-secondary theme-text-on-secondary from global;
     }
 
     box {
@@ -42,7 +38,23 @@ const styles = composes(
   `,
   css`
     TabList {
+      position: relative;
       flex-shrink: 0;
+      align-items: center;
+    
+      &:before {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        border-bottom: solid 2px;
+        border-color: inherit;
+      }
+    }
+    Tab {
+      height: 46px!important;
+      text-transform: uppercase;
+      font-weight: 500 !important;
     }
     box {
       display: flex;
@@ -74,6 +86,7 @@ interface Props {
   options: IConnectionFormOptions;
   onCancel?: () => void;
   onSave?: (config: ConnectionConfig) => void;
+  className?: string;
 }
 
 export const ConnectionForm = observer(function ConnectionForm({
@@ -81,9 +94,10 @@ export const ConnectionForm = observer(function ConnectionForm({
   options,
   onCancel = () => {},
   onSave = () => {},
+  className,
 }: Props) {
   const props = useObjectRef({ onSave });
-  const style = [styles, BORDER_TAB_STYLES];
+  const style = [styles, UNDERLINE_TAB_STYLES];
   const translate = useTranslate();
   const service = useService(ConnectionFormService);
   const formState = useConnectionFormState(data, options);
@@ -108,8 +122,8 @@ export const ConnectionForm = observer(function ConnectionForm({
       form={formState}
       options={options}
     >
-      <box as='div'>
-        <TabList style={style}>
+      <box as='div' className={className}>
+        <TabList style={style} disabled={formState.form.disabled}>
           <fill as="div" />
           <Placeholder container={service.actionsContainer} data={data} form={formState.form} options={options} />
           <Button
diff --git a/webapp/packages/plugin-connections/src/PublicConnectionForm/PublicConnectionForm.tsx b/webapp/packages/plugin-connections/src/PublicConnectionForm/PublicConnectionForm.tsx
index 2542100ab2..0671211f90 100644
--- a/webapp/packages/plugin-connections/src/PublicConnectionForm/PublicConnectionForm.tsx
+++ b/webapp/packages/plugin-connections/src/PublicConnectionForm/PublicConnectionForm.tsx
@@ -12,7 +12,7 @@ import styled from 'reshadow';
 import { css } from 'reshadow';
 
 import { Loader, useMapResource } from '@cloudbeaver/core-blocks';
-import { ConnectionInfoResource, ConnectionForm, useConnectionFormData, IConnectionFormDataOptions, IConnectionFormOptions, IConnectionFormSubmitData } from '@cloudbeaver/core-connections';
+import { ConnectionInfoResource, ConnectionForm, useConnectionFormData, IConnectionFormDataOptions, IConnectionFormOptions } from '@cloudbeaver/core-connections';
 import { useService } from '@cloudbeaver/core-di';
 import type { ConnectionConfig } from '@cloudbeaver/core-sdk';
 
@@ -22,6 +22,9 @@ const styles = css`
   Loader {
     height: 100%;
   }
+  ConnectionForm {
+    padding-top: 16px;
+  }
 `;
 
 interface Props {
@@ -46,7 +49,7 @@ const PublicConnectionFormRenderer: React.FC<Props> = observer(function PublicCo
 
   return styled(styles)(
     <Loader state={connection}>
-      {() => (
+      {() => styled(styles)(
         <ConnectionForm
           data={data}
           options={options}