libre.sh/keycloak-scim
3
0
Fork 0
Code Issues 15 Pull requests Releases 1 Packages Activity Actions

Removed use of inline components (#17687)

Browse source
This commit is contained in:
Erik Jan de Wit 2023-03-21 11:36:20 +01:00 committed by GitHub
parent 6d82e5634f
commit 39cf79dae1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 228 additions and 177 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
js/apps/admin-ui/src/clients/ClientsSection.tsx
View file

@ -81,6 +81,39 @@ const ClientHomeLink = (client: ClientRepresentation) => {
return <FormattedLink href={href} />;
};
const ToolbarItems = () => {
const { t } = useTranslation("clients");
const { realm } = useRealm();
const { hasAccess } = useAccess();
const isManager = hasAccess("manage-clients");
if (!isManager) return <span />;
return (
<>
<ToolbarItem>
<Button
component={(props) => <Link {...props} to={toAddClient({ realm })} />}
>
{t("createClient")}
</Button>
</ToolbarItem>
<ToolbarItem>
<Button
component={(props) => (
<Link {...props} to={toImportClient({ realm })} />
)}
variant="link"
data-testid="importClient"
>
{t("importClient")}
</Button>
</ToolbarItem>
</>
);
};
export default function ClientsSection() {
const { t } = useTranslation("clients");
const { addAlert, addError } = useAlerts();
@ -131,35 +164,6 @@ export default function ClientsSection() {
},
});
const ToolbarItems = () => {
if (!isManager) return <span />;
return (
<>
<ToolbarItem>
<Button
component={(props) => (
<Link {...props} to={toAddClient({ realm })} />
)}
>
{t("createClient")}
</Button>
</ToolbarItem>
<ToolbarItem>
<Button
component={(props) => (
<Link {...props} to={toImportClient({ realm })} />
)}
variant="link"
data-testid="importClient"
>
{t("importClient")}
</Button>
</ToolbarItem>
</>
);
};
return (
<>
<ViewHeader

26
js/apps/admin-ui/src/clients/authorization/Permissions.tsx
View file

@ -52,6 +52,19 @@ type ExpandablePolicyRepresentation = PolicyRepresentation & {
isExpanded: boolean;
};
const AssociatedPoliciesRenderer = ({
row,
}: {
row: ExpandablePolicyRepresentation;
}) => {
return (
<>
{row.associatedPolicies?.[0]?.name}{" "}
<MoreLabel array={row.associatedPolicies} />
</>
);
};
export const AuthorizationPermissions = ({ clientId }: PermissionsProps) => {
const { t } = useTranslation("clients");
const navigate = useNavigate();
@ -78,19 +91,6 @@ export const AuthorizationPermissions = ({ clientId }: PermissionsProps) => {
const [max, setMax] = useState(10);
const [first, setFirst] = useState(0);
const AssociatedPoliciesRenderer = ({
row,
}: {
row: ExpandablePolicyRepresentation;
}) => {
return (
<>
{row.associatedPolicies?.[0]?.name}{" "}
<MoreLabel array={row.associatedPolicies} />
</>
);
};
useFetch(
async () => {
const permissions = await adminClient.clients.findPermissions({

33
js/apps/admin-ui/src/clients/registration/ClientRegistrationList.tsx
View file

@ -19,6 +19,25 @@ type ClientRegistrationListProps = {
subType: "anonymous" | "authenticated";
};
const DetailLink = (comp: ComponentRepresentation) => {
const { realm } = useRealm();
const { subTab } = useParams<ClientRegistrationParams>();
return (
<Link
key={comp.id}
to={toRegistrationProvider({
realm,
subTab: subTab || "anonymous",
providerId: comp.providerId!,
id: comp.id,
})}
>
{comp.name}
</Link>
);
};
export const ClientRegistrationList = ({
subType,
}: ClientRegistrationListProps) => {
@ -43,20 +62,6 @@ export const ClientRegistrationList = ({
[selectedPolicy]
);
const DetailLink = (comp: ComponentRepresentation) => (
<Link
key={comp.id}
to={toRegistrationProvider({
realm,
subTab: subTab || "anonymous",
providerId: comp.providerId!,
id: comp.id,
})}
>
{comp.name}
</Link>
);
const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({
titleKey: "clients:clientRegisterPolicyDeleteConfirmTitle",
messageKey: t("clientRegisterPolicyDeleteConfirm", {

47
js/apps/admin-ui/src/components/role-mapping/RoleMapping.tsx
View file

@ -158,30 +158,6 @@ export const RoleMapping = ({
},
});
const ManagerToolbarItems = () => {
if (!isManager) return <span />;
return (
<>
<ToolbarItem>
<Button data-testid="assignRole" onClick={() => setShowAssign(true)}>
{t("common:assignRole")}
</Button>
</ToolbarItem>
<ToolbarItem>
<Button
variant="link"
data-testid="unAssignRole"
onClick={toggleDeleteDialog}
isDisabled={selected.length === 0}
>
{t("common:unAssignRole")}
</Button>
</ToolbarItem>
</>
);
};
return (
<>
{showAssign && (
@ -219,7 +195,28 @@ export const RoleMapping = ({
}}
/>
</ToolbarItem>
<ManagerToolbarItems />
{isManager && (
<>
<ToolbarItem>
<Button
data-testid="assignRole"
onClick={() => setShowAssign(true)}
>
{t("common:assignRole")}
</Button>
</ToolbarItem>
<ToolbarItem>
<Button
variant="link"
data-testid="unAssignRole"
onClick={toggleDeleteDialog}
isDisabled={selected.length === 0}
>
{t("common:unAssignRole")}
</Button>
</ToolbarItem>
</>
)}
</>
}
actions={

56
js/apps/admin-ui/src/components/roles-list/RolesList.tsx
View file

@ -18,6 +18,36 @@ import { KeycloakDataTable } from "../table-toolbar/KeycloakDataTable";
import "./RolesList.css";
type RoleDetailLinkProps = RoleRepresentation & {
defaultRoleName?: string;
toDetail: (roleId: string) => To;
messageBundle?: string;
};
const RoleDetailLink = ({
defaultRoleName,
toDetail,
messageBundle,
...role
}: RoleDetailLinkProps) => {
const { t } = useTranslation(messageBundle);
const { realm } = useRealm();
return role.name !== defaultRoleName ? (
<Link to={toDetail(role.id!)}>{role.name}</Link>
) : (
<>
<Link to={toRealmSettings({ realm, tab: "user-registration" })}>
{role.name}{" "}
</Link>
<HelpItem
helpText={t(`${messageBundle}:defaultRole`)}
fieldLabelId="defaultRole"
/>
</>
);
};
type RolesListProps = {
paginated?: boolean;
parentRoleId?: string;
@ -58,23 +88,6 @@ export const RolesList = ({
[]
);
const RoleDetailLink = (role: RoleRepresentation) =>
role.name !== realm?.defaultRole?.name ? (
<Link to={toDetail(role.id!)}>{role.name}</Link>
) : (
<>
<Link
to={toRealmSettings({ realm: realmName, tab: "user-registration" })}
>
{role.name}{" "}
</Link>
<HelpItem
helpText={t(`${messageBundle}:defaultRole`)}
fieldLabelId="defaultRole"
/>
</>
);
const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({
titleKey: "roles:roleDeleteConfirm",
messageKey: t("roles:roleDeleteConfirmDialog", {
@ -146,7 +159,14 @@ export const RolesList = ({
{
name: "name",
displayKey: "roles:roleName",
cellRenderer: RoleDetailLink,
cellRenderer: (row) => (
<RoleDetailLink
{...row}
defaultRoleName={realm.defaultRole?.name}
toDetail={toDetail}
messageBundle={messageBundle}
/>
),
},
{
name: "composite",

41
js/apps/admin-ui/src/events/EventsSection.tsx
View file

@ -93,6 +93,29 @@ const DetailCell = (event: EventRepresentation) => (
</DescriptionList>
);
const UserDetailLink = (event: EventRepresentation) => {
const { t } = useTranslation("events");
const { realm } = useRealm();
return (
<>
{event.userId && (
<Link
key={`link-${event.time}-${event.type}`}
to={toUser({
realm,
id: event.userId,
tab: "settings",
})}
>
{event.userId}
</Link>
)}
{!event.userId && t("noUserDetails")}
</>
);
};
export default function EventsSection() {
const { t } = useTranslation("events");
const { adminClient } = useAdminClient();
@ -193,24 +216,6 @@ export default function EventsSection() {
commitFilters();
}
const UserDetailLink = (event: EventRepresentation) => (
<>
{event.userId && (
<Link
key={`link-${event.time}-${event.type}`}
to={toUser({
realm,
id: event.userId,
tab: "settings",
})}
>
{event.userId}
</Link>
)}
{!event.userId && t("noUserDetails")}
</>
);
const userEventSearchFormDisplay = () => {
return (
<Flex

27
js/apps/admin-ui/src/groups/GroupTable.tsx
View file

@ -87,20 +87,6 @@ export const GroupTable = ({
return groupsData || [];
};
const GroupNameCell = (group: GroupRepresentation) => {
if (!canViewDetails) return <span>{group.name}</span>;
return (
<Link
key={group.id}
to={`${location.pathname}/${group.id}`}
onClick={() => setSubGroups([...subGroups, group])}
>
{group.name}
</Link>
);
};
return (
<>
<DeleteGroup
@ -221,7 +207,18 @@ export const GroupTable = ({
{
name: "name",
displayKey: "groups:groupName",
cellRenderer: GroupNameCell,
cellRenderer: (group) =>
canViewDetails ? (
<Link
key={group.id}
to={`${location.pathname}/${group.id}`}
onClick={() => setSubGroups([...subGroups, group])}
>
{group.name}
</Link>
) : (
<span>{group.name}</span>
),
},
]}
emptyState={

42
js/apps/admin-ui/src/groups/Members.tsx
View file

@ -32,10 +32,32 @@ type MembersOf = UserRepresentation & {
membership: GroupRepresentation[];
};
const MemberOfRenderer = (member: MembersOf) => {
return (
<>
{member.membership.map((group, index) => (
<>
<GroupPath key={group.id} group={group} />
{member.membership[index + 1] ? ", " : ""}
</>
))}
</>
);
};
const UserDetailLink = (user: MembersOf) => {
const { realm } = useRealm();
return (
<Link key={user.id} to={toUser({ realm, id: user.id!, tab: "settings" })}>
{user.username}
</Link>
);
};
export const Members = () => {
const { t } = useTranslation("groups");
const { adminClient } = useAdminClient();
const { realm } = useRealm();
const { addAlert, addError } = useAlerts();
const location = useLocation();
const id = getLastId(location.pathname);
@ -90,24 +112,6 @@ export const Members = () => {
});
};
const MemberOfRenderer = (member: MembersOf) => {
return (
<>
{member.membership.map((group, index) => (
<>
<GroupPath key={group.id} group={group} />
{member.membership[index + 1] ? ", " : ""}
</>
))}
</>
);
};
const UserDetailLink = (user: MembersOf) => (
<Link key={user.id} to={toUser({ realm, id: user.id!, tab: "settings" })}>
{user.username}
</Link>
);
return (
<>
{addMembers && (

39
js/apps/admin-ui/src/identity-providers/add/DetailSettings.tsx
View file

@ -128,6 +128,28 @@ const Header = ({ onChange, value, save, toggleDeleteDialog }: HeaderProps) => {
);
};
type MapperLinkProps = IdPWithMapperAttributes & {
provider?: IdentityProviderRepresentation;
};
const MapperLink = ({ name, mapperId, provider }: MapperLinkProps) => {
const { realm } = useRealm();
const { alias } = useParams<IdentityProviderParams>();
return (
<Link
to={toIdentityProviderEditMapper({
realm,
alias,
providerId: provider?.providerId!,
id: mapperId,
})}
>
{name}
</Link>
);
};
export default function DetailSettings() {
const { t } = useTranslation("identity-providers");
const { alias, providerId } = useParams<IdentityProviderParams>();
@ -146,19 +168,6 @@ export default function DetailSettings() {
const { profileInfo } = useServerInfo();
const refresh = () => setKey(key + 1);
const MapperLink = ({ name, mapperId }: IdPWithMapperAttributes) => (
<Link
to={toIdentityProviderEditMapper({
realm,
alias,
providerId: provider?.providerId!,
id: mapperId,
})}
>
{name}
</Link>
);
useFetch(
() => adminClient.identityProviders.findOne({ alias }),
(fetchedProvider) => {
@ -460,7 +469,9 @@ export default function DetailSettings() {
{
name: "name",
displayKey: "common:name",
cellRenderer: MapperLink,
cellRenderer: (row) => (
<MapperLink {...row} provider={provider} />
),
},
{
name: "category",

18
js/apps/admin-ui/src/realm-settings/AddClientProfileModal.tsx
View file

@ -12,6 +12,17 @@ type ClientProfile = ClientProfileRepresentation & {
global: boolean;
};
const AliasRenderer = ({ name, global }: ClientProfile) => {
const { t } = useTranslation("roles");
return (
<>
{name}{" "}
{global && <Label color="blue">{t("realm-settings:global")}</Label>}
</>
);
};
export type AddClientProfileModalProps = {
open: boolean;
toggleDialog: () => void;
@ -57,13 +68,6 @@ export const AddClientProfileModal = (props: AddClientProfileModalProps) => {
return <KeycloakSpinner />;
}
const AliasRenderer = ({ name, global }: ClientProfile) => (
<>
{name}{" "}
{global && <Label color="blue">{t("realm-settings:global")}</Label>}
</>
);
return (
<Modal
data-testid="addClientProfile"

14
js/apps/admin-ui/src/user-federation/ldap/mappers/LdapMapperList.tsx
View file

@ -21,6 +21,14 @@ export type LdapMapperListProps = {
toDetail: (mapperId: string) => To;
};
type MapperLinkProps = ComponentRepresentation & {
toDetail: (mapperId: string) => To;
};
const MapperLink = ({ toDetail, ...mapper }: MapperLinkProps) => (
<Link to={toDetail(mapper.id!)}>{mapper.name}</Link>
);
export const LdapMapperList = ({ toCreate, toDetail }: LdapMapperListProps) => {
const navigate = useNavigate();
const { t } = useTranslation("user-federation");
@ -77,10 +85,6 @@ export const LdapMapperList = ({ toCreate, toDetail }: LdapMapperListProps) => {
},
});
const MapperLink = (mapper: ComponentRepresentation) => (
<Link to={toDetail(mapper.id!)}>{mapper.name}</Link>
);
return (
<>
<DeleteConfirm />
@ -112,7 +116,7 @@ export const LdapMapperList = ({ toCreate, toDetail }: LdapMapperListProps) => {
columns={[
{
name: "name",
cellRenderer: MapperLink,
cellRenderer: (row) => <MapperLink {...row} toDetail={toDetail} />,
},
{
name: "type",