From d4fa54c5eff49b8324e8bea9ae7aa2139e5cf4e2 Mon Sep 17 00:00:00 2001
From: Wroud <wrouds@gmail.com>
Date: Sat, 15 Aug 2020 00:18:56 +0300
Subject: [PATCH] chore: improve administration page styles

CB-190
---
 .../Connections/ConnectionsAdministration.tsx |   1 -
 .../ConnectionsTable/ConnectionEdit.tsx       |   8 +
 .../ConnectionEditController.ts               |   3 +-
 .../ConnectionForm/ConnectionForm.tsx         | 213 +++++++++---------
 .../core-theming/src/styles/layout-grid.scss  |   4 +-
 .../Users/UsersAdministration.tsx             |   1 -
 .../Users/UsersTable/UserEdit.tsx             | 136 ++++++-----
 .../Users/UsersTable/UserEditController.ts    |   3 +-
 8 files changed, 202 insertions(+), 167 deletions(-)

diff --git a/webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministration.tsx b/webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministration.tsx
index 706b91d123..7abc0dbc7e 100644
--- a/webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministration.tsx
+++ b/webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministration.tsx
@@ -30,7 +30,6 @@ const styles = composes(
   css`
     layout-grid {
       width: 100%;
-      max-width: 1176px;
     }
 
     layout-grid-cell {
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 d2f8f0ccc1..cbfd8e3327 100644
--- a/webapp/packages/core-connections/src/Administration/Connections/ConnectionsTable/ConnectionEdit.tsx
+++ b/webapp/packages/core-connections/src/Administration/Connections/ConnectionsTable/ConnectionEdit.tsx
@@ -72,6 +72,10 @@ const styles = composes(
       outline: none;
     }
 
+    TabPanel {
+      overflow: auto !important;
+    }
+
     Tab {
       composes: theme-typography--body2 from global;
       text-transform: uppercase;
@@ -80,6 +84,10 @@ const styles = composes(
       &:global([aria-selected=true]) {
         font-weight: normal !important;
       }
+
+      & TabTitle {
+        padding: 0 24px !important;
+      }
     }
 
     ErrorMessage {
diff --git a/webapp/packages/core-connections/src/Administration/Connections/ConnectionsTable/ConnectionEditController.ts b/webapp/packages/core-connections/src/Administration/Connections/ConnectionsTable/ConnectionEditController.ts
index d37ded8cf2..7ce6f21c47 100644
--- a/webapp/packages/core-connections/src/Administration/Connections/ConnectionsTable/ConnectionEditController.ts
+++ b/webapp/packages/core-connections/src/Administration/Connections/ConnectionsTable/ConnectionEditController.ts
@@ -50,7 +50,8 @@ implements IInitializableController, IDestructibleController {
   };
 
   @computed get users() {
-    return Array.from(this.usersResource.data.values());
+    return Array.from(this.usersResource.data.values())
+      .filter(user => !this.usersResource.isNew(user.userId));
   }
 
   @computed get roles() {
diff --git a/webapp/packages/core-connections/src/Administration/Connections/ConnectionsTable/ConnectionForm/ConnectionForm.tsx b/webapp/packages/core-connections/src/Administration/Connections/ConnectionsTable/ConnectionForm/ConnectionForm.tsx
index 59b4147361..201bfe9a17 100644
--- a/webapp/packages/core-connections/src/Administration/Connections/ConnectionsTable/ConnectionForm/ConnectionForm.tsx
+++ b/webapp/packages/core-connections/src/Administration/Connections/ConnectionsTable/ConnectionForm/ConnectionForm.tsx
@@ -7,7 +7,7 @@
  */
 
 import { observer } from 'mobx-react';
-import styled, { use } from 'reshadow';
+import styled, { css } from 'reshadow';
 
 import {
   Radio, InputField, useFocus, ObjectPropertyInfoForm, Combobox, Checkbox, Textarea, InputGroup
@@ -24,124 +24,133 @@ type ConnectionFormProps = {
   controller: IFormController;
 }
 
+const styles = css`
+  box {
+    flex: 1;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  box-element {
+    min-width: 450px;
+  }
+`;
+
 export const ConnectionForm = observer(function ConnectionForm({
   controller,
 }: ConnectionFormProps) {
   const translate = useTranslate();
   const [focusedRef] = useFocus({ focusFirstChild: true });
 
-  return styled(useStyles(formStyles))(
+  return styled(useStyles(styles, formStyles))(
     <connection-form as='div' ref={focusedRef as React.RefObject<HTMLDivElement>}>
-      <layout-grid as="div">
-        <layout-grid-inner as="div">
-          <layout-grid-cell as='div' {...use({ 'span-tablet': 12, 'span-desktop': 5 })}>
-            <group as="div">
-              <Checkbox
-                name="template"
-                value={controller.connectionId}
-                checkboxLabel={translate('connections_connection_template')}
-                checked={controller.config.template}
-                onChange={value => controller.onChange('template', value)}
-                disabled={!controller.isNew || controller.isDisabled}
-                mod='surface'
-              />
-            </group>
-            <group as="div">
-              <Combobox
-                value={controller.driver?.id}
-                items={controller.drivers}
-                keySelector={driver => driver.id}
-                valueSelector={driver => driver?.name!}
-                onSelect={controller.onSelectDriver}
-                readOnly={!controller.isNew}
-                mod={'surface'}
-              >
-                {translate('connections_connection_driver')}
-              </Combobox>
-            </group>
+      <box as="div">
+        <box-element as='div'>
+          <group as="div">
+            <Checkbox
+              name="template"
+              value={controller.connectionId}
+              checkboxLabel={translate('connections_connection_template')}
+              checked={controller.config.template}
+              onChange={value => controller.onChange('template', value)}
+              disabled={!controller.isNew || controller.isDisabled}
+              mod='surface'
+            />
+          </group>
+          <group as="div">
+            <Combobox
+              value={controller.driver?.id}
+              items={controller.drivers}
+              keySelector={driver => driver.id}
+              valueSelector={driver => driver?.name!}
+              onSelect={controller.onSelectDriver}
+              readOnly={!controller.isNew}
+              mod={'surface'}
+            >
+              {translate('connections_connection_driver')}
+            </Combobox>
+          </group>
+          <group as="div">
+            <InputField
+              type="text"
+              name="name"
+              value={controller.config.name}
+              onChange={value => controller.onChange('name', value)}
+              disabled={controller.isDisabled}
+              mod='surface'
+            >
+              {translate('connections_connection_name')}
+            </InputField>
+          </group>
+          <group as="div">
+            <Textarea
+              name="description"
+              rows={3}
+              value={controller.config.description}
+              onChange={value => controller.onChange('description', value)}
+              disabled={controller.isDisabled}
+              mod='surface'
+            >
+              {translate('connections_connection_description')}
+            </Textarea>
+          </group>
+        </box-element>
+        <box-element as='div'>
+          <connection-type as="div">
+            <Radio
+              name="type"
+              id={`${controller.connectionId}custom`}
+              value={'custom'}
+              onClick={() => controller.onChangeType(ConnectionType.Attributes)}
+              checked={controller.connectionType === ConnectionType.Attributes}
+              disabled={controller.isDisabled}
+              mod={['primary']}
+            >
+              {translate('customConnection_connectionType_custom')}
+            </Radio>
+            <Radio
+              name="type"
+              id={`${controller.connectionId}url`}
+              value={'url'}
+              onClick={() => controller.onChangeType(ConnectionType.URL)}
+              checked={controller.connectionType === ConnectionType.URL}
+              disabled={controller.isDisabled}
+              mod={['primary']}
+            >
+              {translate('customConnection_connectionType_url')}
+            </Radio>
+          </connection-type>
+          {controller.connectionType === ConnectionType.Attributes ? (
+            <ParametersForm controller={controller} embedded={controller.driver?.embedded} />
+          ) : (
             <group as="div">
               <InputField
                 type="text"
-                name="name"
-                value={controller.config.name}
-                onChange={value => controller.onChange('name', value)}
+                name="url"
+                value={controller.config.url}
+                onChange={value => controller.onChange('url', value)}
                 disabled={controller.isDisabled}
                 mod='surface'
               >
-                {translate('connections_connection_name')}
+                {translate('customConnection_url_JDBC')}
               </InputField>
             </group>
-            <group as="div">
-              <Textarea
-                name="description"
-                rows={3}
-                value={controller.config.description}
-                onChange={value => controller.onChange('description', value)}
-                disabled={controller.isDisabled}
-                mod='surface'
-              >
-                {translate('connections_connection_description')}
-              </Textarea>
-            </group>
-          </layout-grid-cell>
-          <layout-grid-cell as='div' {...use({ 'span-tablet': '12', 'span-desktop': 7 })}>
-            <connection-type as="div">
-              <Radio
-                name="type"
-                id={`${controller.connectionId}custom`}
-                value={'custom'}
-                onClick={() => controller.onChangeType(ConnectionType.Attributes)}
-                checked={controller.connectionType === ConnectionType.Attributes}
-                disabled={controller.isDisabled}
-                mod={['primary']}
-              >
-                {translate('customConnection_connectionType_custom')}
-              </Radio>
-              <Radio
-                name="type"
-                id={`${controller.connectionId}url`}
-                value={'url'}
-                onClick={() => controller.onChangeType(ConnectionType.URL)}
-                checked={controller.connectionType === ConnectionType.URL}
-                disabled={controller.isDisabled}
-                mod={['primary']}
-              >
-                {translate('customConnection_connectionType_url')}
-              </Radio>
-            </connection-type>
-            {controller.connectionType === ConnectionType.Attributes ? (
-              <ParametersForm controller={controller} embedded={controller.driver?.embedded} />
-            ) : (
+          )}
+          {controller.authModel && (
+            <>
               <group as="div">
-                <InputField
-                  type="text"
-                  name="url"
-                  value={controller.config.url}
-                  onChange={value => controller.onChange('url', value)}
-                  disabled={controller.isDisabled}
-                  mod='surface'
-                >
-                  {translate('customConnection_url_JDBC')}
-                </InputField>
+                <InputGroup>{translate('connections_connection_edit_authentication')}</InputGroup>
               </group>
-            )}
-            {controller.authModel && (
-              <>
-                <group as="div">
-                  <InputGroup>{translate('connections_connection_edit_authentication')}</InputGroup>
-                </group>
-                <ObjectPropertyInfoForm
-                  prefix={`auth_${controller.driver?.id || ''}`}
-                  autofillToken={`section-${controller.driver?.id || ''} section-auth`}
-                  properties={controller.authModel.properties}
-                  credentials={controller.config.credentials}
-                  processing={controller.isDisabled}
-                />
-              </>
-            )}
-          </layout-grid-cell>
-        </layout-grid-inner>
-      </layout-grid>
+              <ObjectPropertyInfoForm
+                prefix={`auth_${controller.driver?.id || ''}`}
+                autofillToken={`section-${controller.driver?.id || ''} section-auth`}
+                properties={controller.authModel.properties}
+                credentials={controller.config.credentials}
+                processing={controller.isDisabled}
+              />
+            </>
+          )}
+        </box-element>
+      </box>
     </connection-form>
   );
 });
diff --git a/webapp/packages/core-theming/src/styles/layout-grid.scss b/webapp/packages/core-theming/src/styles/layout-grid.scss
index e36b32f255..cbf3759fbf 100644
--- a/webapp/packages/core-theming/src/styles/layout-grid.scss
+++ b/webapp/packages/core-theming/src/styles/layout-grid.scss
@@ -84,7 +84,9 @@ layout-grid-cell {
   }
 }
 
-.layout-grid--fixed-column-width {
+.layout-grid--fixed-column-width,
+layout-grid[use|fixed-width],
+.layout-grid[use|fixed-width] {
   @each $size in map-keys($mdc-layout-grid-columns) {
     @include mdc-layout-grid-media-query_($size) {
       $margin: map-get($mdc-layout-grid-default-margin, $size);
diff --git a/webapp/packages/plugin-authentication/src/Administration/Users/UsersAdministration.tsx b/webapp/packages/plugin-authentication/src/Administration/Users/UsersAdministration.tsx
index a9d2d9e11d..0584682e9e 100644
--- a/webapp/packages/plugin-authentication/src/Administration/Users/UsersAdministration.tsx
+++ b/webapp/packages/plugin-authentication/src/Administration/Users/UsersAdministration.tsx
@@ -30,7 +30,6 @@ const styles = composes(
   css`
     layout-grid {
       width: 100%;
-      max-width: 1176px;
     }
 
     layout-grid-cell {
diff --git a/webapp/packages/plugin-authentication/src/Administration/Users/UsersTable/UserEdit.tsx b/webapp/packages/plugin-authentication/src/Administration/Users/UsersTable/UserEdit.tsx
index cc58cb143c..5b55211a25 100644
--- a/webapp/packages/plugin-authentication/src/Administration/Users/UsersTable/UserEdit.tsx
+++ b/webapp/packages/plugin-authentication/src/Administration/Users/UsersTable/UserEdit.tsx
@@ -74,6 +74,10 @@ const styles = composes(
       outline: none;
     }
 
+    TabPanel {
+      overflow: auto !important;
+    }
+
     Tab {
       composes: theme-typography--body2 from global;
       text-transform: uppercase;
@@ -82,6 +86,10 @@ const styles = composes(
       &:global([aria-selected=true]) {
         font-weight: normal !important;
       }
+
+      & TabTitle {
+        padding: 0 24px !important;
+      }
     }
 
     ErrorMessage {
@@ -107,6 +115,16 @@ const styles = composes(
       flex: 1;
       width: 100%;
     }
+
+    flex-box {
+      flex: 1;
+      display: flex;
+      flex-wrap: wrap;
+    }
+
+    flex-box-element {
+      min-width: 450px;
+    }
   `
 );
 
@@ -183,69 +201,67 @@ export const UserEdit = observer(function UserEdit({
             : (
               <SubmittingForm onSubmit={controller.save} ref={focusedRef as React.RefObject<HTMLFormElement>}>
                 <TabPanel tabId='info'>
-                  <layout-grid as="div">
-                    <layout-grid-inner as="div">
-                      <layout-grid-cell as='div' {...use({ 'span-tablet': 12, 'span-desktop': 5 })}>
-                        <group as="div">
-                          <InputGroup>{translate('authentication_user_credentials')}</InputGroup>
-                        </group>
-                        <group as="div">
-                          <InputField
-                            type='text'
-                            name='login'
-                            value={controller.credentials.login}
-                            onChange={handleLoginChange}
-                            disabled={!controller.isNew || controller.isSaving}
-                            mod='surface'
-                          >
-                            {translate('authentication_user_name')}
-                          </InputField>
-                        </group>
-                        <group as="div">
-                          <InputField
-                            type='password'
-                            name='password'
-                            value={controller.credentials.password}
-                            onChange={handlePasswordChange}
+                  <flex-box as="div">
+                    <flex-box-element as='div'>
+                      <group as="div">
+                        <InputGroup>{translate('authentication_user_credentials')}</InputGroup>
+                      </group>
+                      <group as="div">
+                        <InputField
+                          type='text'
+                          name='login'
+                          value={controller.credentials.login}
+                          onChange={handleLoginChange}
+                          disabled={!controller.isNew || controller.isSaving}
+                          mod='surface'
+                        >
+                          {translate('authentication_user_name')}
+                        </InputField>
+                      </group>
+                      <group as="div">
+                        <InputField
+                          type='password'
+                          name='password'
+                          value={controller.credentials.password}
+                          onChange={handlePasswordChange}
+                          disabled={controller.isSaving}
+                          mod='surface'
+                        >
+                          {translate('authentication_user_password')}
+                        </InputField>
+                      </group>
+                      <group as="div">
+                        <InputField
+                          type='password'
+                          name='password_repeat'
+                          value={controller.credentials.passwordRepeat}
+                          onChange={handlePasswordRepeatChange}
+                          disabled={controller.isSaving}
+                          mod='surface'
+                        >
+                          {translate('authentication_user_password_repeat')}
+                        </InputField>
+                      </group>
+                    </flex-box-element>
+                    <flex-box-element as='div'>
+                      <group as="div">
+                        <InputGroup>{translate('authentication_user_role')}</InputGroup>
+                      </group>
+                      {controller.roles.map((role, i) => (
+                        <group as="div" key={role.roleId}>
+                          <Checkbox
+                            value={role.roleId}
+                            name='role'
+                            checkboxLabel={role.roleName || role.roleId}
+                            onChange={checked => handleRoleChange(role.roleId, checked)}
+                            checked={controller.credentials.roles.get(role.roleId)}
                             disabled={controller.isSaving}
                             mod='surface'
-                          >
-                            {translate('authentication_user_password')}
-                          </InputField>
+                          />
                         </group>
-                        <group as="div">
-                          <InputField
-                            type='password'
-                            name='password_repeat'
-                            value={controller.credentials.passwordRepeat}
-                            onChange={handlePasswordRepeatChange}
-                            disabled={controller.isSaving}
-                            mod='surface'
-                          >
-                            {translate('authentication_user_password_repeat')}
-                          </InputField>
-                        </group>
-                      </layout-grid-cell>
-                      <layout-grid-cell as='div' {...use({ 'span-tablet': 12, 'span-desktop': 5 })}>
-                        <group as="div">
-                          <InputGroup>{translate('authentication_user_role')}</InputGroup>
-                        </group>
-                        {controller.roles.map((role, i) => (
-                          <group as="div" key={role.roleId}>
-                            <Checkbox
-                              value={role.roleId}
-                              name='role'
-                              checkboxLabel={role.roleName || role.roleId}
-                              onChange={checked => handleRoleChange(role.roleId, checked)}
-                              checked={controller.credentials.roles.get(role.roleId)}
-                              disabled={controller.isSaving}
-                              mod='surface'
-                            />
-                          </group>
-                        ))}
-                      </layout-grid-cell>
-                    </layout-grid-inner>
-                  </layout-grid>
+                      ))}
+                    </flex-box-element>
+                  </flex-box>
                 </TabPanel>
                 <TabPanel tabId='connections_access'>
                   <GrantedConnections
diff --git a/webapp/packages/plugin-authentication/src/Administration/Users/UsersTable/UserEditController.ts b/webapp/packages/plugin-authentication/src/Administration/Users/UsersTable/UserEditController.ts
index 38e781f11f..6fdc497013 100644
--- a/webapp/packages/plugin-authentication/src/Administration/Users/UsersTable/UserEditController.ts
+++ b/webapp/packages/plugin-authentication/src/Administration/Users/UsersTable/UserEditController.ts
@@ -36,7 +36,8 @@ export class UserEditController implements IInitializableController, IDestructib
   }
 
   @computed get connections() {
-    return Array.from(this.connectionsResource.data.values());
+    return Array.from(this.connectionsResource.data.values())
+      .filter(connection => !this.connectionsResource.isNew(connection.id));
   }
 
   @computed get roles() {