Skip to content

Commit

Permalink
changed to use ui-shared
Browse files Browse the repository at this point in the history 
Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
  • Loading branch information
@edewit
edewit committed Mar 22, 2024
1 parent 6cc6610 commit a1211ee
Show file tree
Hide file tree
Showing 5 changed files with 113 additions and 289 deletions.
178 changes: 55 additions & 123 deletions js/apps/admin-ui/src/clients/authorization/SearchDropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,11 @@ import {
Dropdown,
DropdownToggle,
Form,
FormGroup,
Select,
SelectOption,
SelectVariant,
} from "@patternfly/react-core";
import { useEffect } from "react";
import { Controller, useForm } from "react-hook-form";
import { FormProvider, useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";

import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
import { SelectControl, TextControl } from "ui-shared";
import useToggle from "../../utils/useToggle";

import "./search-dropdown.css";
Expand Down Expand Up @@ -42,16 +37,14 @@ export const SearchDropdown = ({
type,
}: SearchDropdownProps) => {
const { t } = useTranslation();
const form = useForm<SearchForm>({ mode: "onChange" });
const {
register,
control,
reset,
formState: { isDirty },
handleSubmit,
} = useForm<SearchForm>({ mode: "onChange" });
} = form;

const [open, toggle] = useToggle();
const [typeOpen, toggleType] = useToggle();

const submit = (form: SearchForm) => {
toggle();
Expand All @@ -60,21 +53,6 @@ export const SearchDropdown = ({

useEffect(() => reset(search), [search]);

const typeOptions = (value?: string) => [
<SelectOption key="empty" value="">
{t("allTypes")}
</SelectOption>,
...(types || []).map((type) => (
<SelectOption
selected={type.type === value}
key={type.type}
value={type.type}
>
{type.name}
</SelectOption>
)),
];

return (
<Dropdown
data-testid="searchdropdown_dorpdown"
Expand All @@ -91,105 +69,59 @@ export const SearchDropdown = ({
}
isOpen={open}
>
<Form
isHorizontal
className="keycloak__client_authentication__searchdropdown_form"
onSubmit={handleSubmit(submit)}
>
<FormGroup label={t("name")} fieldId="name">
<KeycloakTextInput
id="name"
data-testid="searchdropdown_name"
{...register("name")}
/>
</FormGroup>
{type === "resource" && (
<>
<FormGroup label={t("type")} fieldId="type">
<KeycloakTextInput
id="type"
data-testid="searchdropdown_type"
{...register("type")}
/>
</FormGroup>
<FormGroup label={t("uris")} fieldId="uri">
<KeycloakTextInput
id="uri"
data-testid="searchdropdown_uri"
{...register("uri")}
/>
</FormGroup>
<FormGroup label={t("owner")} fieldId="owner">
<KeycloakTextInput
id="owner"
data-testid="searchdropdown_owner"
{...register("owner")}
/>
</FormGroup>
</>
)}
{type !== "resource" && type !== "policy" && (
<FormGroup label={t("resource")} fieldId="resource">
<KeycloakTextInput
id="resource"
data-testid="searchdropdown_resource"
{...register("resource")}
/>
</FormGroup>
)}
{type !== "policy" && (
<FormGroup label={t("scope")} fieldId="scope">
<KeycloakTextInput
id="scope"
data-testid="searchdropdown_scope"
{...register("scope")}
/>
</FormGroup>
)}
{type !== "resource" && (
<FormGroup label={t("type")} fieldId="type">
<Controller
<FormProvider {...form}>
<Form
isHorizontal
className="keycloak__client_authentication__searchdropdown_form"
onSubmit={handleSubmit(submit)}
>
<TextControl name="name" label={t("name")} />
{type === "resource" && (
<>
<TextControl name="type" label={t("type")} />
<TextControl name="uris" label={t("uris")} />
<TextControl name="owner" label={t("owner")} />
</>
)}
{type !== "resource" && type !== "policy" && (
<TextControl name="resource" label={t("resource")} />
)}
{type !== "policy" && <TextControl name="scope" label={t("scope")} />}
{type !== "resource" && (
<SelectControl
name="type"
defaultValue=""
control={control}
render={({ field }) => (
<Select
toggleId="type"
onToggle={toggleType}
onSelect={(event, value) => {
event.stopPropagation();
field.onChange(value);
toggleType();
}}
selections={field.value || t("allTypes")}
variant={SelectVariant.single}
aria-label={t("type")}
isOpen={typeOpen}
>
{typeOptions(field.value)}
</Select>
)}
label={t("type")}
controller={{
defaultValue: "",
}}
options={[
{ key: "", value: t("allTypes") },
...(types || []).map(({ type, name }) => ({
key: type!,
value: name!,
})),
]}
/>
</FormGroup>
)}
<ActionGroup>
<Button
variant="primary"
type="submit"
data-testid="search-btn"
isDisabled={!isDirty}
>
{t("search")}
</Button>
<Button
variant="link"
data-testid="revert-btn"
onClick={() => onSearch({})}
>
{t("clear")}
</Button>
</ActionGroup>
</Form>
)}
<ActionGroup>
<Button
variant="primary"
type="submit"
data-testid="search-btn"
isDisabled={!isDirty}
>
{t("search")}
</Button>
<Button
variant="link"
data-testid="revert-btn"
onClick={() => onSearch({})}
>
{t("clear")}
</Button>
</ActionGroup>
</Form>
</FormProvider>
</Dropdown>
);
};
40 changes: 8 additions & 32 deletions js/apps/admin-ui/src/clients/authorization/Settings.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,27 @@
import type ResourceServerRepresentation from "@keycloak/keycloak-admin-client/lib/defs/resourceServerRepresentation";
import {
AlertVariant,
Button,
Divider,
FormGroup,
PageSection,
Radio,
Switch,
} from "@patternfly/react-core";
import { useState } from "react";
import { Controller, FormProvider, useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { HelpItem } from "ui-shared";

import { adminClient } from "../../admin-client";
import type ResourceServerRepresentation from "@keycloak/keycloak-admin-client/lib/defs/resourceServerRepresentation";
import { DefaultSwitchControl } from "../../components/SwitchControl";
import { useAlerts } from "../../components/alert/Alerts";
import { FixedButtonsGroup } from "../../components/form/FixedButtonGroup";
import { FormAccess } from "../../components/form/FormAccess";
import { KeycloakSpinner } from "../../components/keycloak-spinner/KeycloakSpinner";
import { useAccess } from "../../context/access/Access";
import { useFetch } from "../../utils/useFetch";
import useToggle from "../../utils/useToggle";
import { DecisionStrategySelect } from "./DecisionStrategySelect";
import { ImportDialog } from "./ImportDialog";
import { useFetch } from "../../utils/useFetch";
import { useAccess } from "../../context/access/Access";

const POLICY_ENFORCEMENT_MODES = [
"ENFORCING",
Expand Down Expand Up @@ -145,35 +144,12 @@ export const AuthorizationSettings = ({ clientId }: { clientId: string }) => {
</FormGroup>
<FormProvider {...form}>
<DecisionStrategySelect isLimited />
</FormProvider>
<FormGroup
hasNoPaddingTop
label={t("allowRemoteResourceManagement")}
fieldId="allowRemoteResourceManagement"
labelIcon={
<HelpItem
helpText={t("allowRemoteResourceManagementHelp")}
fieldLabelId="allowRemoteResourceManagement"
/>
}
>
<Controller
<DefaultSwitchControl
name="allowRemoteResourceManagement"
data-testid="allowRemoteResourceManagement"
defaultValue={false}
control={control}
render={({ field }) => (
<Switch
id="allowRemoteResourceManagement"
label={t("on")}
labelOff={t("off")}
isChecked={field.value}
onChange={field.onChange}
aria-label={t("allowRemoteResourceManagement")}
/>
)}
label={t("allowRemoteResourceManagement")}
labelIcon={t("allowRemoteResourceManagementHelp")}
/>
</FormGroup>
</FormProvider>
<FixedButtonsGroup
name="authenticationSettings"
reset={() => reset(resource)}
Expand Down

0 comments on commit a1211ee

Please sign in to comment.