web/user: fix request access URL from agent not working (goauthentik#25113)

Author: BeryJu

web/src/user/Routes.ts

@@ -1,6 +1,6 @@
 import "#user/LibraryPage/ak-library";
 
-import { Route } from "#elements/router/Route";
+import { Route, UUID_REGEX } from "#elements/router/Route";
 
 import { html } from "lit";
 
@@ -13,6 +13,15 @@ export const ROUTES: Route[] = [
         await import("#user/requests/AccessRequestsPage");
         return html`<ak-access-requests-page></ak-access-requests-page>`;
     }),
+    new Route(
+        new RegExp(`^/requests/access-request/(?<uuid>${UUID_REGEX})/fulfill$`),
+        async (args) => {
+            await import("#user/requests/AccessRequestsPage");
+            return html`<ak-access-requests-page
+                request-to-fulfill=${args.uuid}
+            ></ak-access-requests-page>`;
+        },
+    ),
     new Route(new RegExp("^/settings$"), async () => {
         await import("#user/user-settings/UserSettingsPage");
         return html`<ak-user-settings></ak-user-settings>`;

web/src/user/requests/AccessRequestsPage.ts

@@ -13,13 +13,14 @@ import { showAPIErrorMessage } from "#elements/messages/MessageContainer";
 import { paramURL } from "#elements/router/RouterOutlet";
 import { SlottedTemplateResult } from "#elements/types";
 
+import { AccessRequestFulfillForm } from "#user/requests/AccessRequestFulfillForm";
 import Styles from "#user/user-settings/styles.css";
 
 import { GrantRequest, RequestsApi } from "@goauthentik/api";
 
 import { msg } from "@lit/localize";
-import { CSSResult, html, nothing } from "lit";
-import { customElement, state } from "lit/decorators.js";
+import { CSSResult, html, nothing, PropertyValues } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
 
 import PFBanner from "@patternfly/patternfly/components/Banner/banner.css";
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
@@ -32,6 +33,9 @@ export class AccessRequestsPage extends AKElement {
     @state()
     toReview?: PaginatedResponse<GrantRequest>;
 
+    @property({ attribute: "request-to-fulfill" })
+    requestToFulfill: string | null = null;
+
     override async connectedCallback(): Promise<void> {
         super.connectedCallback();
         try {
@@ -41,6 +45,21 @@ export class AccessRequestsPage extends AKElement {
         }
     }
 
+    protected updated(changedProperties: PropertyValues): void {
+        super.updated(changedProperties);
+        if (changedProperties.has("requestToFulfill") && this.requestToFulfill !== null) {
+            aki(RequestsApi)
+                .requestsGrantRequestsRetrieve({
+                    uuid: this.requestToFulfill,
+                })
+                .then((req) => {
+                    const form = new AccessRequestFulfillForm();
+                    form.request = req;
+                    form.showModal();
+                });
+        }
+    }
+
     protected override render(): SlottedTemplateResult {
         return html`<div class="pf-c-page">
             <div class="pf-c-page__main">