Skip to content

Commit

Permalink
Remove columns and un-clearable filters
Browse files Browse the repository at this point in the history 
fixes: keycloak#34734
Signed-off-by: Erik Jan de Wit <[email protected]>
  • Loading branch information
@edewit
edewit committed Nov 8, 2024
1 parent 46f7fb5 commit ce12ba2
Show file tree
Hide file tree
Showing 9 changed files with 132 additions and 112 deletions.
3 changes: 1 addition & 2 deletions js/apps/admin-ui/cypress/e2e/clients_test.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1221,8 +1221,7 @@ describe("Clients test", () => {
.checkTabExists(ClientsDetailsTab.Sessions, true)
.checkTabExists(ClientsDetailsTab.Permissions, true)
.checkTabExists(ClientsDetailsTab.Advanced, true)
.checkTabExists(ClientsDetailsTab.UserEvents, true)
.checkNumberOfTabsIsEqual(6);
.checkNumberOfTabsIsEqual(5);
});

it("Hides the delete action", () => {
Expand Down
2 changes: 1 addition & 1 deletion ...dmin-ui/cypress/support/pages/admin-ui/manage/clients/client_details/ClientDetailsPage.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export enum ClientsDetailsTab {
ServiceAccountsRoles = "Service accounts roles",
Advanced = "Advanced",
Scope = "Scope",
UserEvents = "User events",
UserEvents = "Events",
}

export default class ClientDetailsPage extends CommonPage {
Expand Down
1 change: 1 addition & 0 deletions js/apps/admin-ui/maven-resources/theme/keycloak.v2/admin/messages/messages_en.properties
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3296,3 +3296,4 @@ clearUserCacheHelp=This will clear entries for all realms.
clearKeysCacheHelp=Clears all entries from the cache of external public keys. These are keys of external clients or identity providers. This will clear all entries for all realms.
clearCacheSuccess=Cache cleared successfully
clearCacheError=Could not clear cache\: {{error}}
expandRow=Expand row
110 changes: 60 additions & 50 deletions js/apps/admin-ui/src/clients/ClientDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,7 @@ export default function ClientDetails() {

const { t } = useTranslation();
const { addAlert, addError } = useAlerts();
const { realm } = useRealm();
const { realm, realmRepresentation } = useRealm();
const { hasAccess } = useAccess();
const isFeatureEnabled = useIsFeatureEnabled();

Expand Down Expand Up @@ -226,55 +226,65 @@ export default function ClientDetails() {
return sortBy(roles, (role) => role.name?.toUpperCase());
};

const useTab = (tab: ClientTab) =>
useRoutableTab(
toClient({
realm,
clientId,
tab,
}),
);

const settingsTab = useTab("settings");
const keysTab = useTab("keys");
const credentialsTab = useTab("credentials");
const rolesTab = useTab("roles");
const clientScopesTab = useTab("clientScopes");
const authorizationTab = useTab("authorization");
const serviceAccountTab = useTab("serviceAccount");
const sessionsTab = useTab("sessions");
const permissionsTab = useTab("permissions");
const advancedTab = useTab("advanced");
const userEventsTab = useTab("user-events");

const useClientScopesTab = (tab: ClientScopesTab) =>
useRoutableTab(
toClientScopesTab({
realm,
clientId,
tab,
}),
);

const clientScopesSetupTab = useClientScopesTab("setup");
const clientScopesEvaluateTab = useClientScopesTab("evaluate");
const tab = (tab: ClientTab) =>
toClient({
realm,
clientId,
tab,
});

const settingsTab = useRoutableTab(tab("settings"));
const keysTab = useRoutableTab(tab("keys"));
const credentialsTab = useRoutableTab(tab("credentials"));
const rolesTab = useRoutableTab(tab("roles"));
const clientScopesTab = useRoutableTab(tab("clientScopes"));
const authorizationTab = useRoutableTab(tab("authorization"));
const serviceAccountTab = useRoutableTab(tab("serviceAccount"));
const sessionsTab = useRoutableTab(tab("sessions"));
const permissionsTab = useRoutableTab(tab("permissions"));
const advancedTab = useRoutableTab(tab("advanced"));
const userEventsTab = useRoutableTab(tab("user-events"));

const clientScopesTabRoute = (tab: ClientScopesTab) =>
toClientScopesTab({
realm,
clientId,
tab,
});

const clientScopesSetupTab = useRoutableTab(clientScopesTabRoute("setup"));
const clientScopesEvaluateTab = useRoutableTab(
clientScopesTabRoute("evaluate"),
);

const useAuthorizationTab = (tab: AuthorizationTab) =>
useRoutableTab(
toAuthorizationTab({
realm,
clientId,
tab,
}),
);
const authorizationTabRoute = (tab: AuthorizationTab) =>
toAuthorizationTab({
realm,
clientId,
tab,
});

const authorizationSettingsTab = useAuthorizationTab("settings");
const authorizationResourcesTab = useAuthorizationTab("resources");
const authorizationScopesTab = useAuthorizationTab("scopes");
const authorizationPoliciesTab = useAuthorizationTab("policies");
const authorizationPermissionsTab = useAuthorizationTab("permissions");
const authorizationEvaluateTab = useAuthorizationTab("evaluate");
const authorizationExportTab = useAuthorizationTab("export");
const authorizationSettingsTab = useRoutableTab(
authorizationTabRoute("settings"),
);
const authorizationResourcesTab = useRoutableTab(
authorizationTabRoute("resources"),
);
const authorizationScopesTab = useRoutableTab(
authorizationTabRoute("scopes"),
);
const authorizationPoliciesTab = useRoutableTab(
authorizationTabRoute("policies"),
);
const authorizationPermissionsTab = useRoutableTab(
authorizationTabRoute("permissions"),
);
const authorizationEvaluateTab = useRoutableTab(
authorizationTabRoute("evaluate"),
);
const authorizationExportTab = useRoutableTab(
authorizationTabRoute("export"),
);

const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({
titleKey: "clientDeleteConfirmTitle",
Expand Down Expand Up @@ -665,10 +675,10 @@ export default function ClientDetails() {
>
<AdvancedTab save={save} client={client} />
</Tab>
{hasAccess("view-events") && (
{hasAccess("view-events") && realmRepresentation?.eventsEnabled && (
<Tab
data-testid="user-events-tab"
title={<TabTitleText>{t("userEvents")}</TabTitleText>}
title={<TabTitleText>{t("events")}</TabTitleText>}
{...userEventsTab}
>
<UserEvents client={client.clientId} />
Expand Down
10 changes: 5 additions & 5 deletions js/apps/admin-ui/src/events/EventsSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,18 @@ import helpUrls from "../help-urls";
import { toRealmSettings } from "../realm-settings/routes/RealmSettings";
import { AdminEvents } from "./AdminEvents";
import { UserEvents } from "./UserEvents";
import { EventsTab, toEvents } from "./routes/Events";
import { toEvents } from "./routes/Events";

import "./events.css";

export default function EventsSection() {
const { t } = useTranslation();
const { realm } = useRealm();

const useTab = (tab: EventsTab) => useRoutableTab(toEvents({ realm, tab }));

const userEventsTab = useTab("user-events");
const adminEventsTab = useTab("admin-events");
const userEventsTab = useRoutableTab(toEvents({ realm, tab: "user-events" }));
const adminEventsTab = useRoutableTab(
toEvents({ realm, tab: "admin-events" }),
);

return (
<>
Expand Down
65 changes: 34 additions & 31 deletions js/apps/admin-ui/src/events/UserEvents.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,10 +128,7 @@ export const UserEvents = ({ user, client }: UserEventsProps) => {
const [events, setEvents] = useState<RealmEventsConfigRepresentation>();
const [activeFilters, setActiveFilters] = useState<
Partial<UserEventSearchForm>
>({
...(user && { user }),
...(client && { client }),
});
>({});

const defaultValues: UserEventSearchForm = {
client: client ? client : "",
Expand Down Expand Up @@ -174,6 +171,8 @@ export const UserEvents = ({ user, client }: UserEventsProps) => {
return adminClient.realms.findEvents({
// The admin client wants 'dateFrom' and 'dateTo' to be Date objects, however it cannot actually handle them so we need to cast to any.
...(activeFilters as any),
client,
user,
realm,
first,
max,
Expand Down Expand Up @@ -231,7 +230,7 @@ export const UserEvents = ({ user, client }: UserEventsProps) => {
>
<FlexItem>
<DropdownPanel
buttonText={t("searchForUserEvent")}
buttonText={t("searchUserEventsBtn")}
setSearchDropdownOpen={setSearchDropdownOpen}
searchDropdownOpen={searchDropdownOpen}
marginRight="2.5rem"
Expand All @@ -243,12 +242,13 @@ export const UserEvents = ({ user, client }: UserEventsProps) => {
onSubmit={handleSubmit(onSubmit)}
isHorizontal
>
<TextControl
name="user"
label={t("userId")}
data-testid="userId-searchField"
isDisabled={!!user}
/>
{!user && (
<TextControl
name="user"
label={t("userId")}
data-testid="userId-searchField"
/>
)}
<FormGroup
label={t("eventType")}
fieldId="kc-eventType"
Expand Down Expand Up @@ -310,12 +310,13 @@ export const UserEvents = ({ user, client }: UserEventsProps) => {
)}
/>
</FormGroup>
<TextControl
name="client"
label={t("client")}
data-testid="client-searchField"
isDisabled={!!client}
/>
{!client && (
<TextControl
name="client"
label={t("client")}
data-testid="client-searchField"
/>
)}
<FormGroup
label={t("dateFrom")}
fieldId="kc-dateFrom"
Expand Down Expand Up @@ -386,16 +387,11 @@ export const UserEvents = ({ user, client }: UserEventsProps) => {
string | EventType[],
];

const disableClose =
(key === "user" && !!user) ||
(key === "client" && !!client);

return (
<ChipGroup
className="pf-v5-u-mt-md pf-v5-u-mr-md"
key={key}
categoryName={filterLabels[key]}
isClosable={!disableClose}
onClick={() => removeFilter(key)}
>
{typeof value === "string" ? (
Expand Down Expand Up @@ -443,11 +439,14 @@ export const UserEvents = ({ user, client }: UserEventsProps) => {
cellRenderer: (row) =>
formatDate(new Date(row.time!), FORMAT_DATE_AND_TIME),
},
{
name: "userId",
displayKey: "user",
cellRenderer: UserDetailLink,
},
...(!user
? [
{
name: "userId",
cellRenderer: UserDetailLink,
},
]
: []),
{
name: "type",
displayKey: "eventType",
Expand All @@ -458,10 +457,14 @@ export const UserEvents = ({ user, client }: UserEventsProps) => {
displayKey: "ipAddress",
transforms: [cellWidth(10)],
},
{
name: "clientId",
displayKey: "client",
},
...(!client
? [
{
name: "clientId",
displayKey: "client",
},
]
: []),
]}
emptyState={
<ListEmptyState
Expand Down
3 changes: 2 additions & 1 deletion js/apps/admin-ui/src/realm-settings/event-config/EventsTab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,6 @@ export const EventsTab = ({ realm }: EventsTabProps) => {
},
);
}
refreshRealm();

try {
await adminClient.realms.updateConfigEvents(
Expand All @@ -133,6 +132,8 @@ export const EventsTab = ({ realm }: EventsTabProps) => {
error,
);
}

refreshRealm();
};

const addEventTypes = async (eventTypes: EventType[]) => {
Expand Down
28 changes: 14 additions & 14 deletions js/apps/admin-ui/src/user/EditUser.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,18 +102,18 @@ export default function EditUser() {
tab,
});

const useTab = (tab: UserTab) => useRoutableTab(toTab(tab));

const settingsTab = useTab("settings");
const attributesTab = useTab("attributes");
const credentialsTab = useTab("credentials");
const roleMappingTab = useTab("role-mapping");
const groupsTab = useTab("groups");
const organizationsTab = useTab("organizations");
const consentsTab = useTab("consents");
const identityProviderLinksTab = useTab("identity-provider-links");
const sessionsTab = useTab("sessions");
const userEventsTab = useTab("user-events");
const settingsTab = useRoutableTab(toTab("settings"));
const attributesTab = useRoutableTab(toTab("attributes"));
const credentialsTab = useRoutableTab(toTab("credentials"));
const roleMappingTab = useRoutableTab(toTab("role-mapping"));
const groupsTab = useRoutableTab(toTab("groups"));
const organizationsTab = useRoutableTab(toTab("organizations"));
const consentsTab = useRoutableTab(toTab("consents"));
const identityProviderLinksTab = useRoutableTab(
toTab("identity-provider-links"),
);
const sessionsTab = useRoutableTab(toTab("sessions"));
const userEventsTab = useRoutableTab(toTab("user-events"));

useFetch(
async () =>
Expand Down Expand Up @@ -426,10 +426,10 @@ export default function EditUser() {
>
<UserSessions />
</Tab>
{hasAccess("view-events") && (
{hasAccess("view-events") && realm?.eventsEnabled && (
<Tab
data-testid="user-events-tab"
title={<TabTitleText>{t("userEvents")}</TabTitleText>}
title={<TabTitleText>{t("events")}</TabTitleText>}
{...userEventsTab}
>
<UserEvents user={user.id} />
Expand Down
Loading

0 comments on commit ce12ba2

Please sign in to comment.