diff --git a/docs/tools/ui-development-kit/accounts-list.mdx b/docs/tools/ui-development-kit/accounts-list.mdx index 02ef03278..11678d30b 100644 --- a/docs/tools/ui-development-kit/accounts-list.mdx +++ b/docs/tools/ui-development-kit/accounts-list.mdx @@ -90,7 +90,10 @@ import { MatCardModule } from '@angular/material/card'; import { MatIconModule } from '@angular/material/icon'; import { MatTableModule } from '@angular/material/table'; import { MatToolbarModule } from '@angular/material/toolbar'; +import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; +import { MatPaginatorModule } from '@angular/material/paginator'; import { SailPointSDKService } from '../sailpoint-sdk.service'; +import { AccountV2025 } from 'sailpoint-api-client'; @Component({ selector: 'app-accounts', @@ -102,12 +105,17 @@ import { SailPointSDKService } from '../sailpoint-sdk.service'; MatIconModule, MatTableModule, MatToolbarModule, + MatProgressSpinnerModule, + MatPaginatorModule ], templateUrl: './accounts.component.html', styleUrl: './accounts.component.scss', }) export class AccountsComponent implements OnInit { title = 'Accounts'; + loading = true; + accounts: AccountV2025[] = []; + displayedColumns: string[] = ['id', 'name', 'nativeIdentity', 'sourceId', 'disabled', 'locked', 'actions']; constructor(private sdk: SailPointSDKService) {} @@ -117,121 +125,122 @@ export class AccountsComponent implements OnInit { } private async loadAccounts() { + this.loading = true; try { - const accounts = await this.sdk.listAccounts(); - console.log('Loaded accounts:', accounts); + const response = await this.sdk.listAccounts(); + this.accounts = response.data as AccountV2025[]; + console.log('Loaded accounts:', this.accounts); } catch (error) { console.error('Error loading accounts:', error); + } finally { + this.loading = false; } } + + viewAccount(account: AccountV2025): void { + console.log('Viewing account:', account); + } } + ``` Return to your accounts list page. In the electron app, click View -> Toggle Developer Tools, you will see the response containing the accounts in the console after the page loads. Now that you have your account data, you need to display the data. You can add a table to the UI and display your results. -To do so, add this code to `src/routes/accounts/account-list/+page.svelte`: +To do so, add this code to `\accounts\accounts.component.html`:
Show code ```html - + + + Name + {{ account.name || '-' }} + -
-
-

List of all accounts

-
- {#await data.accountData} -
- -
- {:then accountData} - - {#if accountData.length === 0} -
-

No Accounts found

-
- {:else} -
- - - - - - - - - - - - - - {#each accountData as account} - - - - - - - - - - - - {/each} - -
Name Native Identity Source Created Modified Authoritative Features Has Entitlements
- {account.name} - - {account.nativeIdentity} - - {account.sourceName} - - {formatDate(account.created)} - - {formatDate(account.modified)} - - {account.authoritative} - - {account.features} - - {account.hasEntitlements} - -
- - -
-
-
- {/if} - {/await} + + + Native Identity + {{ account.nativeIdentity || '-' }} + + + + + Source + {{ account.sourceId || '-' }} + + + + + Disabled + + check_circle + cancel + + + + + + Locked + + lock + lock_open + + + + + + Actions + + + + + + + + + + +
+ No accounts found. +
+
+ + + ```
-Save the `+page.svelte` file and return to the accounts list page. You will see up to 250 accounts in the table. +Save the `\accounts\accounts.component.html` file and return to the accounts list page. You will see up to 250 accounts in the table. ## Pagination @@ -246,378 +255,744 @@ import TabItem from '@theme/TabItem'; import Tabs from '@theme/Tabs'; - + ```html - + + + Native Identity + {{ account.nativeIdentity || '-' }} + -
-
-

List of all accounts

-
- {#await data.accountData} -
- -
- {:then accountData} - - {#await data.totalCount then totalCount} - {#if totalCount > 250 || Number(data.params.limit) < totalCount} -
- -
- {/if} - {/await} - - {#if accountData.length === 0} -
-

No Accounts found

-
- {:else} -
- - - - - - - - - - - - - - {#each accountData as account} - - - - - - - - - - - - {/each} - -
Name Native Identity Source Created Modified Authoritative Features Has Entitlements
- {account.name} - - {account.nativeIdentity} - - {account.sourceName} - - {formatDate(account.created)} - - {formatDate(account.modified)} - - {account.authoritative} - - {account.features} - - {account.hasEntitlements} - -
- -
-
-
- {/if} - {/await} + + + Source + {{ account.sourceId || '-' }} + + + + + Disabled + + check_circle + cancel + + + + + + Locked + + lock + lock_open + + + + + + Actions + + + + + + + + + + + + + + +
+ No accounts found. +
+
+ + ``` - + ```typescript -import { createConfiguration } from '$lib/sailpoint/sdk.js'; -// highlight-next-line -import { getLimit, getPage } from '$lib/Utils.js'; -import type { Account } from 'sailpoint-api-client'; -import { AccountsApi } from 'sailpoint-api-client'; +import { CommonModule } from '@angular/common'; +import { Component, OnInit, ViewChild } from '@angular/core'; +import { MatButtonModule } from '@angular/material/button'; +import { MatCardModule } from '@angular/material/card'; +import { MatIconModule } from '@angular/material/icon'; +import { MatTableModule } from '@angular/material/table'; +import { MatToolbarModule } from '@angular/material/toolbar'; +import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; +import { MatPaginator, MatPaginatorModule, PageEvent } from '@angular/material/paginator'; +import { SailPointSDKService } from '../sailpoint-sdk.service'; +import { AccountV2025 } from 'sailpoint-api-client'; -export const load = async ({ url, locals }) => { - const config = createConfiguration(locals.session!.baseUrl, locals.idnSession!.access_token); - const api = new AccountsApi(config); +@Component({ + selector: 'app-accounts', + standalone: true, + imports: [ + CommonModule, + MatButtonModule, + MatCardModule, + MatIconModule, + MatTableModule, + MatToolbarModule, + MatProgressSpinnerModule, + MatPaginatorModule + ], + templateUrl: './accounts.component.html', + styleUrl: './accounts.component.scss', +}) +export class AccountsComponent implements OnInit { + title = 'Accounts'; + loading = true; + accounts: AccountV2025[] = []; + displayedColumns: string[] = ['id', 'name', 'nativeIdentity', 'sourceId', 'disabled', 'locked', 'actions']; + + // Pagination settings + pageSize = 10; + pageIndex = 0; + totalCount = 0; - // highlight-start - const page = getPage(url); - const limit = getLimit(url); - // highlight-end + @ViewChild(MatPaginator) paginator!: MatPaginator; - // highlight-next-line - const reportResp = api.listAccounts({count: true, limit: Number(limit), offset: Number(page) * Number(limit)}); + constructor(private sdk: SailPointSDKService) {} - const totalCount = new Promise((resolve) => { - reportResp.then((response) => { - resolve(response.headers['x-total-count']); - }); - }); + ngOnInit() { + // Load initial data + void this.loadAccounts(); + } - const accountData = new Promise((resolve) => { - reportResp.then((response) => { - resolve(response.data); - }); - }); + async loadAccounts() { + // Setup request for paged account results + const request = { + offset: this.pageIndex * this.pageSize, + limit: this.pageSize, + count: true, + sorters: undefined, + filters: undefined + }; + + this.loading = true; + try { + const response = await this.sdk.listAccounts(request); + this.accounts = response.data; + + // Get total count from headers if available + let count: number | undefined; + if (response.headers && typeof (response.headers as any).get === 'function') { + const headerValue = (response.headers as any).get('X-Total-Count'); + count = headerValue ? Number(headerValue) : undefined; + } else if (response.headers && typeof (response.headers as any)['x-total-count'] !== 'undefined') { + count = Number((response.headers as any)['x-total-count']); + } + + this.totalCount = count ?? 250; // Default to 250 if count not available + console.log('Loaded accounts:', this.accounts); + } catch (error) { + console.error('Error loading accounts:', error); + } finally { + this.loading = false; + } + } + + // Handle page change events + onPageChange(event: PageEvent) { + this.pageSize = event.pageSize; + this.pageIndex = event.pageIndex; + void this.loadAccounts(); + } + + viewAccount(account: AccountV2025): void { + console.log('Viewing account:', account); + } +} - // highlight-next-line - return { accountData, totalCount, params: {page, limit}}; -}; ``` -Return to the accounts list page. You will see the paginator at the top of the page. You can now paginate through the accounts in your tenant. +Return to the accounts list page. You will see the paginator at the bottom of the page. You can now paginate through the accounts in your tenant. + + +## Vewing Details + +In this step we will create a detail view to see the raw json object that represents the underlying data. + +To do this, we will implement the already existing `viewAccount` method to use the `GenericDialogComponent` that comes with the UI Development Kit. The only thing to change here is just to implement the method as seen below: + + + +```typescript + viewAccount(account: AccountV2025): void { + // Format account details as JSON string with indentation + const details = JSON.stringify(account, null, 2); + + // Open dialog with account details + this.dialog.open(GenericDialogComponent, { + minWidth: '800px', + data: { + title: `Account Details: ${account.name || account.nativeIdentity || account.id}`, + message: details + } + }); + } +``` + +Note that we also need to add the dialog to the constructor: + +```typescript + constructor(private sdk: SailPointSDKService) {} +``` + +And also add the imports: + +``` +import { MatDialog } from '@angular/material/dialog'; +import { GenericDialogComponent } from '../generic-dialog/generic-dialog.component'; +``` ## Sort and filter -To better view and organize the data displayed in your accounts list page, you may want to implement sorting and filtering. -Sorting is the process of organizing the data. You may want to provide users with a way to sort the data in ascending or descending alphabetical order based on the account name, for example. -Filtering is the process of limiting the displayed data based on specified details. You may want to provide users with a way to filter the data to only include accounts associated with one source, for example. +The last part of the page we may want to implement would be sorting and filtering. +With this implementation, the `this.filterForm.valueChanges` event and `onSortChange` event will cause the page to reload the accounts with the new sort or filter applied. -To implement sorting and filtering, add the following highlighted code. It allows you to sort and filter the accounts in your tenant: - -With this implementation, once a user types in a filter or sorter and clicks the 'Go' button, the UI Development Kit calls the `onCreateGo` function and reloads the page with the new sorters and filters. - -On the server side, the kit uses the `getFilters` and `getSorters` functions to get the filters and sorters from the URL. -The kit then passes these functions to the [List Accounts endpoint](https://developer.sailpoint.com/docs/api/v3/list-accounts) to filter and sort the accounts. +The completed component and all code can be seen below: - + -```typescript - - -
-
-

List of all accounts

-
- {#await data.accountData} -
- +
+ +
+
+
+ + Name + + + + + Source ID + + + + + Correlated + + + {{option.label}} + + + + +
- {:then accountData} - {#await data.totalCount then totalCount} - {#if totalCount > 250 || Number(data.params.limit) < totalCount} -
- -
- {/if} - {/await} - {#if accountData.length === 0} -
-

No Accounts found

-
- {:else} -
- - - - - - - - - - - - - - {#each accountData as account} - - - - - - - - - - - - {/each} - -
Name Native Identity Source Created Modified Authoritative Features Has Entitlements
- {account.name} - - {account.nativeIdentity} - - {account.sourceName} - - {formatDate(account.created)} - - {formatDate(account.modified)} - - {account.authoritative} - - {account.features} - - {account.hasEntitlements} - -
- -
-
-
- {/if} - {/await} +
+
+ + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ID{{ account.id }}Name{{ account.name || '-' }}Native Identity{{ account.nativeIdentity || '-' }}Source{{ account.sourceId || '-' }}Disabled + check_circle + cancel + Locked + lock + lock_open + Actions + +
+ + + + + + +
+ No accounts found. +
+
+
+ + ``` - + ```typescript -import { createConfiguration } from '$lib/sailpoint/sdk.js'; -// highlight-next-line -import { getFilters, getLimit, getPage, getSorters } from '$lib/Utils.js'; -import type { Account } from 'sailpoint-api-client'; -import { AccountsApi } from 'sailpoint-api-client'; +import { CommonModule } from '@angular/common'; +import { Component, OnInit, ViewChild } from '@angular/core'; +import { MatSort, MatSortModule, Sort, SortDirection } from '@angular/material/sort'; +import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatInputModule } from '@angular/material/input'; +import { MatSelectModule } from '@angular/material/select'; +import { MatDialog } from '@angular/material/dialog'; +import { GenericDialogComponent } from '../generic-dialog/generic-dialog.component'; +import { MatButtonModule } from '@angular/material/button'; +import { MatCardModule } from '@angular/material/card'; +import { MatIconModule } from '@angular/material/icon'; +import { MatTableModule } from '@angular/material/table'; +import { MatToolbarModule } from '@angular/material/toolbar'; +import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; +import { MatPaginator, MatPaginatorModule, PageEvent } from '@angular/material/paginator'; +import { SailPointSDKService } from '../sailpoint-sdk.service'; +import { AccountV2025 } from 'sailpoint-api-client'; -export const load = async ({ url, locals }) => { - const config = createConfiguration(locals.session!.baseUrl, locals.idnSession!.access_token); - const api = new AccountsApi(config); +@Component({ + selector: 'app-accounts', + standalone: true, + imports: [ + CommonModule, + MatButtonModule, + MatCardModule, + MatIconModule, + MatTableModule, + MatToolbarModule, + MatProgressSpinnerModule, + MatPaginatorModule, + MatSortModule, + ReactiveFormsModule, + MatFormFieldModule, + MatInputModule, + MatSelectModule, + GenericDialogComponent + ], + templateUrl: './accounts.component.html', + styleUrl: './accounts.component.scss', +}) +export class AccountsComponent implements OnInit { + title = 'Accounts'; + loading = true; + accounts: AccountV2025[] = []; + error = false; + errorMessage = ''; + displayedColumns: string[] = ['id', 'name', 'nativeIdentity', 'sourceId', 'disabled', 'locked', 'actions']; - const page = getPage(url); - const limit = getLimit(url); - // highlight-start - const sorters = getSorters(url); - const filters = getFilters(url); - // highlight-end + // Sort settings + sortActive = 'name'; + sortDirection: SortDirection = 'asc'; - // highlight-next-line - const reportResp = api.listAccounts({count: true, sorters: sorters, filters: filters, limit: Number(limit), offset: Number(page) * Number(limit)}); + // Filter form + filterForm = new FormGroup({ + name: new FormControl(''), + sourceId: new FormControl(''), + correlated: new FormControl('') + }); - const totalCount = new Promise((resolve) => { - reportResp.then((response) => { - resolve(response.headers['x-total-count']); - }); + // Filter options + correlatedOptions = [ + { value: '', label: 'All' }, + { value: 'true', label: 'Correlated' }, + { value: 'false', label: 'Uncorrelated' } + ]; + + // Pagination settings + pageSize = 10; + pageIndex = 0; + totalCount = 0; + + @ViewChild(MatPaginator) paginator!: MatPaginator; + @ViewChild(MatSort) sort!: MatSort; + + constructor(private sdk: SailPointSDKService, private dialog: MatDialog) {} + + ngOnInit() { + // Load initial data + void this.loadAccounts(); + + // Subscribe to filter changes + this.filterForm.valueChanges.subscribe(() => { + this.pageIndex = 0; // Reset to first page on filter change + void this.loadAccounts(); }); + } - const accountData = new Promise((resolve) => { - reportResp.then((response) => { - resolve(response.data); - }); + async loadAccounts() { + // Setup request for paged account results + const request = { + offset: this.pageIndex * this.pageSize, + limit: this.pageSize, + count: true, + sorters: this.buildSorters(), + filters: this.buildFilters() + }; + + this.loading = true; + this.error = false; + this.errorMessage = ''; + + try { + const response = await this.sdk.listAccounts(request); + if (response.status !== 200) { + throw new Error(`Failed to load accounts: ${response.statusText}`); + } + this.accounts = response.data; + + // Get total count from headers if available + let count: number | undefined; + if (response.headers && typeof (response.headers as any).get === 'function') { + const headerValue = (response.headers as any).get('X-Total-Count'); + count = headerValue ? Number(headerValue) : undefined; + } else if (response.headers && typeof (response.headers as any)['x-total-count'] !== 'undefined') { + count = Number((response.headers as any)['x-total-count']); + } + + this.totalCount = count ?? 250; // Default to 250 if count not available + } catch (error) { + console.error('Error loading accounts:', error); + this.error = true; + this.errorMessage = error instanceof Error ? error.message : String(error); + this.accounts = []; + } finally { + this.loading = false; + } + } + + // Handle page change events + onPageChange(event: PageEvent) { + this.pageSize = event.pageSize; + this.pageIndex = event.pageIndex; + void this.loadAccounts(); + } + + // Handle sort changes + onSortChange(event: Sort) { + this.sortActive = event.active; + this.sortDirection = event.direction as SortDirection; + void this.loadAccounts(); + } + + // Reset filters + resetFilters() { + this.filterForm.reset({ + name: '', + sourceId: '', + correlated: '' }); + } - // highlight-next-line - return { accountData, totalCount, params: {page, limit, sorters, filters}}; -}; + // Build sorters string for API request + buildSorters(): string | undefined { + if (!this.sortActive || this.sortDirection === '') { + return undefined; + } + // For descending order, prefix column name with minus sign + return this.sortDirection === 'desc' ? `-${this.sortActive}` : this.sortActive; + } + + // Build filters string for API request + buildFilters(): string | undefined { + const filters: string[] = []; + const formValues = this.filterForm.value; + + if (formValues.name) { + filters.push(`name sw "${formValues.name}"`); + } + + if (formValues.sourceId) { + filters.push(`sourceId eq "${formValues.sourceId}"`); + } + + if (formValues.correlated) { + filters.push(`identity.correlated eq ${formValues.correlated}`); + } + + return filters.length > 0 ? filters.join(' and ') : undefined; + } + + viewAccount(account: AccountV2025): void { + // Format account details as JSON string with indentation + const details = JSON.stringify(account, null, 2); + + // Open dialog with account details + this.dialog.open(GenericDialogComponent, { + minWidth: '800px', + data: { + title: `Account Details: ${account.name || account.nativeIdentity || account.id}`, + message: details + } + }); + } +} + + + +``` + + + + + +```css +.accounts-container { + height: 100%; + display: flex; + flex-direction: column; +} + +.table-container { + display: flex; + flex-direction: column; +} + +.toolbar-title { + margin-left: 16px; +} + +.content { + padding: 24px; + flex: 1; + overflow-y: auto; +} + +.filter-panel { + margin-bottom: 20px; + padding: 16px; + border-radius: 4px; + background-color: #f8f8f8; +} + +.filter-row { + display: flex; + flex-wrap: wrap; + gap: 16px; + align-items: center; +} + +.filter-field { + flex: 1; + min-width: 200px; +} + +:host-context(.dark-theme) .filter-panel { + background-color: #333; +} + +mat-card { + max-width: 800px; + margin: 0 auto; +} + +mat-card-actions { + display: flex; + gap: 8px; + padding: 16px; +} + +mat-card-actions button { + display: flex; + align-items: center; + gap: 8px; +} + +::ng-deep mat-spinner circle { + stroke: #0033a1; /* teal-like custom color */ +} + +.spinner-container { + display: flex; + justify-content: center; // horizontal centering + align-items: center; // vertical centering + border: none; + height: 75vh; // takes full viewport height (adjust as needed) +} + +.header-content { + display: flex; + justify-content: space-between; + align-items: center; +} + +.sortable { + cursor: pointer; +} + +.sortable:hover { + background-color: #f3f3f3; +} + +.sort-icon { + margin-left: 6px; + font-size: 0.95rem; + color: black; + + // Highlight active sort + &.active { + color: #415364; + font-weight: bold; + } +} +td.mat-cell, +th.mat-header-cell { + vertical-align: middle; +} + +td.mat-cell:last-child, +th.mat-header-cell:last-child { + text-align: center; +} + +#viewIdentity, +#attibuteDetails, +#managerDetails { + padding: 8px; + margin-bottom: 10px; + margin-top: 10px; + width: 55px; +} + +#attibuteDetails, +#managerDetails { + width: 125px; +} + +:host { + /* Dark mode overrides */ + + :host-context(.dark-theme) .sortable:hover { + background-color: #2c2c2c; /* Darker hover background */ + } + + :host-context(.dark-theme) .sort-icon { + margin-left: 6px; + font-size: 0.95rem; + color: #ffffff; + + // Highlight active sort + &.active { + color: #ffffff; + font-weight: bold; + } + } +} ``` + + + ## Error handling You have now implemented a new page that lists all the accounts in your tenant, and you can now paginate, sort and filter the accounts in your tenant. -Ideally, everything in your custom UIs will work smoothly, but you will likely encounter errors at some point when you're implementing a page. If you provide an invalid filter or sorter, the list accounts endpoint will return a 400 error, for example. -You can handle this error by adding a `try catch` block to the server side of the accounts list page. +Ideally, everything in your custom UIs will work smoothly, but you will likely encounter errors at some point when you're implementing a page. For example, if you provide an invalid filter or sorter, the list accounts endpoint will return a 400 error. +You can see that there is a `try catch` block on the loadAccounts method that currently shows a console.log error but a custom message could be implemented to notify the user of a problem. This is not covered in this part of the tutorial, but with angular, presenting the user about an error is quite trivial. To learn more about handling errors in your UI, refer to [Error Handling](./error-handling). diff --git a/docs/tools/ui-development-kit/deploying.md b/docs/tools/ui-development-kit/deploying.md new file mode 100644 index 000000000..b597f67b0 --- /dev/null +++ b/docs/tools/ui-development-kit/deploying.md @@ -0,0 +1,45 @@ +--- +id: udk-deploying +title: Deploying +pagination_label: UDK +sidebar_label: Deploying +sidebar_position: 2 +sidebar_class_name: rudk +keywords: ['UI', 'development', 'kit'] +description: Deploying your UI project +slug: /tools/ui-development-kit/deploying +tags: ['UI'] +--- + +## Building the App + +To build the app locally, you can simply run the command `npm run electron:build` and the app will be built for your platform. The location of the built file can be found in the `./release` folder. + +### Building for different platforms + +If you want to build a release that can be used on other platforms, then you can use the github workflows to accomplish this task. By forking the repository, you will also have access to the github actions in the .github/workflows directory and there is an action for macos, linux and windows that can be used to build the application. Upon a successful build, the built executable is stored in github as a resource. + +### Building with customization + +Inside the `app/config.json` are the default navigation menu items that will presented to a user when they run the app. You can modify these values so that the bundled application will only allow the user to access certain pre-built components. That way if you want to bundle a purpose built app that only has access to the transform builder, you can do that by modifying the `app/config.json` like this: + +```json +{ + "components": { + "enabled": [ + "transforms" + ] + }, + "version": "1.0.0" + } +``` + +In this case the user won't even have access to the component selector to enable other components, so the app will be limited to only the transform tool. You can also adjust the custom themes for the app using the `config.json` as well, to see more on this, see [theming](./theming) + +Once the app is started, the user settings will be stored in the users `appData/Roaming/sailpoint-ui-development-kit` folder and can be modified there to allow access to other components if desired. + +:::info + +The UI Development Kit uses the existing configuration stored in the users data directory. If there is a pre-installed instance of the app or the config.json file already exists, it will not be overwritten by the application and their current configuration will be used. + +::: \ No newline at end of file diff --git a/docs/tools/ui-development-kit/error-handling.md b/docs/tools/ui-development-kit/error-handling.md index 5457dd6f0..0f8408b1f 100644 --- a/docs/tools/ui-development-kit/error-handling.md +++ b/docs/tools/ui-development-kit/error-handling.md @@ -11,128 +11,54 @@ slug: /tools/ui-development-kit/error-handling tags: ['UI', 'Error'] --- -Ideally, everything in your custom UIs will work smoothly, but you will likely encounter errors at some point when you're implementing a page. If you provide an invalid filter or sorter, the list accounts endpoint will return a 400 error, for example. You can handle this error by adding a `try catch` block to the server side of the accounts list page. +Ideally, everything in your custom UIs will work smoothly, but you will likely encounter errors at some point when you're implementing a page. For example, if you provide an invalid filter or sorter, the list accounts endpoint will return a 400 error. Even though the actual calls happen in the backend electron code, you almost never need to interact with that part of the application. Instead, it is best to handle all the errors on the front end If any of your backend calls result in a server error or bad request, you also want to handle those errors. Read this guide to learn how to use the UI Development Kit to handle errors. -## 400 bad request +## Handling errors in your code -If you provide an invalid filter or sorter, the [List Accounts Endpoint](https://developer.sailpoint.com/docs/api/v3/list-accounts) returns a 400 error. This example awaits the response and doesn't exit the program when a 4xx level status is received. If a 4xx level status is received, the user is redirected to an error page. +If you provide an invalid filter or sorter, the [List Accounts Endpoint](https://developer.sailpoint.com/docs/api/v2025/list-accounts) returns a 400 error. This example uses a try/catch to handle the error and present the user with what went wrong. -Refer to this code block to learn how to implement error handling for invalid filters or sorters: +This is just one example of how things can be handled during an error event. Sometimes it can be better to present the user with a popup, or you can use a snackbar to show a quick popup on the bottom of the page. ```typescript -import {createConfiguration} from '$lib/sailpoint/sdk.js'; -import {getFilters, getLimit, getPage, getSorters} from '$lib/Utils.js'; -import {error} from '@sveltejs/kit'; -import {AccountsApi} from 'sailpoint-api-client'; -export const load = async ({url, locals}) => { - const config = createConfiguration( - locals.session!.baseUrl, - locals.idnSession!.access_token, - ); - const api = new AccountsApi(config); + // initially, set error to false and have no error message + this.error = false; + this.errorMessage = ''; - const page = getPage(url); - const limit = getLimit(url); - const sorters = getSorters(url); - const filters = getFilters(url); - - const reportResp = await api.listAccounts( - { - count: true, - sorters: sorters, - filters: filters, - limit: Number(limit), - offset: Number(page) * Number(limit), - }, - { - validateStatus: function (status) { - return status < 500; - }, - }, - ); - - if (reportResp.status !== 200) { - error(400, { - message: - 'an error occurred while fetching accounts. Please examine your filters and and sorters and try again.', - context: {params: {page, limit, filters, sorters}}, - urls: [ - 'https://developer.sailpoint.com/idn/api/standard-collection-parameters#filtering-results', - ], - errData: reportResp.data, - }); - } - - const totalCount = reportResp.headers['x-total-count']; - const accountData = reportResp.data; - - return {accountData, totalCount, params: {page, limit, sorters, filters}}; -}; + try { + const response = await this.sdk.listAccounts(request); + if (response.status !== 200) { // check to see if the response code is the expected value. In case it's not, just throw an error as it will be handled in the try catch block + throw new Error(`Failed to load accounts: ${response.statusText}`); + } + this.accounts = response.data; + } catch (error) { // In case the SDK encounters some error in the request + console.error('Error loading accounts:', error); + this.error = true; + this.errorMessage = error instanceof Error ? error.message : String(error); + this.accounts = []; + } finally { + this.loading = false; + } ``` -## 500 server issues +Present the user with the error message if there is an error present during loading any data +```html +
+ error + Error loading accounts: {{ errorMessage }} +
+``` -You can update the code block to handle more than just the 400 level statuses. You can see the highlighted code changes to handle any error response from the API call. You can send back an error to the user with the status, a detailed message, the details about the parameters used that caused the error, and the error response from the API. +## Retrieving logs from the app -Refer to this code block to learn how to implement error handling for other non-400 errors: +When running the built app locally, you can retrieve details logging from the app by running the executable with the `--enable-logging` flag enabled. For example: -```typescript -import {createConfiguration} from '$lib/sailpoint/sdk.js'; -import {getFilters, getLimit, getPage, getSorters} from '$lib/Utils.js'; -import {error} from '@sveltejs/kit'; -import {AccountsApi} from 'sailpoint-api-client'; - -export const load = async ({url, locals}) => { - const config = createConfiguration( - locals.session!.baseUrl, - locals.idnSession!.access_token, - ); - const api = new AccountsApi(config); - - const page = getPage(url); - const limit = getLimit(url); - const sorters = getSorters(url); - const filters = getFilters(url); - - const reportResp = await api.listAccounts( - { - count: true, - sorters: sorters, - filters: filters, - limit: Number(limit), - offset: Number(page) * Number(limit), - }, - { - validateStatus: function (status) { - // highlight-next-line - return status < 550; - }, - }, - ); - - if (reportResp.status !== 200) { - // highlight-next-line - error(reportResp.status, { - message: - 'an error occurred while fetching accounts. Please examine your filters and and sorters and try again.', - context: {params: {page, limit, filters, sorters}}, - urls: [ - 'https://developer.sailpoint.com/idn/api/standard-collection-parameters#filtering-results', - ], - errData: reportResp.data, - }); - } - - const totalCount = reportResp.headers['x-total-count']; - const accountData = reportResp.data; - - return {accountData, totalCount, params: {page, limit, sorters, filters}}; -}; +```powershell + & '.\sailpoint-ui-development-kit 1.0.0.exe' --enable-logging ``` ## Discuss diff --git a/docs/tools/ui-development-kit/img/theme-component.png b/docs/tools/ui-development-kit/img/theme-component.png new file mode 100644 index 000000000..4c418c09b Binary files /dev/null and b/docs/tools/ui-development-kit/img/theme-component.png differ diff --git a/docs/tools/ui-development-kit/index.md b/docs/tools/ui-development-kit/index.md index e84e780f3..493327978 100644 --- a/docs/tools/ui-development-kit/index.md +++ b/docs/tools/ui-development-kit/index.md @@ -46,7 +46,7 @@ The first step to setting up the UI Development Kit is to clone the project from To clone the project, you can run this command: ```bash -git clone git@github.com:sailpoint-oss/ui-development-kit.git +git clone https://github.com/sailpoint-oss/ui-development-kit.git ``` ## Project structure diff --git a/docs/tools/ui-development-kit/theming.md b/docs/tools/ui-development-kit/theming.md index 835f49b02..e99463319 100644 --- a/docs/tools/ui-development-kit/theming.md +++ b/docs/tools/ui-development-kit/theming.md @@ -11,4 +11,12 @@ slug: /tools/ui-development-kit/theming tags: ['UI'] --- -Read this guide to learn about the UI Development Kit and how to use it. Once you have read this guide, you will be able to do the following: +If you want to create a custom theme for your deployment, you can do it easily using the config file and the theme config component: + +## Using the theme component + +Using the theme component, you can select colors for all the main objects on the UI such as the primary and secondary colors, as well as pick which logos will appear for dark and light mode. Once you have these changes made, the settings will be saved in your `appData/Roaming/sailpoint-ui-development-kit` and the app can be deployed with these settings deployed along with the app by using the [deployment guide](./deploying.) + +## Example Theme Component + +![Theme Component](./img/theme-component.png) \ No newline at end of file