[RAC] T-Grid is moving to a new home (#100265)

* wip

* First pass at standalone and embedded redux stores and usage

* wip

* First pass at standalone and embedded redux stores and usage

* wip

* clean up

* wip

* refact(NA): remove extra pkg_npm target and add specific target folders on @kbn/i18n

* cleanup

* - fixes type errors in tests

* WIP remove use_manage_timeline

* wip add query + selector

* finishing integrating timeline manage context from redux

* integrating t-grid in security solution

* fix RowRender type

* WIP begin to move components from package to plugin

* integration of t-grid inside of security solution

* wip to make redux work

* little trick to make  it render

* - fixes a few type errors

* better integration betwen tgrid and security solutions

* bringing back tsconfig on timeline

* wip integration t-grid in observability

* fix types

* fix type in security solutions

* add type to import + trie dto get the bundle size as small as possible

* fix type in integration test

* fix type in integration test

* - fix tests

* clean up to use technical fields

* - fixes unit tests

* - mocks the `useDateFormat` function of the `useKibana` service to fix unit tests

* fix t-grid settings vs create timeline + fix inspect button

* fix last suites test

* Update unit tests, snapshots and lint

* Fix bad merge

* fix plugin export

* Fix some failing tests

* fix unit tets in timelines plugins

* fix latest test

* fix i18n

* free obs from t-grid

* Fix timeline functional plugin types

* fix store provider

* Update failing defaultHeader test

* Fix i18n usage in security solution

* Fix remaining i18n errors in timelines plugin

* Dedupe common shared types

* move drag and drop utils in package to avoid duplication

* More shared type cleanup

* add feature flag

* review I

* fix merge  with master

* fix i18n translation

* More type deduping

* Use @kbn/common-utils, fix remaining types

* fix types

* fix tests

* missing type

* fix cypress tests

Co-authored-by: Kevin Qualters <[email protected]>
Co-authored-by: Tiago Costa <[email protected]>
Co-authored-by: Andrew Goldstein <[email protected]>

.eslintrc.js

@@ -893,6 +893,8 @@ module.exports = {
       files: [
         'x-pack/plugins/security_solution/public/**/*.{js,mjs,ts,tsx}',
         'x-pack/plugins/security_solution/common/**/*.{js,mjs,ts,tsx}',
+        'x-pack/plugins/timelines/public/**/*.{js,mjs,ts,tsx}',
+        'x-pack/plugins/timelines/common/**/*.{js,mjs,ts,tsx}',
       ],
       rules: {
         'import/no-nodejs-modules': 'error',
@@ -907,7 +909,10 @@ module.exports = {
     },
     {
       // typescript only for front and back end
-      files: ['x-pack/plugins/security_solution/**/*.{ts,tsx}'],
+      files: [
+        'x-pack/plugins/security_solution/**/*.{ts,tsx}',
+        'x-pack/plugins/timelines/**/*.{ts,tsx}',
+      ],
       rules: {
         '@typescript-eslint/no-this-alias': 'error',
         '@typescript-eslint/no-explicit-any': 'error',
@@ -917,7 +922,10 @@ module.exports = {
     },
     {
       // typescript and javascript for front and back end
-      files: ['x-pack/plugins/security_solution/**/*.{js,mjs,ts,tsx}'],
+      files: [
+        'x-pack/plugins/security_solution/**/*.{js,mjs,ts,tsx}',
+        'x-pack/plugins/timelines/**/*.{js,mjs,ts,tsx}',
+      ],
       plugins: ['eslint-plugin-node', 'react'],
       env: {
         jest: true,

package.json

@@ -149,6 +149,7 @@
     "@kbn/securitysolution-list-api": "link:bazel-bin/packages/kbn-securitysolution-list-api",
     "@kbn/securitysolution-list-hooks": "link:bazel-bin/packages/kbn-securitysolution-list-hooks",
     "@kbn/securitysolution-list-utils": "link:bazel-bin/packages/kbn-securitysolution-list-utils",
+    "@kbn/securitysolution-t-grid": "link:bazel-bin/packages/kbn-securitysolution-t-grid",
     "@kbn/securitysolution-utils": "link:bazel-bin/packages/kbn-securitysolution-utils",
     "@kbn/server-http-tools": "link:bazel-bin/packages/kbn-server-http-tools",
     "@kbn/server-route-repository": "link:bazel-bin/packages/kbn-server-route-repository",
@@ -217,6 +218,8 @@
     "cytoscape-dagre": "^2.2.2",
     "d3": "3.5.17",
     "d3-array": "1.2.4",
+    "d3-cloud": "1.2.5",
+    "d3-interpolate": "^3.0.1",
     "d3-scale": "1.0.7",
     "d3-shape": "^1.1.0",
     "d3-time": "^1.1.0",
@@ -511,6 +514,7 @@
     "@types/cytoscape": "^3.14.0",
     "@types/d3": "^3.5.43",
     "@types/d3-array": "^1.2.7",
+    "@types/d3-interpolate": "^2.0.0",
     "@types/d3-scale": "^2.1.1",
     "@types/d3-shape": "^1.3.1",
     "@types/d3-time": "^1.0.10",

packages/BUILD.bazel

@@ -3,7 +3,7 @@
 filegroup(
   name = "build",
   srcs = [
-      "//packages/elastic-datemath:build",
+     "//packages/elastic-datemath:build",
       "//packages/elastic-eslint-config-kibana:build",
       "//packages/elastic-safer-lodash-set:build",
       "//packages/kbn-ace:build",
@@ -41,6 +41,7 @@ filegroup(
       "//packages/kbn-securitysolution-list-utils:build",
       "//packages/kbn-securitysolution-utils:build",
       "//packages/kbn-securitysolution-es-utils:build",
+      "//packages/kbn-securitysolution-t-grid:build",
       "//packages/kbn-securitysolution-hook-utils:build",
       "//packages/kbn-server-http-tools:build",
       "//packages/kbn-server-route-repository:build",

packages/kbn-optimizer/limits.yml

@@ -67,7 +67,7 @@ pageLoadAssetSize:
   searchprofiler: 67080
   security: 95864
   securityOss: 30806
-  securitySolution: 76000
+  securitySolution: 217673
   share: 99061
   snapshotRestore: 79032
   spaces: 57868
@@ -107,7 +107,7 @@ pageLoadAssetSize:
   dataVisualizer: 27530
   banners: 17946
   mapsEms: 26072
-  timelines: 28613
+  timelines: 230410
   screenshotMode: 17856
   visTypePie: 35583
   cases: 144442

packages/kbn-securitysolution-t-grid/BUILD.bazel

@@ -0,0 +1,125 @@
+load("@npm//@bazel/typescript:index.bzl", "ts_config", "ts_project")
+load("@build_bazel_rules_nodejs//:index.bzl", "js_library", "pkg_npm")
+
+PKG_BASE_NAME = "kbn-securitysolution-t-grid"
+
+PKG_REQUIRE_NAME = "@kbn/securitysolution-t-grid"
+
+SOURCE_FILES = glob(
+  [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+  ],
+  exclude = [
+    "**/*.test.*",
+    "**/*.mock.*",
+  ],
+)
+
+SRCS = SOURCE_FILES
+
+filegroup(
+  name = "srcs",
+  srcs = SRCS,
+)
+
+NPM_MODULE_EXTRA_FILES = [
+  "react/package.json",
+  "package.json",
+  "README.md",
+]
+
+SRC_DEPS = [
+  "//packages/kbn-babel-preset",
+  "//packages/kbn-dev-utils",
+  "//packages/kbn-i18n",
+  "@npm//@babel/core",
+  "@npm//babel-loader",
+  "@npm//enzyme",
+  "@npm//jest",
+  "@npm//lodash",
+  "@npm//react",
+  "@npm//react-beautiful-dnd",
+  "@npm//tslib",
+]
+
+TYPES_DEPS = [
+  "@npm//typescript",
+  "@npm//@types/enzyme",
+  "@npm//@types/jest",
+  "@npm//@types/lodash",
+  "@npm//@types/node",
+  "@npm//@types/react",
+  "@npm//@types/react-beautiful-dnd",
+]
+
+DEPS = SRC_DEPS + TYPES_DEPS
+
+ts_config(
+  name = "tsconfig",
+  src = "tsconfig.json",
+  deps = [
+      "//:tsconfig.base.json",
+  ],
+)
+
+ts_config(
+  name = "tsconfig_browser",
+  src = "tsconfig.browser.json",
+  deps = [
+    "//:tsconfig.base.json",
+    "//:tsconfig.browser.json",
+  ],
+)
+
+ts_project(
+  name = "tsc",
+  args = ["--pretty"],
+  srcs = SRCS,
+  deps = DEPS,
+  declaration = True,
+  declaration_dir = "target_types",
+  declaration_map = True,
+  incremental = True,
+  out_dir = "target_node",
+  root_dir = "src",
+  source_map = True,
+  tsconfig = ":tsconfig",
+)
+
+ts_project(
+  name = "tsc_browser",
+  args = ['--pretty'],
+  srcs = SRCS,
+  deps = DEPS,
+  allow_js = True,
+  declaration = False,
+  incremental = True,
+  out_dir = "target_web",
+  source_map = True,
+  root_dir = "src",
+  tsconfig = ":tsconfig_browser",
+)
+
+js_library(
+  name = PKG_BASE_NAME,
+  package_name = PKG_REQUIRE_NAME,
+  srcs = NPM_MODULE_EXTRA_FILES,
+  visibility = ["//visibility:public"],
+  deps = [":tsc", ":tsc_browser"] + DEPS,
+)
+
+pkg_npm(
+  name = "npm_module",
+  deps = [
+      ":%s" % PKG_BASE_NAME,
+  ],
+)
+
+filegroup(
+  name = "build",
+  srcs = [
+      ":npm_module",
+  ],
+  visibility = ["//visibility:public"],
+)

packages/kbn-securitysolution-t-grid/README.md

@@ -0,0 +1,3 @@
+# kbn-securitysolution-t-grid
+
+We do not want to create circular dependencies between security_solution and timelines plugins. Therefore , we will use this packages to share components between these two plugins.

packages/kbn-securitysolution-t-grid/babel.config.js

@@ -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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+module.exports = {
+  env: {
+    web: {
+      presets: ['@kbn/babel-preset/webpack_preset'],
+    },
+    node: {
+      presets: ['@kbn/babel-preset/node_preset'],
+    },
+  },
+  ignore: ['**/*.test.ts', '**/*.test.tsx'],
+};

packages/kbn-securitysolution-t-grid/jest.config.js

@@ -0,0 +1,13 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../..',
+  roots: ['<rootDir>/packages/kbn-securitysolution-t-grid'],
+};

packages/kbn-securitysolution-t-grid/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@kbn/securitysolution-t-grid",
+  "version": "1.0.0",
+  "description": "security solution t-grid packages will allow sharing components between timelines and security_solution plugin until we transfer all functionality to timelines plugin",
+  "license": "SSPL-1.0 OR Elastic License 2.0",
+  "browser": "./target_web/browser.js",
+  "main": "./target_node/index.js",
+  "types": "./target_types/index.d.ts",
+  "private": true
+}

packages/kbn-securitysolution-t-grid/react/package.json

@@ -0,0 +1,5 @@
+{
+  "browser": "../target_web/react",
+  "main": "../target_node/react",
+  "types": "../target_types/react/index.d.ts"
+}

packages/kbn-securitysolution-t-grid/src/constants/index.ts

@@ -0,0 +1,26 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export const HIGHLIGHTED_DROP_TARGET_CLASS_NAME = 'highlighted-drop-target';
+export const EMPTY_PROVIDERS_GROUP_CLASS_NAME = 'empty-providers-group';
+
+/** The draggable will move this many pixels via the keyboard when the arrow key is pressed */
+export const KEYBOARD_DRAG_OFFSET = 20;
+
+export const DRAGGABLE_KEYBOARD_WRAPPER_CLASS_NAME = 'draggable-keyboard-wrapper';
+
+export const ROW_RENDERER_CLASS_NAME = 'row-renderer';
+
+export const NOTES_CONTAINER_CLASS_NAME = 'notes-container';
+
+export const NOTE_CONTENT_CLASS_NAME = 'note-content';
+
+/** This class is added to the document body while dragging */
+export const IS_DRAGGING_CLASS_NAME = 'is-dragging';
+
+export const HOVER_ACTIONS_ALWAYS_SHOW_CLASS_NAME = 'hover-actions-always-show';

packages/kbn-securitysolution-t-grid/src/index.ts

@@ -0,0 +1,11 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export * from './constants';
+export * from './utils';
+export * from './mock';

packages/kbn-securitysolution-t-grid/src/mock/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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export * from './mock_event_details';

x-pack/plugins/security_solution/common/utils/mock_event_details.ts → packages/kbn-securitysolution-t-grid/src/mock/mock_event_details.ts

@@ -1,8 +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.
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
  */
 
 export const eventHit = {

packages/kbn-securitysolution-t-grid/src/utils/api/index.ts

@@ -0,0 +1,42 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { has } from 'lodash/fp';
+
+export interface AppError extends Error {
+  body: {
+    message: string;
+  };
+}
+
+export interface KibanaError extends AppError {
+  body: {
+    message: string;
+    statusCode: number;
+  };
+}
+
+export interface SecurityAppError extends AppError {
+  body: {
+    message: string;
+    status_code: number;
+  };
+}
+
+export const isKibanaError = (error: unknown): error is KibanaError =>
+  has('message', error) && has('body.message', error) && has('body.statusCode', error);
+
+export const isSecurityAppError = (error: unknown): error is SecurityAppError =>
+  has('message', error) && has('body.message', error) && has('body.status_code', error);
+
+export const isAppError = (error: unknown): error is AppError =>
+  isKibanaError(error) || isSecurityAppError(error);
+
+export const isNotFoundError = (error: unknown) =>
+  (isKibanaError(error) && error.body.statusCode === 404) ||
+  (isSecurityAppError(error) && error.body.status_code === 404);