libre.sh/keycloak-scim
2
0
Fork 0
Code Issues 14 Pull requests Releases Packages Activity Actions 6

Adds realm role details tab to storybook (#217)

Browse source 
* parent 9eabcdbee4
author jenny-s51 <jshandel12@gmail.com> 1602688597 -0400
committer jenny-s51 <jshandel12@gmail.com> 1605296992 -0500

add file for realm role details

add details and attributes tabs

clean up a bit

get name working

add reload

fix route config

fix prettier

add storybook demo for realm details

add details and attributes tabs

* parent 95101205603aec53689aa61488ffb4820591b8d1
author jenny-s51 <jshandel12@gmail.com> 1604507462 -0500
committer jenny-s51 <jshandel12@gmail.com> 1605297630 -0500

parent 95101205603aec53689aa61488ffb4820591b8d1
author jenny-s51 <jshandel12@gmail.com> 1604507462 -0500
committer jenny-s51 <jshandel12@gmail.com> 1605297556 -0500

parent 95101205603aec53689aa61488ffb4820591b8d1
author jenny-s51 <jshandel12@gmail.com> 1604507462 -0500
committer jenny-s51 <jshandel12@gmail.com> 1605297545 -0500

parent 9eabcdbee4
author jenny-s51 <jshandel12@gmail.com> 1602688597 -0400
committer jenny-s51 <jshandel12@gmail.com> 1605296992 -0500

add file for realm role details

add details and attributes tabs

clean up a bit

get name working

add reload

fix route config

fix prettier

add storybook demo for realm details

add details and attributes tabs

clean up a bit

clean up a bit

add reload

fix route config

add storybook demo for realm details

Delete messages.json

cleaning up, wip

fix CI

clean up more

* add back role messages

* fix format

* revert role list to master

* remove reload

* fix spacing and add FormAccess component

* fix route

* fix formatting
This commit is contained in:
Eugenia 2020-11-18 16:52:18 -05:00 committed by GitHub
parent 7592621d77
commit 147be1d6b2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 121 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/common-messages.json
View file

@ -8,6 +8,7 @@
"no": "No",
"create": "Create",
"save": "Save",
"reload": "Reload",
"cancel": "Cancel",
"continue": "Continue",
"delete": "Delete",

76
src/realm-roles/RealmRoleDetails.tsx Normal file
View file

@ -0,0 +1,76 @@
import React, { useState } from "react";
import { useHistory } from "react-router-dom";
import {
ActionGroup,
Button,
FormGroup,
PageSection,
Tab,
Tabs,
TabTitleText,
TextArea,
TextInput,
} from "@patternfly/react-core";
import { useTranslation } from "react-i18next";
import { useForm } from "react-hook-form";
import { ViewHeader } from "../components/view-header/ViewHeader";
import { RoleRepresentation } from "../model/role-model";
import { FormAccess } from "../components/form-access/FormAccess";
export const RolesForm = () => {
const { t } = useTranslation("client-scopes");
const { register, errors } = useForm<RoleRepresentation>();
const history = useHistory();
const [activeTab, setActiveTab] = useState(0);
return (
<>
<ViewHeader titleKey={"Role Name"} subKey="" />
<PageSection variant="light">
<Tabs
activeKey={activeTab}
onSelect={(_, key) => setActiveTab(key as number)}
isBox
>
<Tab eventKey={0} title={<TabTitleText>{t("Details")}</TabTitleText>}>
<FormAccess isHorizontal role="manage-realm" className="pf-u-mt-lg">
<FormGroup
label={t("Role name")}
fieldId="kc-name"
isRequired
validated={errors.name ? "error" : "default"}
helperTextInvalid={t("common:required")}
>
<TextInput
ref={register({ required: true })}
type="text"
id="kc-name"
name="name"
/>
</FormGroup>
<FormGroup label={t("description")} fieldId="kc-description">
<TextArea
ref={register}
type="text"
id="kc-description"
name="description"
/>
</FormGroup>
<ActionGroup>
<Button variant="primary" type="submit">
{t("common:save")}
</Button>
<Button variant="link" onClick={() => history.push("/roles/")}>
{t("common:reload")}
</Button>
</ActionGroup>
</FormAccess>
</Tab>
</Tabs>
</PageSection>
</>
);
};

22
src/realm-roles/RoleList.tsx
View file

@ -16,6 +16,7 @@ import { AlertVariant, ButtonVariant } from "@patternfly/react-core";
import { useAdminClient } from "../context/auth/AdminClient";
import { useAlerts } from "../components/alert/Alerts";
import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
import { Link } from "react-router-dom";
type RolesListProps = {
roles?: RoleRepresentation[];
@ -29,6 +30,23 @@ const columns: (keyof RoleRepresentation)[] = [
];
export const RolesList = ({ roles, refresh }: RolesListProps) => {
const data1 = roles?.map((c) => {
return {
cells: columns.map((col) => {
if (col === "name") {
return (
<>
<Link key={c.id} to={`/roles/${c.id}`}>
{c[col]}
</Link>
</>
);
}
return c[col];
}),
};
});
const { t } = useTranslation("roles");
const adminClient = useAdminClient();
const { addAlert } = useAlerts();
@ -40,7 +58,7 @@ export const RolesList = ({ roles, refresh }: RolesListProps) => {
const externalLink = (): IFormatter => (data?: IFormatterValueType) => {
return (data ? (
<ExternalLink href={data.toString()} />
<ExternalLink href={"roles/" + data.toString()} />
) : undefined) as object;
};
@ -96,7 +114,7 @@ export const RolesList = ({ roles, refresh }: RolesListProps) => {
},
{ title: t("description"), cellFormatters: [emptyFormatter()] },
]}
rows={data}
rows={data1}
actions={[
{
title: t("common:Delete"),

7
src/route-config.ts
View file

@ -12,6 +12,7 @@ import { GroupsSection } from "./groups/GroupsSection";
import { IdentityProvidersSection } from "./identity-providers/IdentityProvidersSection";
import { PageNotFoundSection } from "./PageNotFoundSection";
import { NewRoleForm } from "./realm-roles/add/NewRoleForm";
import { RolesForm } from "./realm-roles/RealmRoleDetails";
import { RealmRolesSection } from "./realm-roles/RealmRolesSection";
import { RealmSettingsSection } from "./realm-settings/RealmSettingsSection";
import { NewRealmForm } from "./realm/add/NewRealmForm";
@ -104,6 +105,12 @@ export const routes: RoutesFn = (t: TFunction) => [
breadcrumb: t("roles:roleList"),
access: "view-realm",
},
{
path: "/roles/:id",
component: RolesForm,
breadcrumb: t("roles:roleDetails"),
access: "view-realm",
},
{
path: "/add-role",
component: NewRoleForm,

17
src/stories/RoleDetails.stories.tsx Normal file
View file

@ -0,0 +1,17 @@
import React from "react";
import { Meta } from "@storybook/react";
import { Page } from "@patternfly/react-core";
import { RolesForm } from "../realm-roles/RealmRoleDetails";
export default {
title: "Role details tab",
component: RolesForm,
} as Meta;
export const RoleDetailsExample = () => {
return (
<Page>
<RolesForm />
</Page>
);
};