fix: type the audit-log renderers (CM-1528)

frontend/src/modules/lf/config/audit-logs/log-rendering/index.ts

@@ -15,19 +15,27 @@ import organizationsEditProfile from './organizations-edit-profile';
 import organizationsMerge from './organizations-merge';
 import organizationsUnmerge from './organizations-unmerge';
 
-export interface LogRenderingConfig {
+export interface LogChanges {
+  removals: string[];
+  additions: string[];
+  changes: string[];
+}
+
+interface MergeLogEntity {
+  id?: string;
+  displayName?: string;
+}
+
+export interface MergeLogState {
+  primary: MergeLogEntity;
+  secondary?: MergeLogEntity;
+}
+
+export interface LogRenderingConfig<TOld = unknown, TNew = TOld> {
   label: string;
-  description: (log: AuditLog) => string;
-  properties?: (log: AuditLog) => {label: string, value: string;}[];
-  changes?: (log: AuditLog) => Promise<{
-    removals: string[]
-    additions: string[]
-    changes: string[]
-  } | null> | {
-    removals: string[]
-    additions: string[]
-    changes: string[]
-  } | null
+  description(log: AuditLog<TOld, TNew>): string;
+  properties?(log: AuditLog<TOld, TNew>): {label: string, value: string;}[];
+  changes?(log: AuditLog<TOld, TNew>): Promise<LogChanges | null> | LogChanges | null;
 }
 
 export const logRenderingConfig: Record<ActionType, LogRenderingConfig> = {

frontend/src/modules/lf/config/audit-logs/log-rendering/integrations-connect.ts

@@ -1,18 +1,18 @@
 import type { LogRenderingConfig } from '@/modules/lf/config/audit-logs/log-rendering/index';
 import { lfIdentities } from '@/config/identities';
 
-const integrationsConnect: LogRenderingConfig = {
+const integrationsConnect: LogRenderingConfig<{ platform?: string }> = {
   label: 'Integration connected',
   changes: () => null,
   description: (log) => {
-    const integration = lfIdentities[log.newState?.platform || log.oldState?.platform];
+    const integration = lfIdentities[log.newState?.platform || log.oldState?.platform || ''];
     if (integration) {
       return `Integration: ${integration.name}`;
     }
     return '';
   },
   properties: (log) => {
-    const integration = lfIdentities[log.newState?.platform || log.oldState?.platform];
+    const integration = lfIdentities[log.newState?.platform || log.oldState?.platform || ''];
     if (integration) {
       return [{
         label: 'Integration',

frontend/src/modules/lf/config/audit-logs/log-rendering/integrations-reconnect.ts

@@ -1,18 +1,18 @@
 import type { LogRenderingConfig } from '@/modules/lf/config/audit-logs/log-rendering/index';
 import { lfIdentities } from '@/config/identities';
 
-const integrationsReconnect: LogRenderingConfig = {
+const integrationsReconnect: LogRenderingConfig<{ platform?: string }> = {
   label: 'Integration re-connected',
   changes: () => null,
   description: (log) => {
-    const integration = lfIdentities[log.newState?.platform || log.oldState?.platform];
+    const integration = lfIdentities[log.newState?.platform || log.oldState?.platform || ''];
     if (integration) {
       return `Integration: ${integration.name}`;
     }
     return '';
   },
   properties: (log) => {
-    const integration = lfIdentities[log.newState?.platform || log.oldState?.platform];
+    const integration = lfIdentities[log.newState?.platform || log.oldState?.platform || ''];
     if (integration) {
       return [{
         label: 'Integration',

frontend/src/modules/lf/config/audit-logs/log-rendering/members-create.ts

@@ -1,6 +1,6 @@
 import type { LogRenderingConfig } from '@/modules/lf/config/audit-logs/log-rendering/index';
 
-const membersCreate: LogRenderingConfig = {
+const membersCreate: LogRenderingConfig<unknown, { displayName?: string }> = {
   label: 'Profile created',
   changes: () => null,
   description: (log) => {

frontend/src/modules/lf/config/audit-logs/log-rendering/members-edit-identities.ts

@@ -1,7 +1,9 @@
 import type { LogRenderingConfig } from '@/modules/lf/config/audit-logs/log-rendering/index';
 import { lfIdentities } from '@/config/identities';
 
-const membersEditIdentities: LogRenderingConfig = {
+type MemberIdentitiesState = Record<string, string[]>;
+
+const membersEditIdentities: LogRenderingConfig<MemberIdentitiesState> = {
   label: 'Profile identities updated',
   changes: (log) => {
     const removals = [];

frontend/src/modules/lf/config/audit-logs/log-rendering/members-edit-manual-affiliation.ts

@@ -1,9 +1,16 @@
-import type { LogRenderingConfig } from '@/modules/lf/config/audit-logs/log-rendering/index';
+import type { LogChanges, LogRenderingConfig } from '@/modules/lf/config/audit-logs/log-rendering/index';
 import { OrganizationService } from '@/modules/organization/organization-service';
 import { LfService } from '@/modules/lf/segments/lf-segments-service';
 import { dateHelper } from '@/shared/date-helper/date-helper';
 
-const formatDateRange = (dateStart, dateEnd) => {
+interface MemberAffiliationStateRow {
+  organizationId: string | null;
+  segmentId: string;
+  dateStart?: string | null;
+  dateEnd?: string | null;
+}
+
+const formatDateRange = (dateStart?: string | null, dateEnd?: string | null) => {
   // eslint-disable-next-line no-nested-ternary
   const dateStartFormat = dateStart
     ? dateHelper(dateStart).utc().format('MMMM YYYY')
@@ -15,10 +22,10 @@ const formatDateRange = (dateStart, dateEnd) => {
   return `${dateStartFormat} -> ${dateEndFormat}`;
 };
 
-const membersEditManualAffiliation: LogRenderingConfig = {
+const membersEditManualAffiliation: LogRenderingConfig<MemberAffiliationStateRow[]> = {
   label: 'Profile affiliation updated',
   changes: async (log) => {
-    const changes = {
+    const changes: LogChanges = {
       removals: [],
       additions: [],
       changes: [],
@@ -41,15 +48,15 @@ const membersEditManualAffiliation: LogRenderingConfig = {
       ]),
     ];
 
-    const orgs = await OrganizationService.listByIds(orgIds);
-    const segments = await LfService.listSegmentsByIds(segmentIds);
+    const orgs: { id: string; displayName: string }[] = await OrganizationService.listByIds(orgIds);
+    const segments: { id: string; name: string }[] = await LfService.listSegmentsByIds(segmentIds);
 
-    const orgById = orgs.reduce((obj, org) => ({
+    const orgById = orgs.reduce<Record<string, string>>((obj, org) => ({
       ...obj,
       [org.id]: org.displayName,
     }), {});
 
-    const segmentById = segments.reduce((obj, org) => ({
+    const segmentById = segments.reduce<Record<string, string>>((obj, org) => ({
       ...obj,
       [org.id]: org.name,
     }), {});
@@ -65,7 +72,7 @@ const membersEditManualAffiliation: LogRenderingConfig = {
           <br> (${formatDateRange(dateStart, dateEnd)})`,
         );
       } else {
-        const newOrg = newStateMap.get(org.organizationId);
+        const newOrg = newStateMap.get(org.organizationId)!;
         if (org.dateStart !== newOrg.dateStart || org.dateEnd !== newOrg.dateEnd || org.segmentId !== newOrg.segmentId) {
           changes.changes.push(
             `<span>${org.organizationId ? (orgById[org.organizationId]) : 'Individual'} </span>: 

frontend/src/modules/lf/config/audit-logs/log-rendering/members-edit-organizations.ts

@@ -1,8 +1,15 @@
-import type { LogRenderingConfig } from '@/modules/lf/config/audit-logs/log-rendering/index';
+import type { LogChanges, LogRenderingConfig } from '@/modules/lf/config/audit-logs/log-rendering/index';
 import { OrganizationService } from '@/modules/organization/organization-service';
 import { dateHelper } from '@/shared/date-helper/date-helper';
 
-const formatDateRange = (dateStart, dateEnd) => {
+interface MemberOrganizationStateRow {
+  organizationId: string;
+  title?: string | null;
+  dateStart: string | null;
+  dateEnd: string | null;
+}
+
+const formatDateRange = (dateStart: string | null, dateEnd: string | null) => {
   // eslint-disable-next-line no-nested-ternary
   const dateStartFormat = dateStart
     ? dateHelper(dateStart)
@@ -18,10 +25,10 @@ const formatDateRange = (dateStart, dateEnd) => {
   return `${dateStartFormat} -> ${dateEndFormat}`;
 };
 
-const membersEditOrganizations: LogRenderingConfig = {
+const membersEditOrganizations: LogRenderingConfig<MemberOrganizationStateRow[]> = {
   label: 'Profile work experience updated',
   changes: async (log) => {
-    const changes = {
+    const changes: LogChanges = {
       removals: [],
       additions: [],
       changes: [],
@@ -41,8 +48,8 @@ const membersEditOrganizations: LogRenderingConfig = {
       ]),
     ];
 
-    const orgs = await OrganizationService.listByIds(orgIds);
-    const orgById = orgs.reduce((obj, org) => ({
+    const orgs: { id: string; displayName: string }[] = await OrganizationService.listByIds(orgIds);
+    const orgById = orgs.reduce<Record<string, string>>((obj, org) => ({
       ...obj,
       [org.id]: org.displayName,
     }), {});
@@ -52,7 +59,7 @@ const membersEditOrganizations: LogRenderingConfig = {
       if (!newStateMap.has(org.organizationId)) {
         changes.removals.push(`<span>Organization:</span> ${org.organizationId ? (orgById[org.organizationId]) : 'Individual'}`);
       } else {
-        const newOrg = newStateMap.get(org.organizationId);
+        const newOrg = newStateMap.get(org.organizationId)!;
         if (
           formatDateRange(org.dateStart, org.dateEnd) !== formatDateRange(newOrg.dateStart, newOrg.dateEnd)
           || (org.title || '') !== (newOrg.title || '')) {

frontend/src/modules/lf/config/audit-logs/log-rendering/members-edit-profile.ts

@@ -19,17 +19,23 @@ function flattenObject(obj) {
   return flattenedObj;
 }
 
-const membersEditProfile: LogRenderingConfig = {
+interface MemberProfileState {
+  attributes?: Record<string, Record<string, unknown>>;
+  [key: string]: unknown;
+}
+
+const membersEditProfile: LogRenderingConfig<MemberProfileState> = {
   label: 'Profile updated',
   changes: (log) => {
     const additions: any[] = [];
     const removals: any[] = [];
     const changes: any[] = [];
 
-    const oldState = { ...log.oldState, ...flattenObject(log.oldState.attributes) };
-    const newState = { ...log.newState, ...flattenObject(log.newState.attributes) };
+    const oldState: Record<string, unknown> = { ...log.oldState, ...flattenObject(log.oldState.attributes) };
+    const newState: Record<string, unknown> = { ...log.newState, ...flattenObject(log.newState.attributes) };
     const diff = {
-      ...log.diff,
+      // diff is the deep-object-diff of the two states, always an object.
+      ...(log.diff as Record<string, unknown>),
       ...{ ...flattenObject(log.oldState.attributes), ...flattenObject(log.newState.attributes) },
     };
     delete oldState.attributes;

frontend/src/modules/lf/config/audit-logs/log-rendering/members-merge.ts

@@ -1,6 +1,6 @@
-import type { LogRenderingConfig } from '@/modules/lf/config/audit-logs/log-rendering/index';
+import type { LogRenderingConfig, MergeLogState } from '@/modules/lf/config/audit-logs/log-rendering/index';
 
-const membersMerge: LogRenderingConfig = {
+const membersMerge: LogRenderingConfig<MergeLogState> = {
   label: 'Profiles merged',
   changes: (log) => {
     const primary = log.oldState?.primary;

frontend/src/modules/lf/config/audit-logs/log-rendering/members-unmerge.ts

@@ -1,6 +1,6 @@
-import type { LogRenderingConfig } from '@/modules/lf/config/audit-logs/log-rendering/index';
+import type { LogRenderingConfig, MergeLogState } from '@/modules/lf/config/audit-logs/log-rendering/index';
 
-const membersMerge: LogRenderingConfig = {
+const membersMerge: LogRenderingConfig<MergeLogState> = {
   label: 'Profiles unmerged',
   changes: (log) => {
     const primary = log.oldState?.primary;

frontend/src/modules/lf/config/audit-logs/log-rendering/organizations-create.ts

@@ -1,6 +1,6 @@
 import type { LogRenderingConfig } from '@/modules/lf/config/audit-logs/log-rendering/index';
 
-const organizationsCreate: LogRenderingConfig = {
+const organizationsCreate: LogRenderingConfig<unknown, { displayName?: string }> = {
   label: 'Organization created',
   changes: () => null,
   description: (log) => {

frontend/src/modules/lf/config/audit-logs/log-rendering/organizations-edit-identities.ts

@@ -1,7 +1,9 @@
 import type { LogRenderingConfig } from '@/modules/lf/config/audit-logs/log-rendering/index';
 import { lfIdentities } from '@/config/identities';
 
-const organizationsEditIdentities: LogRenderingConfig = {
+type OrganizationIdentitiesState = Record<string, { value: string; type: string; verified: boolean }[]>;
+
+const organizationsEditIdentities: LogRenderingConfig<OrganizationIdentitiesState> = {
   label: 'Organization identities updated',
   changes: ({ oldState, newState }) => {
     const additions: any[] = [];

frontend/src/modules/lf/config/audit-logs/log-rendering/organizations-edit-profile.ts

@@ -5,14 +5,15 @@ function camelCaseToName(camelCase) {
     .replace(/^./, (str) => str.toUpperCase());
 }
 
-const organizationsEditProfile: LogRenderingConfig = {
+const organizationsEditProfile: LogRenderingConfig<Record<string, unknown>> = {
   label: 'Organization profile updated',
   changes: ({ oldState, newState, diff }) => {
     const additions = [];
     const removals = [];
     const changes = [];
 
-    Object.keys(diff).forEach((key) => {
+    // diff is the deep-object-diff of the two states, always an object.
+    Object.keys(diff as Record<string, unknown>).forEach((key) => {
       const keyName = camelCaseToName(key);
       if (!!oldState[key] && !newState[key] && newState[key] !== undefined) {
         const display = typeof oldState[key] === 'object' ? JSON.stringify(oldState[key]) : `${oldState[key]}`;

frontend/src/modules/lf/config/audit-logs/log-rendering/organizations-merge.ts

@@ -1,6 +1,6 @@
-import type { LogRenderingConfig } from '@/modules/lf/config/audit-logs/log-rendering/index';
+import type { LogRenderingConfig, MergeLogState } from '@/modules/lf/config/audit-logs/log-rendering/index';
 
-const organizationsMerge: LogRenderingConfig = {
+const organizationsMerge: LogRenderingConfig<MergeLogState> = {
   label: 'Organizations merged',
   changes: (log) => {
     const primary = log.oldState?.primary;

frontend/src/modules/lf/config/audit-logs/log-rendering/organizations-unmerge.ts

@@ -1,6 +1,6 @@
-import type { LogRenderingConfig } from '@/modules/lf/config/audit-logs/log-rendering/index';
+import type { LogRenderingConfig, MergeLogState } from '@/modules/lf/config/audit-logs/log-rendering/index';
 
-const organizationsMerge: LogRenderingConfig = {
+const organizationsMerge: LogRenderingConfig<MergeLogState> = {
   label: 'Organizations unmerged',
   changes: (log) => {
     const primary = log.oldState?.primary;

frontend/src/modules/lf/segments/components/logs/sections/log-changes.vue

@@ -33,14 +33,15 @@
 <script setup lang="ts">
 import type { AuditLog } from '@/modules/lf/segments/types/AuditLog';
 import { computed, onMounted, ref } from 'vue';
+import type { LogChanges } from '@/modules/lf/config/audit-logs/log-rendering';
 import { logRenderingConfig } from '@/modules/lf/config/audit-logs/log-rendering';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 
 const props = defineProps<{
   log: AuditLog
 }>();
 
-const changes = ref<Record<string, any[]> | null>({
+const changes = ref<LogChanges | null>({
   removals: [],
   additions: [],
   changes: [],

frontend/src/modules/lf/segments/types/AuditLog.ts

@@ -22,7 +22,7 @@ export interface Actor {
   email: string | null;
 }
 
-export interface AuditLog{
+export interface AuditLog<TOld = unknown, TNew = TOld> {
   id: string;
   timestamp: string;
   actor: Actor;
@@ -32,7 +32,7 @@ export interface AuditLog{
   actionType: ActionType;
   success: boolean;
   entityId: string;
-  oldState: any;
-  newState: any;
-  diff: any;
+  oldState: TOld;
+  newState: TNew;
+  diff: unknown;
 }

frontend/src/shared/form/element-change.ts

@@ -1,6 +1,4 @@
-import {
-  ref, computed, type Ref, type ComputedRef,
-} from 'vue';
+import { ref, computed, type Ref, type ComputedRef } from 'vue';
 
 export default function elementChangeDetector(element: Ref<unknown>): {
   temporaryElement: Ref<string>;
@@ -13,10 +11,9 @@ export default function elementChangeDetector(element: Ref<unknown>): {
     temporaryElement.value = JSON.stringify(element.value);
   }
 
-  const hasElementChanged = computed(() => (
-    temporaryElement.value
-      !== JSON.stringify(element.value)
-  ));
+  const hasElementChanged = computed(
+    () => temporaryElement.value !== JSON.stringify(element.value),
+  );
 
   return {
     temporaryElement,

frontend/src/shared/form/form-change.ts

@@ -1,6 +1,4 @@
-import {
-  ref, computed, type Ref, type ComputedRef,
-} from 'vue';
+import { ref, computed, type Ref, type ComputedRef } from 'vue';
 
 export default function formChangeDetector(form: object): {
   temporaryForm: Ref<string>;

frontend/typecheck-baseline.json

@@ -1 +1 @@
-{ "errors": 534 }
+{ "errors": 488 }