Type changes and coercions, spelling, @ts, and @eslint fixes

Sveltekit-App/src/lib/Utils.ts

@@ -1,12 +1,10 @@
+import { goto } from '$app/navigation';
+
 export function formatDate(date: string | null | undefined) {
 	if (!date) return 'N/A';
 	return new Date(date).toLocaleString();
 }
 
-export function getOffset(url: URL) {
-	return url.searchParams.get('offset') || '0';
-}
-
 export function getLimit(url: URL) {
 	return url.searchParams.get('limit') || '10';
 }
@@ -25,10 +23,60 @@ export function getPage(url: URL) {
 
 export function getPaginationParams(url: URL) {
 	return {
-		offset: getOffset(url),
 		limit: getLimit(url),
 		page: getPage(url),
 		filters: getFilters(url),
 		sorters: getSorters(url)
 	};
 }
+
+type PaginationParams = {
+	limit: string;
+	page: string;
+	filters: string;
+	sorters: string;
+};
+
+export function createOnPageChange(params: PaginationParams, path: string) {
+	return function onPageChange(e: CustomEvent): void {
+		const urlParams = new URLSearchParams();
+		urlParams.set('page', e.detail);
+		urlParams.set('limit', params.limit);
+		urlParams.set('sorters', params.sorters);
+		urlParams.set('filters', params.filters);
+
+		console.log(`${path}?${urlParams.toString()}`);
+
+		goto(`${path}?${urlParams.toString()}`);
+	};
+}
+
+export function createOnAmountChange(params: PaginationParams, path: string) {
+	return function onAmountChange(e: CustomEvent): void {
+		const urlParams = new URLSearchParams();
+		urlParams.set('page', params.page);
+		urlParams.set('limit', e.detail);
+		urlParams.set('sorters', params.sorters);
+		urlParams.set('filters', params.filters);
+
+		console.log(`${path}?${urlParams.toString()}`);
+
+		goto(`${path}?${urlParams.toString()}`);
+	};
+}
+
+export function createOnGo(params: PaginationParams, path: string) {
+	return function onGo(e: KeyboardEvent | MouseEvent): void {
+		if (e.type !== 'click' && (e as KeyboardEvent).key !== 'Enter') return;
+
+		const urlParams = new URLSearchParams();
+		urlParams.set('page', params.page);
+		urlParams.set('limit', params.limit);
+		urlParams.set('sorters', params.sorters);
+		urlParams.set('filters', params.filters);
+
+		console.log(`${path}?${urlParams.toString()}`);
+
+		goto(`${path}?${urlParams.toString()}`);
+	};
+}

Sveltekit-App/src/routes/+page.server.ts

@@ -3,14 +3,17 @@ import type { Actions } from './$types';
 import { generateAuthLink } from '$lib/utils/oauth';
 
 export const actions = {
-	default: async ({ cookies, request, url }) => {
+	default: async ({ cookies, request }) => {
 		const data = await request.formData();
 
 		const baseUrl = data.get('baseUrl');
 		const tenant = data.get('tenant');
-		const domain = data.get('domain');
 		const tenantUrl = data.get('tenantUrl');
 
+		if (!baseUrl || !tenantUrl) {
+			throw redirect(302, '/login');
+		}
+
 		const sessionString = cookies.get('idnSession');
 
 		if (sessionString) {
@@ -26,6 +29,6 @@ export const actions = {
 		}
 
 		cookies.set('session', JSON.stringify({ baseUrl, tenantUrl }));
-		throw redirect(302, generateAuthLink(tenantUrl));
-	},
+		throw redirect(302, generateAuthLink(tenantUrl.toString()));
+	}
 } satisfies Actions;

Sveltekit-App/src/routes/callback/+page.server.ts

@@ -8,12 +8,14 @@ export const load: PageServerLoad = async ({ url, cookies }) => {
 	const code = url.searchParams.get('code');
 
 	const sessionString = cookies.get('session');
-	let session: any = null;
+	let session: { baseUrl: string; tenantUrl: string } | undefined = undefined;
 
 	if (sessionString) {
 		session = JSON.parse(cookies.get('session')!);
 	}
 
+	if (session == undefined) throw error(500, 'No Session Found');
+
 	if (!code) throw error(500, 'No Authorization Code Provided');
 	const response = await axios
 		.post(
@@ -25,6 +27,7 @@ export const load: PageServerLoad = async ({ url, cookies }) => {
 				console.log(err.response.data);
 				console.log(err.response.status);
 				console.log(err.response.headers);
+				// @ts-expect-error session is null checked above
 				throw redirect(302, generateAuthLink(session.tenantUrl));
 			} else if (err.request) {
 				// The request was made but no response was received

Sveltekit-App/src/routes/callback/loadinglist.ts

@@ -233,4 +233,5 @@ export const counterList = [
 	"Don't panic... AHHHHH!",
 	'Ensuring Gnomes are still short.',
 	'Baking ice cream...'
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 ].sort((a, b) => 0.5 - Math.random());

Sveltekit-App/src/routes/home/+error.svelte

@@ -5,16 +5,37 @@
 
 <div class="p-4">
 	<div class="card p-4">
-		<p class="text-center py-2">
-			WHOOPS! <br /> Seems like an error occurred. <br /> If you believe this is a bug please submit
-			an issue on
+		<p class="text-center p-2">
+			WHOOPS! an error occurred. <br /> If you believe this is a bug please submit an issue on
 			<a
 				class="underline text-blue-500 hover:text-blue-700"
 				href="https://github.com/sailpoint-oss/idn-admin-console/issues/new/choose"
 				rel="noreferrer"
-				target="_blank">GitHub</a
+				target="_blank"
 			>
+				GitHub
+			</a>
 		</p>
+		{#if $page.error?.message}
+			<p class="py-2">Message: <br /><span class="text-red-500">{$page.error.message}</span></p>
+		{/if}
+
+		{#if $page.error?.urls}
+			<p>These links may be helpful:</p>
+			<ul>
+				{#each $page.error?.urls as url}
+					<li>
+						-
+						<a
+							class="underline text-blue-500 hover:text-blue-700"
+							href={url}
+							rel="noreferrer"
+							target="_blank">{url}</a
+						>
+					</li>
+				{/each}
+			</ul>
+		{/if}
 		<div class="py-2">
 			<p>Context</p>
 			<CodeBlock language="json" code={JSON.stringify($page.error?.context, null, 4)} />

Sveltekit-App/src/routes/home/identities/+page.server.ts

@@ -27,8 +27,6 @@ export const load = async ({ cookies, url }) => {
 		count: true
 	};
 
-	console.log(requestParams);
-
 	try {
 		const apiResponse = await api.listIdentities(requestParams);
 
@@ -40,11 +38,12 @@ export const load = async ({ cookies, url }) => {
 	} catch (err) {
 		throw error(500, {
 			message:
-				'an error occurred while fetching identities. Please examine your filters and and sorters amd try again.',
+				'an error occurred while fetching identities. 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'
 			],
+			// @ts-expect-error Error is only thrown from the API client
 			errData: err.response.data
 		});
 	}

Sveltekit-App/src/routes/home/identities/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
-	import { formatDate } from '$lib/Utils.js';
+	import { createOnAmountChange, createOnPageChange, createOnGo, formatDate } from '$lib/Utils.js';
 	import type { ModalSettings, PaginationSettings } from '@skeletonlabs/skeleton';
 	import { getModalStore, Paginator } from '@skeletonlabs/skeleton';
 
@@ -8,8 +7,6 @@
 
 	export let data;
 
-	console.log(data);
-
 	function TriggerSourceViewModal(source: any) {
 		const modal: ModalSettings = {
 			type: 'component',
@@ -23,27 +20,12 @@
 		modalStore.trigger(modal);
 	}
 
-	function onPageChange(e: CustomEvent): void {
-		console.log({ params: data.params, change: 'page', value: e.detail });
-		const params = new URLSearchParams();
-		params.set('page', e.detail);
-		params.set('limit', data.params.limit);
-		params.set('sorters', data.params.sorters);
-		params.set('filters', data.params.filters);
-
-		goto(`/home/identities?${params.toString()}`);
-	}
-
-	function onAmountChange(e: CustomEvent): void {
-		console.log({ params: data.params, change: 'limit', value: e.detail });
-		const params = new URLSearchParams();
-		params.set('page', data.params.page);
-		params.set('limit', e.detail);
-		params.set('sorters', data.params.sorters);
-		params.set('filters', data.params.filters);
-
-		goto(`/home/identities?${params.toString()}`);
-	}
+	$: onPageChange = createOnPageChange({ ...data.params, filters, sorters }, '/home/identities');
+	$: onAmountChange = createOnAmountChange(
+		{ ...data.params, filters, sorters },
+		'/home/identities'
+	);
+	$: onGo = createOnGo({ ...data.params, filters, sorters }, '/home/identities');
 
 	let settings = {
 		page: Number(data.params.page),
@@ -60,22 +42,23 @@
 	<div class="card flex justify-center flex-col align-middle">
 		<div class=" p-4 flex flex-row justify-between gap-4 flex-wrap">
 			<div class="flex flex-row gap-1">
-				<input bind:value={filters} class="input" title="Filter" type="text" placeholder="Filter" />
-				<input bind:value={sorters} class="input" title="Sorter" type="text" placeholder="Sorter" />
-				<button
-					on:click={() => {
-						const params = new URLSearchParams();
-						params.set('page', data.params.page);
-						params.set('limit', data.params.limit);
-						params.set('sorters', sorters);
-						params.set('filters', filters);
-
-						goto(`/home/identities?${params.toString()}`);
-					}}
-					class="btn variant-filled-primary text-white"
-				>
-					Go
-				</button>
+				<input
+					on:keydown={onGo}
+					bind:value={filters}
+					class="input"
+					title="Filter"
+					type="text"
+					placeholder="Filter"
+				/>
+				<input
+					on:keydown={onGo}
+					bind:value={sorters}
+					class="input"
+					title="Sorter"
+					type="text"
+					placeholder="Sorter"
+				/>
+				<button on:click={onGo} class="btn variant-filled-primary text-white"> Go </button>
 			</div>
 			<Paginator
 				bind:settings
@@ -137,8 +120,26 @@
 				{/each}
 			</tbody>
 		</table>
-		<div class=" pt-1">
-			<input class="input" title="Filter" type="text" placeholder="Filter text" />
+		<div class=" p-4 flex flex-row justify-between gap-4 flex-wrap">
+			<div class="flex flex-row gap-1">
+				<input
+					on:keydown={onGo}
+					bind:value={filters}
+					class="input"
+					title="Filter"
+					type="text"
+					placeholder="Filter"
+				/>
+				<input
+					on:keydown={onGo}
+					bind:value={sorters}
+					class="input"
+					title="Sorter"
+					type="text"
+					placeholder="Sorter"
+				/>
+				<button on:click={onGo} class="btn variant-filled-primary text-white"> Go </button>
+			</div>
 			<Paginator
 				bind:settings
 				on:page={onPageChange}

Sveltekit-App/src/routes/home/sources/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { formatDate } from '$lib/Utils.js';
 	import type { ModalSettings } from '@skeletonlabs/skeleton';
 	import { getModalStore } from '@skeletonlabs/skeleton';
 
@@ -7,12 +6,6 @@
 
 	export let data;
 
-	console.log(data);
-
-	// function mapEvents(sourceName: string) {
-	// 	return data.sourceData.events.filter((event) => event.name === sourceName);
-	// }
-
 	function TriggerSourceViewModal(source: any) {
 		const modal: ModalSettings = {
 			type: 'component',