Applications - Token URL column and error handling improvements

jsorohova · jsorohova · commit 98f652ec9fe5 · 2025-05-13T14:47:35.000+03:00
diff --git a/src/components/applications/application-details/applicationDetails.design.module.ts b/src/components/applications/application-details/applicationDetails.design.module.ts
@@ -46,6 +46,9 @@ export class ApplicationDetailsDesignModule implements IInjectorModule {
                         handlerComponent: ApplicationDetailsHandlers
                     });
                 }
+            })
+            .catch((error) => {
+                logger.trackError(error, { message: "Failed to get feature value for client applications in ApplicationDetailsDesignModule." });
             }
         );
     }
diff --git a/src/components/applications/application-details/applicationDetails.publish.module.ts b/src/components/applications/application-details/applicationDetails.publish.module.ts
@@ -33,6 +33,9 @@ export class ApplicationDetailsPublishModule implements IInjectorModule {
                         componentFlow: ComponentFlow.Block
                     });
                 }
+            })
+            .catch((error) => {
+                logger.trackError(error, { message: "Failed to get feature value for client applications in ApplicationDetailsPublishModule." });
             }
         );
     }
diff --git a/src/components/applications/application-details/react/runtime/ApplicationDetails.tsx b/src/components/applications/application-details/react/runtime/ApplicationDetails.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import { useEffect, useState } from "react";
+import { Logger } from "@paperbits/common/logging";
 import {
     Button,
     MessageBar,
@@ -38,12 +39,14 @@ export const ApplicationDetails = ({
     usersService,
     productService,
     applicationService,
+    logger,
     applicationName,
     getProductReferenceUrl
 }: {
     usersService: UsersService,
     applicationService: ApplicationService,
     productService: ProductService,
+    logger: Logger,
     applicationName: string,
     getProductReferenceUrl: (productName: string) => string
 }) => {
@@ -74,7 +77,7 @@ export const ApplicationDetails = ({
                     return;
                 }
 
-                throw new Error(`Unable to load application ${applicationName}. Error: ${error.message}`);
+                logger.trackError(error, { message: `Unable to load application ${applicationName}.` });
             });
 
         loadApplicationProducts(applicationName)
@@ -94,8 +97,8 @@ export const ApplicationDetails = ({
         try {
             application = await applicationService.getApplication(userId, applicationName);
         } catch (error) {
-            setError("Application is not selected.");
-            //throw new Error(`Unable to load application ${applicationName}. Error: ${error.message}`);
+            setError(`Unable to load application.`);
+            logger.trackError(error, { message: `Unable to load application ${applicationName}.` });
         }
     
         return application;
@@ -107,7 +110,7 @@ export const ApplicationDetails = ({
         try {
             clientSecret = await applicationService.createNewSecret(userId, applicationName);
         } catch (error) {
-            throw new Error(`Unable to generate client secret for application ${applicationName}. Error: ${error.message}`);
+            logger.trackError(error, { message: `Unable to generate client secret for application ${applicationName}.` });
         }
     
         return clientSecret;
@@ -119,7 +122,7 @@ export const ApplicationDetails = ({
         try {
             products = await applicationService.getApplicationProducts(userId, applicationName);
         } catch (error) {
-            //throw new Error(`Unable to load products for application ${applicationName}. Error: ${error.message}`);
+            logger.trackError(error, { message: `Unable to load products for application ${applicationName}.` });
         }
     
         return products;
@@ -133,14 +136,22 @@ export const ApplicationDetails = ({
 
     return (
         <>
-            {error ? (
+            {(error || !application) ? (
                 <MessageBar intent="error">
                     <MessageBarBody>{error}</MessageBarBody>
                 </MessageBar>
             ) : (
                 <>
                     <h1>{application.name}</h1>
                     <span className="caption1">Application</span>
+                    <MessageBar intent="info" className="mt-15 mb-20">
+                        <MessageBarBody>
+                            <span className="caption1">
+                                To call the API, you will need to retrieve the OAuth token and call the API gateway endpoint.{` `}
+                                <a href="http://aka.ms/apimappsclientcredflow" target="_blank">View documentation</a>
+                            </span>
+                        </MessageBarBody>
+                    </MessageBar>
                     <div className={"fui-application-details-container"}>
                         <h3>Application</h3>
                         <ScrollableTableContainer>
@@ -149,6 +160,7 @@ export const ApplicationDetails = ({
                                     <TableRow className={"fui-table-headerRow"}>
                                         <TableHeaderCell><span className="strong">Entra Application ID</span></TableHeaderCell>
                                         <TableHeaderCell><span className="strong">Client Secret</span></TableHeaderCell>
+                                        <TableHeaderCell><span className="strong">Token URL</span></TableHeaderCell>
                                     </TableRow>
                                 </TableHeader>
                                 <TableBody>
@@ -216,13 +228,15 @@ export const ApplicationDetails = ({
                                                 </PopoverSurface>
                                             </Popover>
                                         </TableCell>
+                                        <TableCell>{application.entraTenantId && `https://login.microsoftonline.com/${application.entraTenantId}/oauth2/v2.0/token`}</TableCell>
                                     </TableRow>
                                 </TableBody>
                             </Table>
                         </ScrollableTableContainer>
                         <ApplicationsProducts
                             products={products}
                             productService={productService}
+                            logger={logger}
                             getProductReferenceUrl={getProductReferenceUrl}
                         />
                     </div>
diff --git a/src/components/applications/application-details/react/runtime/ApplicationProducts.tsx b/src/components/applications/application-details/react/runtime/ApplicationProducts.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import { useEffect, useState } from "react";
+import { Logger } from "@paperbits/common/logging";
 import { Spinner, Table, TableBody, TableCell, TableHeader, TableHeaderCell, TableRow } from "@fluentui/react-components";
 import { CheckmarkCircleFilled, ChevronDownRegular, ChevronRightRegular } from "@fluentui/react-icons";
 import { Product } from "../../../../../models/product";
@@ -53,10 +54,12 @@ const ProductRow = ({
 export const ApplicationsProducts = ({
     products,
     productService,
+    logger,
     getProductReferenceUrl
 }: {
     products: Product[],
     productService: ProductService,
+    logger: Logger,
     getProductReferenceUrl: (productName: string) => string
 }) => {
     const [loadedProducts, setLoadedProducts] = useState<Product[]>([]);
@@ -81,7 +84,7 @@ export const ApplicationsProducts = ({
         try {
             product = await productService.getProduct(productName);
         } catch (error) {
-            throw new Error(`Unable to load product ${productName}. Error: ${error.message}`);
+            logger.trackError(error, { message: `Unable to load product ${productName}.` });
         }
 
         return product;
diff --git a/src/components/applications/application-details/react/runtime/ApplicationsDetailsRuntime.tsx b/src/components/applications/application-details/react/runtime/ApplicationsDetailsRuntime.tsx
@@ -2,6 +2,7 @@ import * as React from "react";
 import { FluentProvider } from "@fluentui/react-components";
 import { Resolve } from "@paperbits/react/decorators";
 import { Router } from "@paperbits/common/routing";
+import { Logger } from "@paperbits/common/logging";
 import { RouteHelper } from "../../../../../routing/routeHelper";
 import { ProductService } from "../../../../../services/productService";
 import { UsersService } from "../../../../../services";
@@ -33,6 +34,9 @@ export class ApplicationsDetailsRuntime extends React.Component<ApplicationsDeta
     @Resolve("router")
     public router: Router;
 
+    @Resolve("logger")
+    public logger: Logger;
+
     constructor(props) {
         super(props);
 
@@ -63,6 +67,7 @@ export class ApplicationsDetailsRuntime extends React.Component<ApplicationsDeta
                     usersService={this.usersService}
                     productService={this.productService}
                     applicationService={this.applicationService}
+                    logger={this.logger}
                     applicationName={this.state.applicationName}
                     getProductReferenceUrl={(productName) => this.getProductReferenceUrl(productName)}
                 />
diff --git a/src/components/applications/application-list/applicationList.design.module.ts b/src/components/applications/application-list/applicationList.design.module.ts
@@ -46,6 +46,9 @@ export class ApplicationListDesignModule implements IInjectorModule {
                         handlerComponent: ApplicationListHandlers
                     });
                 }
+            })
+            .catch((error) => {
+                logger.trackError(error, { message: "Failed to get feature value for client applications in ApplicationListDesignModule." });
             }
         );
     }
diff --git a/src/components/applications/application-list/applicationList.publish.module.ts b/src/components/applications/application-list/applicationList.publish.module.ts
@@ -32,6 +32,9 @@ export class ApplicationListPublishModule implements IInjectorModule {
                         componentFlow: ComponentFlow.Block
                     });
                 }
+            })
+            .catch((error) => {
+                logger.trackError(error, { message: "Failed to get feature value for client applications in ApplicationListPublishModule." });
             }
         );
     }
diff --git a/src/components/applications/application-list/react/runtime/ApplicationsListRuntime.tsx b/src/components/applications/application-list/react/runtime/ApplicationsListRuntime.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
 import { FluentProvider } from "@fluentui/react-components";
 import { Resolve } from "@paperbits/react/decorators";
+import { Logger } from "@paperbits/common/logging";
 import { ApplicationService } from "../../../../../services/applicationService";
 import { UsersService } from "../../../../../services";
 import { Application } from "../../../../../models/application";
@@ -26,6 +27,7 @@ export type TApplicationsListRuntimeFCProps = Omit<ApplicationsListProps, "detai
     getReferenceUrl: (applicationName: string) => string;
     userId: string;
     applicationService: ApplicationService;
+    logger: Logger;
     selectedApplication?: Application | null;
 };
 
@@ -39,6 +41,9 @@ export class ApplicationsListRuntime extends React.Component<ApplicationsListPro
     @Resolve("routeHelper")
     public routeHelper: RouteHelper;
 
+    @Resolve("logger")
+    public logger: Logger;
+
     constructor(props) {
         super(props);
 
@@ -80,6 +85,7 @@ export class ApplicationsListRuntime extends React.Component<ApplicationsListPro
                     {...this.props}
                     userId={this.state.userId}
                     applicationService={this.applicationService}
+                    logger={this.logger}
                     getReferenceUrl={(applicationName) => this.getReferenceUrl(applicationName)}
                 />
             </FluentProvider>
diff --git a/src/components/applications/application-list/react/runtime/ApplicationsTableCards.tsx b/src/components/applications/application-list/react/runtime/ApplicationsTableCards.tsx
@@ -16,6 +16,7 @@ type TApplicationTableCards = TApplicationsListRuntimeFCProps;
 
 export const ApplicationsTableCards = ({
     getReferenceUrl,
+    logger,
     userId,
     applicationService,
     layoutDefault,
@@ -38,18 +39,19 @@ export const ApplicationsTableCards = ({
         setWorking(true);
         setError(null);
         loadApplications(query)
-            .then((loadedApplications) => setApplications(loadedApplications))
-            .finally(() => setWorking(false));
-    }, [applicationService, pageNumber, pattern]);
+            .then((loadedApplications) => {
+                loadedApplications instanceof Page ? setApplications(loadedApplications) : setError(loadedApplications);
+            }).finally(() => setWorking(false));
+    }, [applicationService, pageNumber, pattern, userId]);
 
     const loadApplications = async (query: SearchQuery) => {
-        let applications: Page<Application>;
+        let applications: Page<Application> | string;
     
         try {
             applications = await applicationService.getClientApplications(userId, query);
         } catch (error) {
-            setError("Application is not selected.");
-            //throw new Error(`Unable to load applications. Error: ${error.message}`);
+            setError("Unable to load applications.");
+            logger.trackError(error, { message: "Unable to load applications." });
         }
     
         return applications;
diff --git a/src/contracts/application.ts b/src/contracts/application.ts
@@ -14,6 +14,11 @@ export interface ApplicationContract {
      */
     entraApplicationId: string;
 
+    /**
+     * Tenant identifier in Entra platform.
+     */
+    entraTenantId?: string;
+
     /**
      * Application state.
      * Possible values: pending, active, rejected, approved.
diff --git a/src/models/application.ts b/src/models/application.ts
@@ -18,6 +18,11 @@ export class Application {
      * Application identifier in Entra platform.
      */
     public entraApplicationId: string;
+    
+    /**
+     * Tenant identifier in Entra platform.
+     */
+    public entraTenantId?: string;
 
     /**
      * Application state.
@@ -38,6 +43,7 @@ export class Application {
         this.id = contract.id;
         this.name = contract.id;
         this.entraApplicationId = contract.entraApplicationId;
+        this.entraTenantId = contract.entraTenantId;
         this.state = contract.state || "approved";
         this.description = contract.description;
     }
diff --git a/src/services/applicationService.ts b/src/services/applicationService.ts
@@ -13,9 +13,9 @@ import { EntraSecret } from "../models/entraSecret";
 export class ApplicationService {
      constructor(private readonly apiClient: IApiClient) { }
 
-    public async getClientApplications(userId: string, searchQuery?: SearchQuery): Promise<Page<Application>> {
+    public async getClientApplications(userId: string, searchQuery?: SearchQuery): Promise<Page<Application> | string> {
         if (!userId) {
-            throw new Error(`Parameter "userId" not specified.`);
+            return "Parameter \"userId\" not specified.";
         }
 
         const skip = searchQuery && searchQuery.skip || 0;
@@ -43,11 +43,7 @@ export class ApplicationService {
             return pageOfApplications;
         }
         catch (error) {
-            if (error?.code === "ResourceNotFound") {
-                return pageOfApplications;
-            }
-
-            throw new Error(`Unable to retrieve applications for user with ID "${userId}". Error: ${error.message}`);
+            return pageOfApplications;
         }
     }
 

Original file line number	Diff line number	Diff line change
`@@ -46,6 +46,9 @@ export class ApplicationDetailsDesignModule implements IInjectorModule {`
`46`	`46`	`handlerComponent: ApplicationDetailsHandlers`
`47`	`47`	`});`
`48`	`48`	`}`
	`49`	`+ })`
	`50`	`+ .catch((error) => {`
	`51`	`+ logger.trackError(error, { message: "Failed to get feature value for client applications in ApplicationDetailsDesignModule." });`
`49`	`52`	`}`
`50`	`53`	`);`
`51`	`54`	`}`
Original file line number	Diff line number	Diff line change
`@@ -33,6 +33,9 @@ export class ApplicationDetailsPublishModule implements IInjectorModule {`
`33`	`33`	`componentFlow: ComponentFlow.Block`
`34`	`34`	`});`
`35`	`35`	`}`
	`36`	`+ })`
	`37`	`+ .catch((error) => {`
	`38`	`+ logger.trackError(error, { message: "Failed to get feature value for client applications in ApplicationDetailsPublishModule." });`
`36`	`39`	`}`
`37`	`40`	`);`
`38`	`41`	`}`
Original file line number	Diff line number	Diff line change
`@@ -32,6 +32,9 @@ export class ApplicationListPublishModule implements IInjectorModule {`
`32`	`32`	`componentFlow: ComponentFlow.Block`
`33`	`33`	`});`
`34`	`34`	`}`
	`35`	`+ })`
	`36`	`+ .catch((error) => {`
	`37`	`+ logger.trackError(error, { message: "Failed to get feature value for client applications in ApplicationListPublishModule." });`
`35`	`38`	`}`
`36`	`39`	`);`
`37`	`40`	`}`