[ML] Move nested property utilities and url state to packages

.github/CODEOWNERS

@@ -1071,4 +1071,6 @@ x-pack/packages/ml/agg_utils @elastic/ml-ui
 x-pack/packages/ml/aiops_components @elastic/ml-ui
 x-pack/packages/ml/aiops_utils @elastic/ml-ui
 x-pack/packages/ml/is_populated_object @elastic/ml-ui
+x-pack/packages/ml/nested_property @elastic/ml-ui
 x-pack/packages/ml/string_hash @elastic/ml-ui
+x-pack/packages/ml/url_state @elastic/ml-ui

package.json

@@ -350,7 +350,9 @@
     "@kbn/mapbox-gl": "link:packages/kbn-mapbox-gl",
     "@kbn/ml-agg-utils": "link:x-pack/packages/ml/agg_utils",
     "@kbn/ml-is-populated-object": "link:x-pack/packages/ml/is_populated_object",
+    "@kbn/ml-nested-property": "link:x-pack/packages/ml/nested_property",
     "@kbn/ml-string-hash": "link:x-pack/packages/ml/string_hash",
+    "@kbn/ml-url-state": "link:x-pack/packages/ml/url_state",
     "@kbn/monaco": "link:packages/kbn-monaco",
     "@kbn/osquery-io-ts-types": "link:packages/kbn-osquery-io-ts-types",
     "@kbn/plugin-discovery": "link:packages/kbn-plugin-discovery",

tsconfig.base.json

@@ -816,10 +816,14 @@
       "@kbn/ml-agg-utils/*": ["x-pack/packages/ml/agg_utils/*"],
       "@kbn/ml-is-populated-object": ["x-pack/packages/ml/is_populated_object"],
       "@kbn/ml-is-populated-object/*": ["x-pack/packages/ml/is_populated_object/*"],
+      "@kbn/ml-nested-property": ["x-pack/packages/ml/nested_property"],
+      "@kbn/ml-nested-property/*": ["x-pack/packages/ml/nested_property/*"],
       "@kbn/ml-plugin": ["x-pack/plugins/ml"],
       "@kbn/ml-plugin/*": ["x-pack/plugins/ml/*"],
       "@kbn/ml-string-hash": ["x-pack/packages/ml/string_hash"],
       "@kbn/ml-string-hash/*": ["x-pack/packages/ml/string_hash/*"],
+      "@kbn/ml-url-state": ["x-pack/packages/ml/url_state"],
+      "@kbn/ml-url-state/*": ["x-pack/packages/ml/url_state/*"],
       "@kbn/monaco": ["packages/kbn-monaco"],
       "@kbn/monaco/*": ["packages/kbn-monaco/*"],
       "@kbn/monitoring-collection-plugin": ["x-pack/plugins/monitoring_collection"],

x-pack/packages/ml/nested_property/README.md

@@ -0,0 +1,3 @@
+# @kbn/ml-nested-property
+
+Provides functionality similar to lodash's get() except that it's TypeScript aware and able to infer return types.

x-pack/packages/ml/nested_property/index.ts

@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export { getNestedProperty } from './src/get_nested_property';
+export { setNestedProperty } from './src/set_nested_property';

x-pack/packages/ml/nested_property/jest.config.js

@@ -0,0 +1,12 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../../../..',
+  roots: ['<rootDir>/x-pack/packages/ml/nested_property'],
+};

x-pack/packages/ml/nested_property/kibana.jsonc

@@ -0,0 +1,5 @@
+{
+  "type": "shared-common",
+  "id": "@kbn/ml-nested-property",
+  "owner": "@elastic/ml-ui"
+}

x-pack/packages/ml/nested_property/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@kbn/ml-nested-property",
+  "description": "TypeScript-aware utility functions to get/set attributes from objects.",
+  "author": "Machine Learning UI",
+  "homepage": "https://docs.elastic.dev/kibana-dev-docs/api/kbn-ml-nested-property",
+  "private": true,
+  "version": "1.0.0",
+  "license": "SSPL-1.0 OR Elastic License 2.0"
+}

x-pack/plugins/transform/common/utils/object_utils.test.ts → x-pack/packages/ml/nested_property/src/get_nested_property.test.ts

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { getNestedProperty } from './object_utils';
+import { getNestedProperty } from './get_nested_property';
 
 describe('object_utils', () => {
   test('getNestedProperty()', () => {

x-pack/plugins/transform/common/utils/object_utils.ts → x-pack/packages/ml/nested_property/src/get_nested_property.ts

@@ -33,21 +33,3 @@ export function getNestedProperty(
 
   return o;
 }
-
-export const setNestedProperty = (obj: Record<string, any>, accessor: string, value: any) => {
-  let ref = obj;
-  const accessors = accessor.split('.');
-  const len = accessors.length;
-  for (let i = 0; i < len - 1; i++) {
-    const attribute = accessors[i];
-    if (ref[attribute] === undefined) {
-      ref[attribute] = {};
-    }
-
-    ref = ref[attribute];
-  }
-
-  ref[accessors[len - 1]] = value;
-
-  return obj;
-};

x-pack/packages/ml/nested_property/src/set_nested_property.test.ts

@@ -0,0 +1,72 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { setNestedProperty } from './set_nested_property';
+
+describe('object_utils', () => {
+  test('setNestedProperty()', () => {
+    function getTestObj() {
+      return {
+        the: {
+          nested: {
+            value: 'the-nested-value',
+          },
+        },
+      };
+    }
+
+    function getFalseyObject() {
+      return {
+        the: {
+          nested: {
+            value: false,
+          },
+          other_nested: {
+            value: 0,
+          },
+        },
+      };
+    }
+
+    const test1 = setNestedProperty(getTestObj(), 'the', 'update');
+    expect(test1.the).toBe('update');
+
+    const test2 = setNestedProperty(getTestObj(), 'the$', 'update');
+    expect(test2.the$).toBe('update');
+
+    const test3 = setNestedProperty(getTestObj(), 'the$', 'the-default-value');
+    expect(test3.the$).toBe('the-default-value');
+
+    const test4 = setNestedProperty(getTestObj(), 'the.neSted', 'update');
+    expect(test4.the.neSted).toBe('update');
+
+    const test5 = setNestedProperty(getTestObj(), 'the.nested', 'update');
+    expect(test5.the.nested).toStrictEqual('update');
+
+    const test6 = setNestedProperty(getTestObj(), 'the.nested.vaLue', 'update');
+    expect(test6.the.nested.vaLue).toBe('update');
+
+    const test7 = setNestedProperty(getTestObj(), 'the.nested.value', 'update');
+    expect(test7.the.nested.value).toBe('update');
+
+    const test8 = setNestedProperty(getTestObj(), 'the.nested.value.didntExist', 'update');
+    expect(test8.the.nested.value.didntExist).toBe('update');
+
+    const test9 = setNestedProperty(
+      getTestObj(),
+      'the.nested.value.didntExist',
+      'the-default-value'
+    );
+    expect(test9.the.nested.value.didntExist).toBe('the-default-value');
+
+    const test10 = setNestedProperty(getFalseyObject(), 'the.nested.value', 'update');
+    expect(test10.the.nested.value).toBe('update');
+
+    const test11 = setNestedProperty(getFalseyObject(), 'the.other_nested.value', 'update');
+    expect(test11.the.other_nested.value).toBe('update');
+  });
+});

x-pack/packages/ml/nested_property/src/set_nested_property.ts

@@ -0,0 +1,24 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export const setNestedProperty = (obj: Record<string, any>, accessor: string, value: any) => {
+  let ref = obj;
+  const accessors = accessor.split('.');
+  const len = accessors.length;
+  for (let i = 0; i < len - 1; i++) {
+    const attribute = accessors[i];
+    if (typeof ref[attribute] !== 'object') {
+      ref[attribute] = {};
+    }
+
+    ref = ref[attribute];
+  }
+
+  ref[accessors[len - 1]] = value;
+
+  return obj;
+};

x-pack/packages/ml/nested_property/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "target/types",
+    "types": [
+      "jest",
+      "node",
+      "react"
+    ]
+  },
+  "include": [
+    "**/*.ts",
+      "**/*.tsx",
+  ],
+  "exclude": [
+    "target/**/*",
+  ]
+}

x-pack/packages/ml/url_state/README.md

@@ -0,0 +1,3 @@
+# @kbn/ml-url-state
+
+URL state management.

x-pack/packages/ml/url_state/index.ts

@@ -0,0 +1,19 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export {
+  isRisonSerializationRequired,
+  parseUrlState,
+  usePageUrlState,
+  useUrlState,
+  PageUrlStateService,
+  Provider,
+  UrlStateProvider,
+  type Accessor,
+  type Dictionary,
+  type SetUrlState,
+} from './src/url_state';

x-pack/packages/ml/url_state/jest.config.js

@@ -0,0 +1,12 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../../../..',
+  roots: ['<rootDir>/x-pack/packages/ml/url_state'],
+};

x-pack/packages/ml/url_state/kibana.jsonc

@@ -0,0 +1,5 @@
+{
+  "type": "shared-common",
+  "id": "@kbn/ml-url-state",
+  "owner": "@elastic/ml-ui"
+}

x-pack/packages/ml/url_state/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@kbn/ml-url-state",
+  "description": "Url state management utilities.",
+  "author": "Machine Learning UI",
+  "homepage": "https://docs.elastic.dev/kibana-dev-docs/api/kbn-ml-url-state",
+  "private": true,
+  "version": "1.0.0",
+  "license": "SSPL-1.0 OR Elastic License 2.0"
+}

x-pack/plugins/ml/public/application/util/url_state.tsx → x-pack/packages/ml/url_state/src/url_state.tsx

@@ -11,23 +11,25 @@ import React, {
   useCallback,
   useContext,
   useMemo,
-  FC,
   useRef,
   useEffect,
+  type FC,
 } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
 import { isEqual } from 'lodash';
+
+import { getNestedProperty } from '@kbn/ml-nested-property';
 import { decode, encode } from '@kbn/rison';
-import { useHistory, useLocation } from 'react-router-dom';
 
 import { BehaviorSubject, Observable } from 'rxjs';
 import { distinctUntilChanged } from 'rxjs/operators';
 import { isPopulatedObject } from '@kbn/ml-is-populated-object';
-import { Dictionary } from '../../../common/types/common';
 
-import { getNestedProperty } from './object_utils';
-import { MlPages } from '../../../common/constants/locator';
+export interface Dictionary<TValue> {
+  [id: string]: TValue;
+}
 
-type Accessor = '_a' | '_g';
+export type Accessor = '_a' | '_g';
 export type SetUrlState = (
   accessor: Accessor,
   attribute: string | Dictionary<any>,
@@ -48,7 +50,7 @@ const risonSerializedParams = new Set(['_a', '_g']);
  * Checks if the URL query parameter requires rison serialization.
  * @param queryParam
  */
-function isRisonSerializationRequired(queryParam: string): boolean {
+export function isRisonSerializationRequired(queryParam: string): boolean {
   return risonSerializedParams.has(queryParam);
 }
 
@@ -86,7 +88,7 @@ export const urlStateStore = createContext<UrlState>({
   setUrlState: () => {},
 });
 
-const { Provider } = urlStateStore;
+export const { Provider } = urlStateStore;
 
 export const UrlStateProvider: FC = ({ children }) => {
   const history = useHistory();
@@ -183,15 +185,6 @@ export const useUrlState = (
   return [urlState, setUrlState];
 };
 
-type LegacyUrlKeys = 'mlExplorerSwimlane';
-
-export type AppStateKey =
-  | 'mlSelectSeverity'
-  | 'mlSelectInterval'
-  | 'mlAnomaliesTable'
-  | MlPages
-  | LegacyUrlKeys;
-
 /**
  * Service for managing URL state of particular page.
  */
@@ -235,16 +228,21 @@ export class PageUrlStateService<T> {
   }
 }
 
+interface PageUrlState {
+  pageKey: string;
+  pageUrlState: object;
+}
+
 /**
  * Hook for managing the URL state of the page.
  */
-export const usePageUrlState = <PageUrlState extends object>(
-  pageKey: AppStateKey,
-  defaultState?: PageUrlState
+export const usePageUrlState = <T extends PageUrlState>(
+  pageKey: T['pageKey'],
+  defaultState?: T['pageUrlState']
 ): [
-  PageUrlState,
-  (update: Partial<PageUrlState>, replaceState?: boolean) => void,
-  PageUrlStateService<PageUrlState>
+  T['pageUrlState'],
+  (update: Partial<T['pageUrlState']>, replaceState?: boolean) => void,
+  PageUrlStateService<T['pageUrlState']>
 ] => {
   const [appState, setAppState] = useUrlState('_a');
   const pageState = appState?.[pageKey];
@@ -255,9 +253,9 @@ export const usePageUrlState = <PageUrlState extends object>(
     setCallback.current = setAppState;
   }, [setAppState]);
 
-  const prevPageState = useRef<PageUrlState | undefined>();
+  const prevPageState = useRef<T['pageUrlState'] | undefined>();
 
-  const resultPageState: PageUrlState = useMemo(() => {
+  const resultPageState: T['pageUrlState'] = useMemo(() => {
     const result = {
       ...(defaultState ?? {}),
       ...(pageState ?? {}),
@@ -283,7 +281,7 @@ export const usePageUrlState = <PageUrlState extends object>(
   }, [pageState]);
 
   const onStateUpdate = useCallback(
-    (update: Partial<PageUrlState>, replaceState?: boolean) => {
+    (update: Partial<T['pageUrlState']>, replaceState?: boolean) => {
       if (!setCallback?.current) {
         throw new Error('Callback for URL state update has not been initialized.');
       }
@@ -300,7 +298,7 @@ export const usePageUrlState = <PageUrlState extends object>(
     [pageKey, resultPageState]
   );
 
-  const pageUrlStateService = useMemo(() => new PageUrlStateService<PageUrlState>(), []);
+  const pageUrlStateService = useMemo(() => new PageUrlStateService<T['pageUrlState']>(), []);
 
   useEffect(
     function updatePageUrlService() {