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))(
}>
-
-
-
-
- controller.onChange('template', value)}
- disabled={!controller.isNew || controller.isDisabled}
- mod='surface'
- />
-
-
- driver.id}
- valueSelector={driver => driver?.name!}
- onSelect={controller.onSelectDriver}
- readOnly={!controller.isNew}
- mod={'surface'}
- >
- {translate('connections_connection_driver')}
-
-
+
+
+
+ controller.onChange('template', value)}
+ disabled={!controller.isNew || controller.isDisabled}
+ mod='surface'
+ />
+
+
+ driver.id}
+ valueSelector={driver => driver?.name!}
+ onSelect={controller.onSelectDriver}
+ readOnly={!controller.isNew}
+ mod={'surface'}
+ >
+ {translate('connections_connection_driver')}
+
+
+
+ controller.onChange('name', value)}
+ disabled={controller.isDisabled}
+ mod='surface'
+ >
+ {translate('connections_connection_name')}
+
+
+
+
+
+
+
+
+ controller.onChangeType(ConnectionType.Attributes)}
+ checked={controller.connectionType === ConnectionType.Attributes}
+ disabled={controller.isDisabled}
+ mod={['primary']}
+ >
+ {translate('customConnection_connectionType_custom')}
+
+ controller.onChangeType(ConnectionType.URL)}
+ checked={controller.connectionType === ConnectionType.URL}
+ disabled={controller.isDisabled}
+ mod={['primary']}
+ >
+ {translate('customConnection_connectionType_url')}
+
+
+ {controller.connectionType === ConnectionType.Attributes ? (
+
+ ) : (
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')}
-
-
-
-
-
-
- controller.onChangeType(ConnectionType.Attributes)}
- checked={controller.connectionType === ConnectionType.Attributes}
- disabled={controller.isDisabled}
- mod={['primary']}
- >
- {translate('customConnection_connectionType_custom')}
-
- controller.onChangeType(ConnectionType.URL)}
- checked={controller.connectionType === ConnectionType.URL}
- disabled={controller.isDisabled}
- mod={['primary']}
- >
- {translate('customConnection_connectionType_url')}
-
-
- {controller.connectionType === ConnectionType.Attributes ? (
-
- ) : (
+ )}
+ {controller.authModel && (
+ <>
- controller.onChange('url', value)}
- disabled={controller.isDisabled}
- mod='surface'
- >
- {translate('customConnection_url_JDBC')}
-
+ {translate('connections_connection_edit_authentication')}
- )}
- {controller.authModel && (
- <>
-
- {translate('connections_connection_edit_authentication')}
-
-
- >
- )}
-
-
-
+
+ >
+ )}
+
+
);
});
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({
: (
}>
-
-
-
-
- {translate('authentication_user_credentials')}
-
-
-
- {translate('authentication_user_name')}
-
-
-
-
+
+
+ {translate('authentication_user_credentials')}
+
+
+
+ {translate('authentication_user_name')}
+
+
+
+
+ {translate('authentication_user_password')}
+
+
+
+
+ {translate('authentication_user_password_repeat')}
+
+
+
+
+
+ {translate('authentication_user_role')}
+
+ {controller.roles.map((role, i) => (
+
+ handleRoleChange(role.roleId, checked)}
+ checked={controller.credentials.roles.get(role.roleId)}
disabled={controller.isSaving}
mod='surface'
- >
- {translate('authentication_user_password')}
-
+ />
-
-
- {translate('authentication_user_password_repeat')}
-
-
-
-
-
- {translate('authentication_user_role')}
-
- {controller.roles.map((role, i) => (
-
- handleRoleChange(role.roleId, checked)}
- checked={controller.credentials.roles.get(role.roleId)}
- disabled={controller.isSaving}
- mod='surface'
- />
-
- ))}
-
-
-
+ ))}
+
+
!this.connectionsResource.isNew(connection.id));
}
@computed get roles() {