trustchain-oc1-orchestral
/
authentik
Archived
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/admin: replace group selections with ak-search-select 

closes #4157

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2022-12-29 11:05:57 +01:00
parent 3073b7d7e3
commit b429e24392
No known key found for this signature in database
4 changed files with 83 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
web/src/admin/events/RuleForm.ts
View File

@ -1,4 +1,5 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import "@goauthentik/elements/SearchSelect";
import "@goauthentik/elements/forms/HorizontalFormElement"; import "@goauthentik/elements/forms/HorizontalFormElement";
import { ModelForm } from "@goauthentik/elements/forms/ModelForm"; import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
@ -9,7 +10,14 @@ import { customElement } from "lit/decorators.js";
import { ifDefined } from "lit/directives/if-defined.js"; import { ifDefined } from "lit/directives/if-defined.js";
import { until } from "lit/directives/until.js"; import { until } from "lit/directives/until.js";
import { CoreApi, EventsApi, NotificationRule, SeverityEnum } from "@goauthentik/api"; import {
CoreApi,
CoreGroupsListRequest,
EventsApi,
Group,
NotificationRule,
SeverityEnum,
} from "@goauthentik/api";
@customElement("ak-event-rule-form") @customElement("ak-event-rule-form")
export class RuleForm extends ModelForm<NotificationRule, string> { export class RuleForm extends ModelForm<NotificationRule, string> {
@ -74,24 +82,29 @@ export class RuleForm extends ModelForm<NotificationRule, string> {
/> />
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${t`Group`} name="group"> <ak-form-element-horizontal label=${t`Group`} name="group">
<select class="pf-c-form-control"> <ak-search-select
<option value="" ?selected=${this.instance?.group === undefined}> .fetchObjects=${async (query?: string): Promise<Group[]> => {
--------- const args: CoreGroupsListRequest = {
</option> ordering: "name",
${until( };
new CoreApi(DEFAULT_CONFIG).coreGroupsList({}).then((groups) => { if (query !== undefined) {
return groups.results.map((group) => { args.search = query;
return html`<option }
value=${ifDefined(group.pk)} const groups = await new CoreApi(DEFAULT_CONFIG).coreGroupsList(args);
?selected=${this.instance?.group === group.pk} return groups.results;
}}
.renderElement=${(group: Group): string => {
return group.name;
}}
.value=${(group: Group | undefined): string | undefined => {
return group?.pk;
}}
.selected=${(group: Group): boolean => {
return group.pk === this.instance?.group;
}}
?blankable=${true}
> >
${group.name} </ak-search-select>
</option>`;
});
}),
html`<option>${t`Loading...`}</option>`,
)}
</select>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${t`Transports`} ?required=${true} name="transports"> <ak-form-element-horizontal label=${t`Transports`} ?required=${true} name="transports">
<select name="users" class="pf-c-form-control" multiple> <select name="users" class="pf-c-form-control" multiple>

42
web/src/admin/groups/GroupForm.ts
View File

@ -2,6 +2,7 @@ import "@goauthentik/admin/groups/MemberSelectModal";
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { first } from "@goauthentik/common/utils"; import { first } from "@goauthentik/common/utils";
import "@goauthentik/elements/CodeMirror"; import "@goauthentik/elements/CodeMirror";
import "@goauthentik/elements/SearchSelect";
import "@goauthentik/elements/chips/Chip"; import "@goauthentik/elements/chips/Chip";
import "@goauthentik/elements/chips/ChipGroup"; import "@goauthentik/elements/chips/ChipGroup";
import "@goauthentik/elements/forms/HorizontalFormElement"; import "@goauthentik/elements/forms/HorizontalFormElement";
@ -16,7 +17,7 @@ import { customElement } from "lit/decorators.js";
import { ifDefined } from "lit/directives/if-defined.js"; import { ifDefined } from "lit/directives/if-defined.js";
import { until } from "lit/directives/until.js"; import { until } from "lit/directives/until.js";
import { CoreApi, Group, User } from "@goauthentik/api"; import { CoreApi, CoreGroupsListRequest, Group, User } from "@goauthentik/api";
@customElement("ak-group-form") @customElement("ak-group-form")
export class GroupForm extends ModelForm<Group, string> { export class GroupForm extends ModelForm<Group, string> {
@ -83,24 +84,29 @@ export class GroupForm extends ModelForm<Group, string> {
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${t`Parent`} name="parent"> <ak-form-element-horizontal label=${t`Parent`} name="parent">
<select class="pf-c-form-control"> <ak-search-select
<option value="" ?selected=${this.instance?.parent === undefined}> .fetchObjects=${async (query?: string): Promise<Group[]> => {
--------- const args: CoreGroupsListRequest = {
</option> ordering: "name",
${until( };
new CoreApi(DEFAULT_CONFIG).coreGroupsList({}).then((groups) => { if (query !== undefined) {
return groups.results.map((group) => { args.search = query;
return html`<option }
value=${ifDefined(group.pk)} const groups = await new CoreApi(DEFAULT_CONFIG).coreGroupsList(args);
?selected=${this.instance?.parent === group.pk} return groups.results;
}}
.renderElement=${(group: Group): string => {
return group.name;
}}
.value=${(group: Group | undefined): string | undefined => {
return group?.pk;
}}
.selected=${(group: Group): boolean => {
return group.pk === this.instance?.parent;
}}
?blankable=${true}
> >
${group.name} </ak-search-select>
</option>`;
});
}),
html`<option>${t`Loading...`}</option>`,
)}
</select>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${t`Members`} name="users"> <ak-form-element-horizontal label=${t`Members`} name="users">
<div class="pf-c-input-group"> <div class="pf-c-input-group">

42
web/src/admin/providers/ldap/LDAPProviderForm.ts
View File

@ -1,5 +1,6 @@
import { DEFAULT_CONFIG, tenant } from "@goauthentik/common/api/config"; import { DEFAULT_CONFIG, tenant } from "@goauthentik/common/api/config";
import { first } from "@goauthentik/common/utils"; import { first } from "@goauthentik/common/utils";
import "@goauthentik/elements/SearchSelect";
import "@goauthentik/elements/forms/FormGroup"; import "@goauthentik/elements/forms/FormGroup";
import "@goauthentik/elements/forms/HorizontalFormElement"; import "@goauthentik/elements/forms/HorizontalFormElement";
import { ModelForm } from "@goauthentik/elements/forms/ModelForm"; import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
@ -13,9 +14,11 @@ import { until } from "lit/directives/until.js";
import { import {
CoreApi, CoreApi,
CoreGroupsListRequest,
CryptoApi, CryptoApi,
FlowsApi, FlowsApi,
FlowsInstancesListDesignationEnum, FlowsInstancesListDesignationEnum,
Group,
LDAPAPIAccessMode, LDAPAPIAccessMode,
LDAPProvider, LDAPProvider,
ProvidersApi, ProvidersApi,
@ -97,24 +100,29 @@ export class LDAPProviderFormPage extends ModelForm<LDAPProvider, number> {
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${t`Search group`} name="searchGroup"> <ak-form-element-horizontal label=${t`Search group`} name="searchGroup">
<select class="pf-c-form-control"> <ak-search-select
<option value="" ?selected=${this.instance?.searchGroup === undefined}> .fetchObjects=${async (query?: string): Promise<Group[]> => {
--------- const args: CoreGroupsListRequest = {
</option> ordering: "name",
${until( };
new CoreApi(DEFAULT_CONFIG).coreGroupsList({}).then((groups) => { if (query !== undefined) {
return groups.results.map((group) => { args.search = query;
return html`<option }
value=${ifDefined(group.pk)} const groups = await new CoreApi(DEFAULT_CONFIG).coreGroupsList(args);
?selected=${this.instance?.searchGroup === group.pk} return groups.results;
}}
.renderElement=${(group: Group): string => {
return group.name;
}}
.value=${(group: Group | undefined): string | undefined => {
return group?.pk;
}}
.selected=${(group: Group): boolean => {
return group.pk === this.instance?.searchGroup;
}}
?blankable=${true}
> >
${group.name} </ak-search-select>
</option>`;
});
}),
html`<option>${t`Loading...`}</option>`,
)}
</select>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${t`Users in the selected group can do search queries. If no group is selected, no LDAP Searches are allowed.`} ${t`Users in the selected group can do search queries. If no group is selected, no LDAP Searches are allowed.`}
</p> </p>

1
web/src/admin/sources/ldap/LDAPSourceForm.ts
View File

@ -310,7 +310,6 @@ export class LDAPSourceForm extends ModelForm<LDAPSource, string> {
<span slot="header"> ${t`Additional settings`} </span> <span slot="header"> ${t`Additional settings`} </span>
<div slot="body" class="pf-c-form"> <div slot="body" class="pf-c-form">
<ak-form-element-horizontal label=${t`Group`} name="syncParentGroup"> <ak-form-element-horizontal label=${t`Group`} name="syncParentGroup">
<!-- @ts-ignore -->
<ak-search-select <ak-search-select
.fetchObjects=${async (query?: string): Promise<Group[]> => { .fetchObjects=${async (query?: string): Promise<Group[]> => {
const args: CoreGroupsListRequest = { const args: CoreGroupsListRequest = {