[Cases] Cases component package (elastic#143011)

* Export status component from package

* Rename component

* Fix e2e tests

* Fix e2e tests

* Improve translations

* Improve README

* [CI] Auto-commit changed files from 'node scripts/generate codeowners'

* Fix i18n

Fix i18n

* Improvements

* Fix test

Co-authored-by: kibanamachine <[email protected]>

.github/CODEOWNERS

@@ -864,6 +864,7 @@ packages/kbn-babel-plugin-synthetic-packages @elastic/kibana-operations
 packages/kbn-babel-preset @elastic/kibana-operations
 packages/kbn-bazel-packages @elastic/kibana-operations
 packages/kbn-bazel-runner @elastic/kibana-operations
+packages/kbn-cases-components @elastic/response-ops
 packages/kbn-chart-icons @elastic/kibana-vis-editors
 packages/kbn-ci-stats-core @elastic/kibana-operations
 packages/kbn-ci-stats-performance-metrics @elastic/kibana-operations

.i18nrc.json

@@ -5,6 +5,7 @@
     "apmOss": "src/plugins/apm_oss",
     "autocomplete": "packages/kbn-securitysolution-autocomplete/src",
     "bfetch": "src/plugins/bfetch",
+    "cases": ["packages/kbn-cases-components"],
     "charts": "src/plugins/charts",
     "console": "src/plugins/console",
     "contentManagement": "packages/content-management",

package.json

@@ -142,6 +142,7 @@
     "@kbn/analytics-shippers-fullstory": "link:bazel-bin/packages/analytics/shippers/fullstory",
     "@kbn/apm-config-loader": "link:bazel-bin/packages/kbn-apm-config-loader",
     "@kbn/apm-utils": "link:bazel-bin/packages/kbn-apm-utils",
+    "@kbn/cases-components": "link:bazel-bin/packages/kbn-cases-components",
     "@kbn/chart-icons": "link:bazel-bin/packages/kbn-chart-icons",
     "@kbn/coloring": "link:bazel-bin/packages/kbn-coloring",
     "@kbn/config": "link:bazel-bin/packages/kbn-config",
@@ -865,6 +866,7 @@
     "@types/kbn__axe-config": "link:bazel-bin/packages/kbn-axe-config/npm_module_types",
     "@types/kbn__bazel-packages": "link:bazel-bin/packages/kbn-bazel-packages/npm_module_types",
     "@types/kbn__bazel-runner": "link:bazel-bin/packages/kbn-bazel-runner/npm_module_types",
+    "@types/kbn__cases-components": "link:bazel-bin/packages/kbn-cases-components/npm_module_types",
     "@types/kbn__chart-icons": "link:bazel-bin/packages/kbn-chart-icons/npm_module_types",
     "@types/kbn__ci-stats-core": "link:bazel-bin/packages/kbn-ci-stats-core/npm_module_types",
     "@types/kbn__ci-stats-performance-metrics": "link:bazel-bin/packages/kbn-ci-stats-performance-metrics/npm_module_types",

packages/BUILD.bazel

@@ -191,6 +191,7 @@ filegroup(
     "//packages/kbn-babel-preset:build",
     "//packages/kbn-bazel-packages:build",
     "//packages/kbn-bazel-runner:build",
+    "//packages/kbn-cases-components:build",
     "//packages/kbn-chart-icons:build",
     "//packages/kbn-ci-stats-core:build",
     "//packages/kbn-ci-stats-performance-metrics:build",
@@ -527,6 +528,7 @@ filegroup(
     "//packages/kbn-axe-config:build_types",
     "//packages/kbn-bazel-packages:build_types",
     "//packages/kbn-bazel-runner:build_types",
+    "//packages/kbn-cases-components:build_types",
     "//packages/kbn-chart-icons:build_types",
     "//packages/kbn-ci-stats-core:build_types",
     "//packages/kbn-ci-stats-performance-metrics:build_types",

packages/kbn-cases-components/BUILD.bazel

@@ -0,0 +1,125 @@
+load("@npm//@bazel/typescript:index.bzl", "ts_config")
+load("@build_bazel_rules_nodejs//:index.bzl", "js_library")
+load("//src/dev/bazel:index.bzl", "jsts_transpiler", "pkg_npm", "pkg_npm_types", "ts_project")
+
+PKG_DIRNAME = "kbn-cases-components"
+PKG_REQUIRE_NAME = "@kbn/cases-components"
+
+SOURCE_FILES = glob(
+  [
+    "**/*.ts",
+    "**/*.tsx",
+  ],
+  exclude = [
+    "**/*.config.js",
+    "**/*.mock.*",
+    "**/*.test.*",
+    "**/*.stories.*",
+    "**/__snapshots__/**",
+    "**/integration_tests/**",
+    "**/mocks/**",
+    "**/scripts/**",
+    "**/storybook/**",
+    "**/test_fixtures/**",
+    "**/test_helpers/**",
+  ],
+)
+
+SRCS = SOURCE_FILES
+
+filegroup(
+  name = "srcs",
+  srcs = SRCS,
+)
+
+NPM_MODULE_EXTRA_FILES = [
+  "package.json",
+]
+
+RUNTIME_DEPS = [
+  "//packages/kbn-i18n",
+  "//packages/kbn-i18n-react",
+  "@npm//@elastic/eui",
+  "@npm//@testing-library/react",
+  "@npm//react",
+]
+
+TYPES_DEPS = [
+  "//packages/kbn-i18n:npm_module_types",
+  "//packages/kbn-i18n-react:npm_module_types",
+  "@npm//@elastic/eui",
+  "@npm//@types/node",
+  "@npm//@types/jest",
+  "@npm//@testing-library/react",
+  "@npm//tslib",
+  "@npm//@types/react",
+  "@npm//@testing-library/jest-dom",
+]
+
+jsts_transpiler(
+  name = "target_node",
+  srcs = SRCS,
+  build_pkg_name = package_name(),
+)
+
+jsts_transpiler(
+  name = "target_web",
+  srcs = SRCS,
+  build_pkg_name = package_name(),
+  web = True,
+)
+
+ts_config(
+  name = "tsconfig",
+  src = "tsconfig.json",
+  deps = [
+    "//:tsconfig.base.json",
+    "//:tsconfig.bazel.json",
+  ],
+)
+
+ts_project(
+  name = "tsc_types",
+  args = ['--pretty'],
+  srcs = SRCS,
+  deps = TYPES_DEPS,
+  declaration = True,
+  declaration_map = True,
+  emit_declaration_only = True,
+  out_dir = "target_types",
+  tsconfig = ":tsconfig",
+)
+
+js_library(
+  name = PKG_DIRNAME,
+  srcs = NPM_MODULE_EXTRA_FILES,
+  deps = RUNTIME_DEPS + [":target_node", ":target_web"],
+  package_name = PKG_REQUIRE_NAME,
+  visibility = ["//visibility:public"],
+)
+
+pkg_npm(
+  name = "npm_module",
+  deps = [":" + PKG_DIRNAME],
+)
+
+filegroup(
+  name = "build",
+  srcs = [":npm_module"],
+  visibility = ["//visibility:public"],
+)
+
+pkg_npm_types(
+  name = "npm_module_types",
+  srcs = SRCS,
+  deps = [":tsc_types"],
+  package_name = PKG_REQUIRE_NAME,
+  tsconfig = ":tsconfig",
+  visibility = ["//visibility:public"],
+)
+
+filegroup(
+  name = "build_types",
+  srcs = [":npm_module_types"],
+  visibility = ["//visibility:public"],
+)

packages/kbn-cases-components/README.md

@@ -0,0 +1,15 @@
+# @kbn/cases-components
+
+The package exports a collection of pure Cases components.
+
+## Components
+
+### Status
+
+The component renders the status of a case. Usage:
+
+```
+import { Status, CaseStatuses } from '@kbn/cases-components';
+
+<Status status={CaseStatuses.open} />
+```

packages/kbn-cases-components/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 { Status } from './src/status/status';
+export { CaseStatuses } from './src/status/types';
+export { getStatusConfiguration } from './src/status/config';

packages/kbn-cases-components/jest.config.js

@@ -0,0 +1,14 @@
+/*
+ * 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-cases-components'],
+  setupFilesAfterEnv: ['<rootDir>/packages/kbn-cases-components/setup_tests.ts'],
+};

packages/kbn-cases-components/kibana.jsonc

@@ -0,0 +1,7 @@
+{
+  "type": "shared-common",
+  "id": "@kbn/cases-components",
+  "owner": "@elastic/response-ops",
+  "runtimeDeps": [],
+  "typeDeps": [],
+}

packages/kbn-cases-components/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@kbn/cases-components",
+  "private": true,
+  "version": "1.0.0",
+  "main": "./target_node/index.js",
+  "browser": "./target_web/index.js",
+  "license": "SSPL-1.0 OR Elastic License 2.0"
+}

packages/kbn-cases-components/setup_tests.ts

@@ -0,0 +1,10 @@
+/*
+ * 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.
+ */
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import '@testing-library/jest-dom';

packages/kbn-cases-components/src/status/config.ts

@@ -0,0 +1,28 @@
+/*
+ * 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 * as i18n from './translations';
+import { CaseStatuses } from './types';
+
+export const getStatusConfiguration = () => ({
+  [CaseStatuses.open]: {
+    color: 'primary',
+    label: i18n.OPEN,
+    icon: 'folderOpen' as const,
+  },
+  [CaseStatuses['in-progress']]: {
+    color: 'warning',
+    label: i18n.IN_PROGRESS,
+    icon: 'folderExclamation' as const,
+  },
+  [CaseStatuses.closed]: {
+    color: 'default',
+    label: i18n.CLOSED,
+    icon: 'folderCheck' as const,
+  },
+});

packages/kbn-cases-components/src/status/status.test.tsx

@@ -0,0 +1,28 @@
+/*
+ * 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 React from 'react';
+import { render } from '@testing-library/react';
+
+import { Status } from './status';
+import { CaseStatuses } from './types';
+import { getStatusConfiguration } from './config';
+
+const statusConfiguration = getStatusConfiguration();
+
+describe('Stats', () => {
+  it.each([[CaseStatuses.open], [CaseStatuses['in-progress']], [CaseStatuses.closed]])(
+    'renders correctly with status: %s',
+    async (status) => {
+      const res = render(<Status status={status} />);
+      const label = statusConfiguration[status].label;
+
+      expect(res.getByText(label)).toBeInTheDocument();
+    }
+  );
+});

packages/kbn-cases-components/src/status/status.tsx

@@ -0,0 +1,35 @@
+/*
+ * 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 React, { memo } from 'react';
+import { EuiBadge } from '@elastic/eui';
+
+import { getStatusConfiguration } from './config';
+import { CaseStatuses } from './types';
+
+interface Props {
+  status: CaseStatuses;
+  dataTestSubj?: string;
+}
+
+const statuses = getStatusConfiguration();
+
+const CaseStatusComponent: React.FC<Props> = ({ status, dataTestSubj }) => {
+  return (
+    <EuiBadge
+      data-test-subj={dataTestSubj ? dataTestSubj : `case-status-badge-${status}`}
+      color={statuses[status]?.color}
+    >
+      {statuses[status]?.label}
+    </EuiBadge>
+  );
+};
+
+CaseStatusComponent.displayName = 'Status';
+
+export const Status = memo(CaseStatusComponent);

packages/kbn-cases-components/src/status/translations.ts

@@ -0,0 +1,21 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+export const OPEN = i18n.translate('cases.components.status.open', {
+  defaultMessage: 'Open',
+});
+
+export const IN_PROGRESS = i18n.translate('cases.components.status.inProgress', {
+  defaultMessage: 'In progress',
+});
+
+export const CLOSED = i18n.translate('cases.components.status.closed', {
+  defaultMessage: 'Closed',
+});

packages/kbn-cases-components/src/status/types.ts

@@ -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.
+ */
+
+export enum CaseStatuses {
+  open = 'open',
+  'in-progress' = 'in-progress',
+  closed = 'closed',
+}

packages/kbn-cases-components/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../../tsconfig.bazel.json",
+  "compilerOptions": {
+    "declaration": true,
+    "declarationMap": true,
+    "emitDeclarationOnly": true,
+    "outDir": "target_types",
+    "stripInternal": false,
+    "types": [
+      "jest",
+      "node",
+      "react"
+    ]
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+  ]
+}