Merge pull request #222 from balena-io-modules/improve-rjst-typings

RJST: Improve typings & remove some duplicate checks

Author: thgreasi

package-lock.json

@@ -54,7 +54,7 @@
     "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
-    "@balena/lint": "^9.2.1",
+    "@balena/lint": "^9.3.0",
     "@storybook/addon-essentials": "^8.6.12",
     "@storybook/addon-interactions": "^8.6.12",
     "@storybook/addon-links": "^8.6.12",
@@ -89,7 +89,7 @@
     "test": "jest",
     "prepack": "npm run build",
     "lint": "balena-lint src",
-    "lint:fix": "balena-lint --fix src",
+    "lint-fix": "balena-lint --fix src",
     "prepare": "husky",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build --docs",

package.json

@@ -103,8 +103,8 @@ const sortData = <T extends object>(
 	} else if (key.startsWith(TAG_COLUMN_PREFIX)) {
 		if (title) {
 			sortedData.sort((a, b) => {
-				const item1tag = findTagOfTaggedResource(a, field as keyof T, title);
-				const item2tag = findTagOfTaggedResource(b, field as keyof T, title);
+				const item1tag = findTagOfTaggedResource(a, field, title);
+				const item2tag = findTagOfTaggedResource(b, field, title);
 
 				if (!item1tag && !item2tag) {
 					return 0;
@@ -124,8 +124,8 @@ const sortData = <T extends object>(
 		}
 	} else {
 		sortedData.sort((a, b) => {
-			const aValue = a[sort.field as keyof T];
-			const bValue = b[sort.field as keyof T];
+			const aValue = a[sort.field];
+			const bValue = b[sort.field];
 
 			if (aValue < bValue) {
 				return -sortDirectionMultiplier;
@@ -204,34 +204,37 @@ const TableRenderer = <T extends { id: number }>({
 		return sortPref;
 	}, [sort, model, columns, onSort]);
 
-	const handleAddTagClose = (selectedTagColumns: string[] | undefined) => {
-		if (!selectedTagColumns?.length) {
-			setShowAddTagDialog(false);
-			return;
-		}
+	const { tagField } = rjstContext;
+	const handleAddTagClose =
+		tagField != null
+			? (selectedTagColumns: string[] | undefined) => {
+					if (!selectedTagColumns?.length) {
+						setShowAddTagDialog(false);
+						return;
+					}
 
-		const additionalColumns = selectedTagColumns.map(
-			(key: string, index: number) => {
-				const field = rjstContext.tagField;
-				return {
-					title: key,
-					label: `Tag: ${key}`,
-					key: `${TAG_COLUMN_PREFIX}${key}`,
-					selected: true,
-					type: 'predefined',
-					field,
-					sortable: pagination.serverSide
-						? `${field}(tag_key='${key}')/value`
-						: true,
-					index: index + 1 + columns.length,
-					priority: '',
-					render: tagKeyRender(key),
-				} as RJSTEntityPropertyDefinition<T>;
-			},
-		);
-		setColumns(columns.concat(additionalColumns));
-		setShowAddTagDialog(false);
-	};
+					const additionalColumns = selectedTagColumns.map(
+						(key: string, index: number) => {
+							return {
+								title: key,
+								label: `Tag: ${key}`,
+								key: `${TAG_COLUMN_PREFIX}${key}`,
+								selected: true,
+								type: 'predefined',
+								field: tagField,
+								sortable: pagination.serverSide
+									? `${tagField}(tag_key='${key}')/value`
+									: true,
+								index: index + 1 + columns.length,
+								priority: '',
+								render: tagKeyRender(key),
+							} satisfies RJSTEntityPropertyDefinition<T>;
+						},
+					);
+					setColumns(columns.concat(additionalColumns));
+					setShowAddTagDialog(false);
+				}
+			: undefined;
 
 	useEffect(() => {
 		analytics.webTracker?.track('View table - columns', {
@@ -284,7 +287,7 @@ const TableRenderer = <T extends { id: number }>({
 					});
 				}}
 			/>
-			{showAddTagDialog && tagKeys?.length && (
+			{showAddTagDialog && tagKeys?.length && handleAddTagClose != null && (
 				<AddTagHandler
 					columns={columns}
 					tagKeys={tagKeys}

src/components/RJST/Lenses/types/table.tsx

@@ -6,7 +6,7 @@ export type CheckedState = 'none' | 'some' | 'all';
 
 export interface TableSortOptions<T> {
 	direction: Order;
-	field: string;
+	field: Extract<keyof T, string>;
 	key: string;
 	sortable: RJSTEntityPropertyDefinition<T>['sortable'];
 	refScheme?: string;

src/components/RJST/components/Table/utils.ts

@@ -40,7 +40,6 @@ import {
 	getFromLocalStorage,
 	getTagsDisabledReason,
 	setToLocalStorage,
-	getSelected,
 	getSortingFunction,
 	DEFAULT_ITEMS_PER_PAGE,
 } from './utils';
@@ -725,12 +724,26 @@ const getColumnsFromSchema = <T extends RJSTBaseResource<T>>({
 	customSort?: RJSTContext<T>['customSort'];
 	priorities?: Priorities<T>;
 	formats?: Format[];
-}) =>
-	Object.entries(schema.properties ?? {})
-		.filter(([_keyBy, val]) => isJSONSchema(val))
-		.flatMap(([key, val]) => {
+}): Array<RJSTEntityPropertyDefinition<T>> => {
+	const prioritySets = {
+		primary: new Set(priorities?.primary ?? []),
+		secondary: new Set(priorities?.secondary ?? []),
+	};
+	return (
+		Object.entries(schema.properties ?? {}) as Array<
+			[
+				Extract<keyof T, string>,
+				NonNullable<typeof schema.properties>[string] | undefined,
+			]
+		>
+	)
+		.filter((entry): entry is [Extract<keyof T, string>, JSONSchema] => {
+			const [_key, val] = entry;
+			return isJSONSchema(val);
+		})
+		.flatMap(([key, val]): Array<[Extract<keyof T, string>, JSONSchema]> => {
 			const refScheme = getPropertyScheme(val);
-			if (!refScheme || refScheme.length <= 1 || typeof val !== 'object') {
+			if (!refScheme || refScheme.length <= 1) {
 				return [[key, val]];
 			}
 			const entityFilterOnly = parseDescriptionProperty(val, 'x-filter-only');
@@ -761,34 +774,26 @@ const getColumnsFromSchema = <T extends RJSTBaseResource<T>>({
 			});
 		})
 		.filter(([key, val]) => {
-			const entryDescription = parseDescription(val as JSONSchema);
+			const entryDescription = parseDescription(val);
 			return (
 				key !== idField &&
 				(!entryDescription || !('x-filter-only' in entryDescription))
 			);
 		})
 		.map(([key, val], index) => {
-			if (typeof val !== 'object') {
-				return;
-			}
 			const xNoSort = parseDescriptionProperty(val, 'x-no-sort');
-			const definedPriorities = priorities ?? ({} as Priorities<T>);
 			const refScheme = getPropertyScheme(val);
-			const priority = definedPriorities.primary.find(
-				(prioritizedKey) => prioritizedKey === key,
-			)
+			const priority = prioritySets.primary.has(key)
 				? 'primary'
-				: definedPriorities.secondary.find(
-							(prioritizedKey) => prioritizedKey === key,
-					  )
+				: prioritySets.secondary.has(key)
 					? 'secondary'
 					: 'tertiary';
 			const widgetSchema = { ...val, title: undefined };
 			// TODO: Refactor this logic to create an object structure and retrieve the correct property using the refScheme.
 			// The customSort should look like: { user: { owns_items: [{ uuid: 'xx09x0' }] } }
 			// The refScheme will reference the property path, e.g., owns_items[0].uuid.
 			const fieldCustomSort =
-				customSort?.[`${key}_${refScheme}`] ?? customSort?.[key as string];
+				customSort?.[`${key}_${refScheme}`] ?? customSort?.[key];
 			if (fieldCustomSort != null) {
 				if (
 					isServerSide &&
@@ -808,11 +813,12 @@ const getColumnsFromSchema = <T extends RJSTBaseResource<T>>({
 				}
 			}
 			return {
-				...getTitleAndLabel(t, val, key as string, refScheme?.[0]),
+				...getTitleAndLabel(t, val, key, refScheme?.[0]),
 				field: key,
 				// This is used for storing columns and views
 				key: refScheme ? `${key}_${refScheme[0]}_${index}` : `${key}_${index}`,
-				selected: getSelected(key as keyof T, priorities),
+				selected:
+					!priorities || priority === 'primary' || priority === 'secondary',
 				priority,
 				type: 'predefined',
 				refScheme: refScheme?.[0],
@@ -822,7 +828,7 @@ const getColumnsFromSchema = <T extends RJSTBaseResource<T>>({
 						? false
 						: typeof fieldCustomSort === 'function'
 							? fieldCustomSort
-							: getSortingFunction(key as string, val),
+							: getSortingFunction(key, val),
 				render: (fieldVal: string, entry: T) => {
 					const calculatedField = rjstAdaptRefScheme(fieldVal, val);
 					return (
@@ -834,8 +840,6 @@ const getColumnsFromSchema = <T extends RJSTBaseResource<T>>({
 						/>
 					);
 				},
-			};
-		})
-		.filter(
-			(columnDef): columnDef is NonNullable<typeof columnDef> => !!columnDef,
-		) as Array<RJSTEntityPropertyDefinition<T>>;
+			} satisfies RJSTEntityPropertyDefinition<T>;
+		});
+};

src/components/RJST/index.tsx

@@ -1,9 +1,4 @@
-import type {
-	RJSTBaseResource,
-	Permissions,
-	Priorities,
-	RJSTTagsSdk,
-} from './schemaOps';
+import type { RJSTBaseResource, Permissions, RJSTTagsSdk } from './schemaOps';
 import { getPropertyScheme } from './schemaOps';
 import castArray from 'lodash/castArray';
 import get from 'lodash/get';
@@ -184,13 +179,3 @@ export const getSortingFunction = <T>(
 	}
 	return (a: T, b: T) => diff(a[schemaKey], b[schemaKey]);
 };
-
-export const getSelected = <T, K extends keyof T>(
-	key: K,
-	priorities?: Priorities<T>,
-) => {
-	if (!priorities) {
-		return true;
-	}
-	return priorities.primary.includes(key) || priorities.secondary.includes(key);
-};