[Cases] Cases component package (#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 <42973632+kibanamachine@users.noreply.github.com>

.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",
+  ]
+}

x-pack/plugins/cases/common/api/cases/status.ts

@@ -6,12 +6,9 @@
  */
 
 import * as rt from 'io-ts';
+import { CaseStatuses } from '@kbn/cases-components';
 
-export enum CaseStatuses {
-  open = 'open',
-  'in-progress' = 'in-progress',
-  closed = 'closed',
-}
+export { CaseStatuses };
 
 export const CaseStatusRt = rt.union([
   rt.literal(CaseStatuses.open),

x-pack/plugins/cases/public/components/all_cases/all_cases_list.test.tsx

@@ -477,7 +477,7 @@ describe('AllCasesListGeneric', () => {
       </TestProviders>
     );
 
-    expect(wrapper.find('[data-test-subj="status-badge-in-progress"]').exists()).toBeTruthy();
+    expect(wrapper.find('[data-test-subj="case-status-badge-in-progress"]').exists()).toBeTruthy();
   });
 
   it('shows Solution column if there are no set owners', async () => {

x-pack/plugins/cases/public/components/all_cases/status_filter.tsx

@@ -6,8 +6,15 @@
  */
 
 import React, { memo } from 'react';
-import { EuiSuperSelect, EuiSuperSelectOption, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import { Status, statuses } from '../status';
+import {
+  EuiSuperSelect,
+  EuiSuperSelectOption,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiBadge,
+} from '@elastic/eui';
+import { Status } from '@kbn/cases-components';
+import { allCaseStatus, statuses } from '../status';
 import { CaseStatusWithAllStatus, StatusAll } from '../../../common/ui/types';
 
 interface Props {
@@ -17,6 +24,16 @@ interface Props {
   hiddenStatuses?: CaseStatusWithAllStatus[];
 }
 
+const AllStatusBadge = () => {
+  return (
+    <EuiBadge data-test-subj="status-badge-all" color={allCaseStatus[StatusAll].color}>
+      {allCaseStatus[StatusAll].label}
+    </EuiBadge>
+  );
+};
+
+AllStatusBadge.displayName = 'AllStatusBadge';
+
 const StatusFilterComponent: React.FC<Props> = ({
   stats,
   selectedStatus,
@@ -31,9 +48,7 @@ const StatusFilterComponent: React.FC<Props> = ({
       inputDisplay: (
         <EuiFlexGroup gutterSize="xs" alignItems={'center'} responsive={false}>
           <EuiFlexItem grow={false}>
-            <span>
-              <Status type={status} />
-            </span>
+            <span>{status === 'all' ? <AllStatusBadge /> : <Status status={status} />}</span>
           </EuiFlexItem>
           {status !== StatusAll && <EuiFlexItem grow={false}>{` (${stats[status]})`}</EuiFlexItem>}
         </EuiFlexGroup>

x-pack/plugins/cases/public/components/all_cases/use_cases_columns.tsx

@@ -22,8 +22,9 @@ import {
 } from '@elastic/eui';
 import { RIGHT_ALIGNMENT } from '@elastic/eui/lib/services';
 import styled from 'styled-components';
-
+import { Status } from '@kbn/cases-components';
 import { UserProfileWithAvatar } from '@kbn/user-profile-components';
+
 import { Case } from '../../../common/ui/types';
 import { CaseStatuses, ActionConnector, CaseSeverity } from '../../../common/api';
 import { OWNER_INFO } from '../../../common/constants';
@@ -44,7 +45,6 @@ import { getUsernameDataTestSubj } from '../user_profiles/data_test_subject';
 import { CurrentUserProfile } from '../types';
 import { SmallUserAvatar } from '../user_profiles/small_user_avatar';
 import { useCasesFeatures } from '../../common/use_cases_features';
-import { Status } from '../status';
 
 type CasesColumns =
   | EuiTableActionsColumnType<Case>
@@ -302,7 +302,7 @@ export const useCasesColumns = ({
           return getEmptyTagValue();
         }
 
-        return <Status type={theCase.status} />;
+        return <Status status={theCase.status} />;
       },
     },
     {

x-pack/plugins/cases/public/components/case_action_bar/index.tsx

@@ -107,7 +107,8 @@ const CaseActionBarComponent: React.FC<CaseActionBarProps> = ({
                   <EuiDescriptionListDescription>
                     <StatusContextMenu
                       currentStatus={caseData.status}
-                      disabled={!permissions.update || isLoading}
+                      disabled={!permissions.update}
+                      isLoading={isLoading}
                       onStatusChanged={onStatusChanged}
                     />
                   </EuiDescriptionListDescription>

x-pack/plugins/cases/public/components/case_action_bar/status_context_menu.test.tsx

@@ -18,7 +18,7 @@ describe('SyncAlertsSwitch', () => {
     jest.clearAllMocks();
   });
 
-  it('it renders', async () => {
+  it('renders', async () => {
     const wrapper = mount(
       <StatusContextMenu currentStatus={CaseStatuses.open} onStatusChanged={onStatusChanged} />
     );
@@ -26,7 +26,7 @@ describe('SyncAlertsSwitch', () => {
     expect(wrapper.find(`[data-test-subj="case-view-status-dropdown"]`).exists()).toBeTruthy();
   });
 
-  it('it renders when disabled', async () => {
+  it('renders a simple status badge when disabled', async () => {
     const wrapper = mount(
       <StatusContextMenu
         disabled={true}
@@ -35,10 +35,11 @@ describe('SyncAlertsSwitch', () => {
       />
     );
 
-    expect(wrapper.find(`[data-test-subj="case-view-status-dropdown"]`).exists()).toBeTruthy();
+    expect(wrapper.find(`[data-test-subj="case-view-status-dropdown"]`).exists()).toBeFalsy();
+    expect(wrapper.find(`[data-test-subj="case-status-badge-open"]`).exists()).toBeTruthy();
   });
 
-  it('it renders the current status correctly', async () => {
+  it('renders the current status correctly', async () => {
     const wrapper = mount(
       <StatusContextMenu currentStatus={CaseStatuses.closed} onStatusChanged={onStatusChanged} />
     );
@@ -48,7 +49,7 @@ describe('SyncAlertsSwitch', () => {
     );
   });
 
-  it('it changes the status', async () => {
+  it('changes the status', async () => {
     const wrapper = mount(
       <StatusContextMenu currentStatus={CaseStatuses.open} onStatusChanged={onStatusChanged} />
     );
@@ -61,7 +62,7 @@ describe('SyncAlertsSwitch', () => {
     expect(onStatusChanged).toHaveBeenCalledWith('in-progress');
   });
 
-  it('it does not call onStatusChanged if selection is same as current status', async () => {
+  it('does not call onStatusChanged if selection is same as current status', async () => {
     const wrapper = mount(
       <StatusContextMenu currentStatus={CaseStatuses.open} onStatusChanged={onStatusChanged} />
     );

x-pack/plugins/cases/public/components/case_action_bar/status_context_menu.tsx

@@ -7,27 +7,41 @@
 
 import React, { memo, useCallback, useMemo, useState } from 'react';
 import { EuiPopover, EuiContextMenuPanel, EuiContextMenuItem } from '@elastic/eui';
+import { Status } from '@kbn/cases-components';
 import { caseStatuses, CaseStatuses } from '../../../common/api';
-import { Status } from '../status';
+import { StatusPopoverButton } from '../status';
 import { CHANGE_STATUS } from '../all_cases/translations';
 
 interface Props {
   currentStatus: CaseStatuses;
   disabled?: boolean;
+  isLoading?: boolean;
   onStatusChanged: (status: CaseStatuses) => void;
 }
 
 const StatusContextMenuComponent: React.FC<Props> = ({
   currentStatus,
   disabled = false,
+  isLoading = false,
   onStatusChanged,
 }) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const togglePopover = useCallback(
+    () => setIsPopoverOpen((prevPopoverStatus) => !prevPopoverStatus),
+    []
+  );
+
   const closePopover = useCallback(() => setIsPopoverOpen(false), []);
-  const openPopover = useCallback(() => setIsPopoverOpen(true), []);
+
   const popOverButton = useMemo(
-    () => <Status disabled={disabled} type={currentStatus} withArrow onClick={openPopover} />,
-    [disabled, currentStatus, openPopover]
+    () => (
+      <StatusPopoverButton
+        disabled={disabled || isLoading}
+        status={currentStatus}
+        onClick={togglePopover}
+      />
+    ),
+    [disabled, currentStatus, togglePopover, isLoading]
   );
 
   const onContextMenuItemClick = useCallback(
@@ -49,12 +63,16 @@ const StatusContextMenuComponent: React.FC<Props> = ({
           key={status}
           onClick={() => onContextMenuItemClick(status)}
         >
-          <Status type={status} />
+          <Status status={status} />
         </EuiContextMenuItem>
       )),
     [currentStatus, onContextMenuItemClick]
   );
 
+  if (disabled) {
+    return <Status status={currentStatus} />;
+  }
+
   return (
     <EuiPopover
       anchorPosition="downLeft"
@@ -69,6 +87,7 @@ const StatusContextMenuComponent: React.FC<Props> = ({
     </EuiPopover>
   );
 };
+
 StatusContextMenuComponent.displayName = 'StatusContextMenu';
 
 export const StatusContextMenu = memo(StatusContextMenuComponent);

x-pack/plugins/cases/public/components/status/config.ts

@@ -4,20 +4,21 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
+import { getStatusConfiguration } from '@kbn/cases-components';
 import { StatusAll } from '../../../common/ui/types';
 import { CaseStatuses } from '../../../common/api';
 import * as i18n from './translations';
 import { AllCaseStatus, Statuses } from './types';
 
+const statusConfiguration = getStatusConfiguration();
+
 export const allCaseStatus: AllCaseStatus = {
   [StatusAll]: { color: 'hollow', label: i18n.ALL },
 };
 
 export const statuses: Statuses = {
   [CaseStatuses.open]: {
-    color: 'primary',
-    label: i18n.OPEN,
-    icon: 'folderOpen' as const,
+    ...statusConfiguration[CaseStatuses.open],
     actions: {
       single: {
         title: i18n.OPEN_CASE,
@@ -34,9 +35,7 @@ export const statuses: Statuses = {
     },
   },
   [CaseStatuses['in-progress']]: {
-    color: 'warning',
-    label: i18n.IN_PROGRESS,
-    icon: 'folderExclamation' as const,
+    ...statusConfiguration[CaseStatuses['in-progress']],
     actions: {
       single: {
         title: i18n.MARK_CASE_IN_PROGRESS,
@@ -53,9 +52,7 @@ export const statuses: Statuses = {
     },
   },
   [CaseStatuses.closed]: {
-    color: 'default',
-    label: i18n.CLOSED,
-    icon: 'folderCheck' as const,
+    ...statusConfiguration[CaseStatuses.closed],
     actions: {
       single: {
         title: i18n.CLOSE_CASE,

x-pack/plugins/cases/public/components/status/index.ts

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-export * from './status';
+export * from './status_popover_button';
 export * from './config';
 export * from './status_stats';
 export * from './types';

x-pack/plugins/cases/public/components/status/status.test.tsx

@@ -1,93 +0,0 @@
-/*
- * 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 React from 'react';
-import { mount } from 'enzyme';
-
-import { CaseStatuses } from '../../../common/api';
-import { Status } from './status';
-
-describe('Stats', () => {
-  const onClick = jest.fn();
-
-  it('it renders', async () => {
-    const wrapper = mount(<Status type={CaseStatuses.open} withArrow={false} onClick={onClick} />);
-
-    expect(wrapper.find(`[data-test-subj="status-badge-open"]`).exists()).toBeTruthy();
-    expect(
-      wrapper.find(`[data-test-subj="status-badge-open"] .euiBadge__iconButton`).exists()
-    ).toBeFalsy();
-  });
-
-  it('it renders with arrow', async () => {
-    const wrapper = mount(<Status type={CaseStatuses.open} withArrow={true} onClick={onClick} />);
-
-    expect(
-      wrapper.find(`[data-test-subj="status-badge-open"] .euiBadge__iconButton`).exists()
-    ).toBeTruthy();
-  });
-
-  it('it renders with the pop over enabled by default', async () => {
-    const wrapper = mount(<Status type={CaseStatuses.open} withArrow={true} onClick={onClick} />);
-
-    expect(
-      wrapper
-        .find(`[data-test-subj="status-badge-open"] .euiBadge__iconButton`)
-        .first()
-        .prop('disabled')
-    ).toBe(false);
-  });
-
-  it('renders without the arrow and is not clickable when initialized disabled', async () => {
-    const wrapper = mount(
-      <Status disabled={true} type={CaseStatuses.open} withArrow={true} onClick={onClick} />
-    );
-
-    expect(
-      wrapper.find(`[data-test-subj="status-badge-open"] .euiBadge__iconButton`).exists()
-    ).toBeFalsy();
-  });
-
-  it('it calls onClick when pressing the badge', async () => {
-    const wrapper = mount(<Status type={CaseStatuses.open} withArrow={true} onClick={onClick} />);
-
-    wrapper.find(`[data-test-subj="status-badge-open"] .euiBadge__iconButton`).simulate('click');
-    expect(onClick).toHaveBeenCalled();
-  });
-
-  describe('Colors', () => {
-    it('shows the correct color when status is open', async () => {
-      const wrapper = mount(
-        <Status type={CaseStatuses.open} withArrow={false} onClick={onClick} />
-      );
-
-      expect(wrapper.find(`[data-test-subj="status-badge-open"]`).first().prop('color')).toBe(
-        'primary'
-      );
-    });
-
-    it('shows the correct color when status is in-progress', async () => {
-      const wrapper = mount(
-        <Status type={CaseStatuses['in-progress']} withArrow={false} onClick={onClick} />
-      );
-
-      expect(
-        wrapper.find(`[data-test-subj="status-badge-in-progress"]`).first().prop('color')
-      ).toBe('warning');
-    });
-
-    it('shows the correct color when status is closed', async () => {
-      const wrapper = mount(
-        <Status type={CaseStatuses.closed} withArrow={false} onClick={onClick} />
-      );
-
-      expect(wrapper.find(`[data-test-subj="status-badge-closed"]`).first().prop('color')).toBe(
-        'default'
-      );
-    });
-  });
-});

x-pack/plugins/cases/public/components/status/status.tsx

@@ -1,51 +0,0 @@
-/*
- * 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 React, { memo, useMemo } from 'react';
-import { noop } from 'lodash/fp';
-import { EuiBadge } from '@elastic/eui';
-
-import { allCaseStatus, statuses } from './config';
-import * as i18n from './translations';
-import { CaseStatusWithAllStatus, StatusAll } from '../../../common/ui/types';
-
-interface Props {
-  disabled?: boolean;
-  type: CaseStatusWithAllStatus;
-  withArrow?: boolean;
-  onClick?: () => void;
-}
-
-const StatusComponent: React.FC<Props> = ({
-  type,
-  disabled = false,
-  withArrow = false,
-  onClick = noop,
-}) => {
-  const props = useMemo(
-    () => ({
-      color: type === StatusAll ? allCaseStatus[StatusAll].color : statuses[type].color,
-      // if we are disabled, don't show the arrow and don't allow the user to click
-      ...(withArrow && !disabled ? { iconType: 'arrowDown', iconSide: 'right' as const } : {}),
-      ...(!disabled ? { iconOnClick: onClick } : { iconOnClick: noop }),
-    }),
-    [disabled, onClick, withArrow, type]
-  );
-
-  return (
-    <EuiBadge
-      {...props}
-      iconOnClickAriaLabel={i18n.STATUS_ICON_ARIA}
-      data-test-subj={`status-badge-${type}`}
-    >
-      {type === StatusAll ? allCaseStatus[StatusAll].label : statuses[type].label}
-    </EuiBadge>
-  );
-};
-StatusComponent.displayName = 'Status';
-
-export const Status = memo(StatusComponent);

x-pack/plugins/cases/public/components/status/status_popover_button.test.tsx

@@ -0,0 +1,99 @@
+/*
+ * 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 React from 'react';
+import { mount } from 'enzyme';
+
+import { CaseStatuses } from '../../../common/api';
+import { StatusPopoverButton } from './status_popover_button';
+
+describe('StatusPopoverButton', () => {
+  const onClick = jest.fn();
+
+  it('renders', async () => {
+    const wrapper = mount(<StatusPopoverButton status={CaseStatuses.open} onClick={onClick} />);
+
+    expect(
+      wrapper.find(`[data-test-subj="case-status-badge-popover-button-open"]`).exists()
+    ).toBeTruthy();
+    expect(
+      wrapper
+        .find(`[data-test-subj="case-status-badge-popover-button-open"] .euiBadge__iconButton`)
+        .exists()
+    ).toBeTruthy();
+  });
+
+  it('renders with the pop over enabled by default', async () => {
+    const wrapper = mount(<StatusPopoverButton status={CaseStatuses.open} onClick={onClick} />);
+
+    expect(
+      wrapper
+        .find(`[data-test-subj="case-status-badge-popover-button-open"] .euiBadge__iconButton`)
+        .first()
+        .prop('disabled')
+    ).toBe(false);
+  });
+
+  it('disables the button correctly', async () => {
+    const wrapper = mount(
+      <StatusPopoverButton disabled={true} status={CaseStatuses.open} onClick={onClick} />
+    );
+
+    expect(
+      wrapper
+        .find(`[data-test-subj="case-status-badge-popover-button-open"] .euiBadge__iconButton`)
+        .first()
+        .prop('disabled')
+    ).toBe(true);
+  });
+
+  it('calls onClick when pressing the badge', async () => {
+    const wrapper = mount(<StatusPopoverButton status={CaseStatuses.open} onClick={onClick} />);
+
+    wrapper
+      .find(`[data-test-subj="case-status-badge-popover-button-open"] .euiBadge__iconButton`)
+      .simulate('click');
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  describe('Colors', () => {
+    it('shows the correct color when status is open', async () => {
+      const wrapper = mount(<StatusPopoverButton status={CaseStatuses.open} onClick={onClick} />);
+
+      expect(
+        wrapper
+          .find(`[data-test-subj="case-status-badge-popover-button-open"]`)
+          .first()
+          .prop('color')
+      ).toBe('primary');
+    });
+
+    it('shows the correct color when status is in-progress', async () => {
+      const wrapper = mount(
+        <StatusPopoverButton status={CaseStatuses['in-progress']} onClick={onClick} />
+      );
+
+      expect(
+        wrapper
+          .find(`[data-test-subj="case-status-badge-popover-button-in-progress"]`)
+          .first()
+          .prop('color')
+      ).toBe('warning');
+    });
+
+    it('shows the correct color when status is closed', async () => {
+      const wrapper = mount(<StatusPopoverButton status={CaseStatuses.closed} onClick={onClick} />);
+
+      expect(
+        wrapper
+          .find(`[data-test-subj="case-status-badge-popover-button-closed"]`)
+          .first()
+          .prop('color')
+      ).toBe('default');
+    });
+  });
+});

x-pack/plugins/cases/public/components/status/status_popover_button.tsx

@@ -0,0 +1,39 @@
+/*
+ * 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 React, { memo } from 'react';
+import { EuiBadge } from '@elastic/eui';
+
+import { CaseStatuses } from '@kbn/cases-components';
+import { statuses } from './config';
+import * as i18n from './translations';
+
+interface Props {
+  disabled?: boolean;
+  status: CaseStatuses;
+  onClick: () => void;
+}
+
+const StatusPopoverButtonComponent: React.FC<Props> = ({ status, disabled = false, onClick }) => {
+  return (
+    <EuiBadge
+      iconType="arrowDown"
+      iconSide="right"
+      iconOnClick={onClick}
+      iconOnClickAriaLabel={i18n.STATUS_ICON_ARIA}
+      data-test-subj={`case-status-badge-popover-button-${status}`}
+      isDisabled={disabled}
+      color={statuses[status].color}
+    >
+      {statuses[status].label}
+    </EuiBadge>
+  );
+};
+
+StatusPopoverButtonComponent.displayName = 'StatusPopoverButton';
+
+export const StatusPopoverButton = memo(StatusPopoverButtonComponent);

x-pack/plugins/cases/public/components/status/translations.ts

@@ -12,18 +12,6 @@ export const ALL = i18n.translate('xpack.cases.status.all', {
   defaultMessage: 'All status',
 });
 
-export const OPEN = i18n.translate('xpack.cases.status.open', {
-  defaultMessage: 'Open',
-});
-
-export const IN_PROGRESS = i18n.translate('xpack.cases.status.inProgress', {
-  defaultMessage: 'In progress',
-});
-
-export const CLOSED = i18n.translate('xpack.cases.status.closed', {
-  defaultMessage: 'Closed',
-});
-
 export const STATUS_ICON_ARIA = i18n.translate('xpack.cases.status.iconAria', {
   defaultMessage: 'Change status',
 });
@@ -39,10 +27,3 @@ export const CASE_IN_PROGRESS = i18n.translate('xpack.cases.caseView.caseInProgr
 export const CASE_CLOSED = i18n.translate('xpack.cases.caseView.caseClosed', {
   defaultMessage: 'Case closed',
 });
-
-export const BULK_ACTION_DELETE_SELECTED = i18n.translate(
-  'xpack.cases.caseTable.bulkActions.deleteSelectedTitle',
-  {
-    defaultMessage: 'Delete selected',
-  }
-);

x-pack/plugins/cases/public/components/user_actions/status.tsx

@@ -7,10 +7,11 @@
 
 import React from 'react';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { Status } from '@kbn/cases-components';
 import { CaseStatuses, StatusUserAction } from '../../../common/api';
 import { UserActionBuilder, UserActionResponse } from './types';
 import { createCommonUpdateUserActionBuilder } from './common';
-import { Status, statuses } from '../status';
+import { statuses } from '../status';
 import * as i18n from './translations';
 
 const isStatusValid = (status: string): status is CaseStatuses =>
@@ -28,7 +29,7 @@ const getLabelTitle = (userAction: UserActionResponse<StatusUserAction>) => {
       >
         <EuiFlexItem grow={false}>{i18n.MARKED_CASE_AS}</EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <Status type={status} />
+          <Status status={status} />
         </EuiFlexItem>
       </EuiFlexGroup>
     );

x-pack/plugins/translations/translations/fr-FR.json

@@ -9306,7 +9306,6 @@
     "xpack.cases.casesStats.mttr": "Temps moyen avant fermeture",
     "xpack.cases.casesStats.mttrDescription": "La durée moyenne (de la création à la clôture) de vos cas en cours",
     "xpack.cases.caseTable.bulkActions": "Actions groupées",
-    "xpack.cases.caseTable.bulkActions.deleteSelectedTitle": "Supprimer la sélection",
     "xpack.cases.caseTable.changeStatus": "Modifier le statut",
     "xpack.cases.caseTable.closed": "Fermé",
     "xpack.cases.caseTable.closedCases": "Cas fermés",
@@ -9562,10 +9561,7 @@
     "xpack.cases.severity.medium": "Moyenne",
     "xpack.cases.severity.title": "Sévérité",
     "xpack.cases.status.all": "Tous les statuts",
-    "xpack.cases.status.closed": "Fermé",
     "xpack.cases.status.iconAria": "Modifier le statut",
-    "xpack.cases.status.inProgress": "En cours",
-    "xpack.cases.status.open": "Ouvrir",
     "xpack.cases.userActions.attachmentNotRegisteredErrorMsg": "Le type de pièce jointe n'est pas enregistré",
     "xpack.cases.userActions.defaultEventAttachmentTitle": "ajouté une pièce jointe de type",
     "xpack.crossClusterReplication.app.deniedPermissionDescription": "Pour utiliser la réplication inter-clusters, vous devez disposer de {clusterPrivilegesCount, plural, one {ce privilège de cluster} other {ces privilèges de cluster}} : {clusterPrivileges}.",

x-pack/plugins/translations/translations/ja-JP.json

@@ -9293,7 +9293,6 @@
     "xpack.cases.casesStats.mttr": "クローズまでの平均時間",
     "xpack.cases.casesStats.mttrDescription": "現在のアセットの平均期間（作成から終了まで）",
     "xpack.cases.caseTable.bulkActions": "一斉アクション",
-    "xpack.cases.caseTable.bulkActions.deleteSelectedTitle": "選択した項目を削除",
     "xpack.cases.caseTable.changeStatus": "ステータスの変更",
     "xpack.cases.caseTable.closed": "終了",
     "xpack.cases.caseTable.closedCases": "終了したケース",
@@ -9549,10 +9548,7 @@
     "xpack.cases.severity.medium": "中",
     "xpack.cases.severity.title": "深刻度",
     "xpack.cases.status.all": "すべてのステータス",
-    "xpack.cases.status.closed": "終了",
     "xpack.cases.status.iconAria": "ステータスの変更",
-    "xpack.cases.status.inProgress": "進行中",
-    "xpack.cases.status.open": "開く",
     "xpack.cases.userActions.attachmentNotRegisteredErrorMsg": "アラートタイプが登録されていません",
     "xpack.cases.userActions.defaultEventAttachmentTitle": "タイプの添付ファイルが追加されました",
     "xpack.crossClusterReplication.app.deniedPermissionDescription": "クラスター横断レプリケーションを使用するには、{clusterPrivilegesCount, plural, other  {次のクラスター特権}}が必要です：{clusterPrivileges}。",

x-pack/plugins/translations/translations/zh-CN.json

@@ -9311,7 +9311,6 @@
     "xpack.cases.casesStats.mttr": "平均关闭时间",
     "xpack.cases.casesStats.mttrDescription": "当前案例的平均持续时间（从创建到关闭）",
     "xpack.cases.caseTable.bulkActions": "批处理操作",
-    "xpack.cases.caseTable.bulkActions.deleteSelectedTitle": "删除所选",
     "xpack.cases.caseTable.changeStatus": "更改状态",
     "xpack.cases.caseTable.closed": "已关闭",
     "xpack.cases.caseTable.closedCases": "已关闭案例",
@@ -9567,10 +9566,7 @@
     "xpack.cases.severity.medium": "中",
     "xpack.cases.severity.title": "严重性",
     "xpack.cases.status.all": "所有状态",
-    "xpack.cases.status.closed": "已关闭",
     "xpack.cases.status.iconAria": "更改状态",
-    "xpack.cases.status.inProgress": "进行中",
-    "xpack.cases.status.open": "打开",
     "xpack.cases.userActions.attachmentNotRegisteredErrorMsg": "未注册附件类型",
     "xpack.cases.userActions.defaultEventAttachmentTitle": "已添加以下类型的附件",
     "xpack.crossClusterReplication.app.deniedPermissionDescription": "要使用跨集群复制，您必须具有{clusterPrivilegesCount, plural, other {以下集群权限}}：{clusterPrivileges}。",

x-pack/test/functional/services/cases/common.ts

@@ -39,7 +39,7 @@ export function CasesCommonServiceProvider({ getService, getPageObject }: FtrPro
       this.openCaseSetStatusDropdown();
       await testSubjects.click(`case-view-status-dropdown-${status}`);
       await header.waitUntilLoadingHasFinished();
-      await testSubjects.existOrFail(`status-badge-${status}`);
+      await testSubjects.existOrFail(`case-status-badge-popover-button-${status}`);
     },
 
     async openCaseSetStatusDropdown() {

x-pack/test/functional_with_es_ssl/apps/cases/list_view.ts

@@ -91,7 +91,7 @@ export default ({ getPageObject, getService }: FtrProviderContext) => {
         it('change the status of cases to in-progress correctly', async () => {
           await cases.casesTable.selectAndChangeStatusOfAllCases(CaseStatuses['in-progress']);
           await cases.casesTable.waitForTableToFinishLoading();
-          await testSubjects.missingOrFail('status-badge-open');
+          await testSubjects.missingOrFail('case-status-badge-open');
         });
       });
 
@@ -223,7 +223,7 @@ export default ({ getPageObject, getService }: FtrProviderContext) => {
 
       it('filters cases by status', async () => {
         await cases.casesTable.changeStatus(CaseStatuses['in-progress'], 0);
-        await testSubjects.existOrFail(`status-badge-${CaseStatuses['in-progress']}`);
+        await testSubjects.existOrFail(`case-status-badge-${CaseStatuses['in-progress']}`);
         await cases.casesTable.filterByStatus(CaseStatuses['in-progress']);
         await cases.casesTable.validateCasesTableHasNthRows(1);
       });
@@ -326,17 +326,17 @@ export default ({ getPageObject, getService }: FtrProviderContext) => {
 
         it('to in progress', async () => {
           await cases.casesTable.changeStatus(CaseStatuses['in-progress'], 0);
-          await testSubjects.existOrFail(`status-badge-${CaseStatuses['in-progress']}`);
+          await testSubjects.existOrFail(`case-status-badge-${CaseStatuses['in-progress']}`);
         });
 
         it('to closed', async () => {
           await cases.casesTable.changeStatus(CaseStatuses.closed, 0);
-          await testSubjects.existOrFail(`status-badge-${CaseStatuses.closed}`);
+          await testSubjects.existOrFail(`case-status-badge-${CaseStatuses.closed}`);
         });
 
         it('to open', async () => {
           await cases.casesTable.changeStatus(CaseStatuses.open, 0);
-          await testSubjects.existOrFail(`status-badge-${CaseStatuses.open}`);
+          await testSubjects.existOrFail(`case-status-badge-${CaseStatuses.open}`);
         });
       });
 

x-pack/test/functional_with_es_ssl/apps/cases/view_case.ts

@@ -86,79 +86,100 @@ export default ({ getPageObject, getService }: FtrProviderContext) => {
         await find.byCssSelector('[data-test-subj*="tags-delete-action"]');
       });
 
-      it('changes a case status to in-progress via dropdown menu', async () => {
-        await cases.common.changeCaseStatusViaDropdownAndVerify(CaseStatuses['in-progress']);
-        // validate user action
-        await find.byCssSelector(
-          '[data-test-subj*="status-update-action"] [data-test-subj="status-badge-in-progress"]'
-        );
-        // validates dropdown tag
-        await testSubjects.existOrFail('case-view-status-dropdown > status-badge-in-progress');
-      });
-
-      it('changes a case status to closed via dropdown-menu', async () => {
-        await cases.common.changeCaseStatusViaDropdownAndVerify(CaseStatuses.closed);
-
-        // validate user action
-        await find.byCssSelector(
-          '[data-test-subj*="status-update-action"] [data-test-subj="status-badge-closed"]'
-        );
-        // validates dropdown tag
-        await testSubjects.existOrFail('case-view-status-dropdown > status-badge-closed');
-      });
-
-      it("reopens a case from the 'reopen case' button", async () => {
-        await cases.common.changeCaseStatusViaDropdownAndVerify(CaseStatuses.closed);
-        await header.waitUntilLoadingHasFinished();
-        await testSubjects.click('case-view-status-action-button');
-        await header.waitUntilLoadingHasFinished();
-
-        await testSubjects.existOrFail('header-page-supplements > status-badge-open', {
-          timeout: 5000,
+      describe('status', () => {
+        it('changes a case status to in-progress via dropdown menu', async () => {
+          await cases.common.changeCaseStatusViaDropdownAndVerify(CaseStatuses['in-progress']);
+          // validate user action
+          await find.byCssSelector(
+            '[data-test-subj*="status-update-action"] [data-test-subj="case-status-badge-in-progress"]'
+          );
+          // validates dropdown tag
+          await testSubjects.existOrFail(
+            'case-view-status-dropdown > case-status-badge-popover-button-in-progress'
+          );
         });
 
-        // validate user action
-        await find.byCssSelector(
-          '[data-test-subj*="status-update-action"] [data-test-subj="status-badge-open"]'
-        );
-        // validates dropdown tag
-        await testSubjects.existOrFail('case-view-status-dropdown > status-badge-open');
-      });
+        it('changes a case status to closed via dropdown-menu', async () => {
+          await cases.common.changeCaseStatusViaDropdownAndVerify(CaseStatuses.closed);
 
-      it("marks in progress a case from the 'mark in progress' button", async () => {
-        await cases.common.changeCaseStatusViaDropdownAndVerify(CaseStatuses.open);
-        await header.waitUntilLoadingHasFinished();
-        await testSubjects.click('case-view-status-action-button');
-        await header.waitUntilLoadingHasFinished();
-
-        await testSubjects.existOrFail('header-page-supplements > status-badge-in-progress', {
-          timeout: 5000,
+          // validate user action
+          await find.byCssSelector(
+            '[data-test-subj*="status-update-action"] [data-test-subj="case-status-badge-closed"]'
+          );
+          // validates dropdown tag
+          await testSubjects.existOrFail(
+            'case-view-status-dropdown > case-status-badge-popover-button-closed'
+          );
         });
 
-        // validate user action
-        await find.byCssSelector(
-          '[data-test-subj*="status-update-action"] [data-test-subj="status-badge-in-progress"]'
-        );
-        // validates dropdown tag
-        await testSubjects.existOrFail('case-view-status-dropdown > status-badge-in-progress');
-      });
+        it("reopens a case from the 'reopen case' button", async () => {
+          await cases.common.changeCaseStatusViaDropdownAndVerify(CaseStatuses.closed);
+          await header.waitUntilLoadingHasFinished();
+          await testSubjects.click('case-view-status-action-button');
+          await header.waitUntilLoadingHasFinished();
 
-      it("closes a case from the 'close case' button", async () => {
-        await cases.common.changeCaseStatusViaDropdownAndVerify(CaseStatuses['in-progress']);
-        await header.waitUntilLoadingHasFinished();
-        await testSubjects.click('case-view-status-action-button');
-        await header.waitUntilLoadingHasFinished();
+          await testSubjects.existOrFail(
+            'header-page-supplements > case-status-badge-popover-button-open',
+            {
+              timeout: 5000,
+            }
+          );
 
-        await testSubjects.existOrFail('header-page-supplements > status-badge-closed', {
-          timeout: 5000,
+          // validate user action
+          await find.byCssSelector(
+            '[data-test-subj*="status-update-action"] [data-test-subj="case-status-badge-open"]'
+          );
+          // validates dropdown tag
+          await testSubjects.existOrFail(
+            'case-view-status-dropdown > case-status-badge-popover-button-open'
+          );
         });
 
-        // validate user action
-        await find.byCssSelector(
-          '[data-test-subj*="status-update-action"] [data-test-subj="status-badge-closed"]'
-        );
-        // validates dropdown tag
-        await testSubjects.existOrFail('case-view-status-dropdown > status-badge-closed');
+        it("marks in progress a case from the 'mark in progress' button", async () => {
+          await cases.common.changeCaseStatusViaDropdownAndVerify(CaseStatuses.open);
+          await header.waitUntilLoadingHasFinished();
+          await testSubjects.click('case-view-status-action-button');
+          await header.waitUntilLoadingHasFinished();
+
+          await testSubjects.existOrFail(
+            'header-page-supplements > case-status-badge-popover-button-in-progress',
+            {
+              timeout: 5000,
+            }
+          );
+
+          // validate user action
+          await find.byCssSelector(
+            '[data-test-subj*="status-update-action"] [data-test-subj="case-status-badge-in-progress"]'
+          );
+          // validates dropdown tag
+          await testSubjects.existOrFail(
+            'case-view-status-dropdown > case-status-badge-popover-button-in-progress'
+          );
+        });
+
+        it("closes a case from the 'close case' button", async () => {
+          await cases.common.changeCaseStatusViaDropdownAndVerify(CaseStatuses['in-progress']);
+          await header.waitUntilLoadingHasFinished();
+          await testSubjects.click('case-view-status-action-button');
+          await header.waitUntilLoadingHasFinished();
+
+          await testSubjects.existOrFail(
+            'header-page-supplements > case-status-badge-popover-button-closed',
+            {
+              timeout: 5000,
+            }
+          );
+
+          // validate user action
+          await find.byCssSelector(
+            '[data-test-subj*="status-update-action"] [data-test-subj="case-status-badge-closed"]'
+          );
+          // validates dropdown tag
+          await testSubjects.existOrFail(
+            'case-view-status-dropdown >case-status-badge-popover-button-closed'
+          );
+        });
       });
     });
 

yarn.lock

@@ -2681,6 +2681,10 @@
   version "0.0.0"
   uid ""
 
+"@kbn/cases-components@link:bazel-bin/packages/kbn-cases-components":
+  version "0.0.0"
+  uid ""
+
 "@kbn/chart-icons@link:bazel-bin/packages/kbn-chart-icons":
   version "0.0.0"
   uid ""
@@ -6825,6 +6829,10 @@
   version "0.0.0"
   uid ""
 
+"@types/kbn__cases-components@link:bazel-bin/packages/kbn-cases-components/npm_module_types":
+  version "0.0.0"
+  uid ""
+
 "@types/kbn__chart-icons@link:bazel-bin/packages/kbn-chart-icons/npm_module_types":
   version "0.0.0"
   uid ""