Small UI fixes

* use correct icon for "SIEM rule migration" * do not remove "Install translated rules" button and rather disable it when there are no installable rules * do not allow user to update translation status via UI
elastic · Dec 2, 2024 · d17d49d · d17d49d
1 parent 90c856a
commit d17d49d
Show file tree

Hide file tree

Showing 7 changed files with 108 additions and 32 deletions.
diff --git a/x-pack/plugins/security_solution/public/common/icons/siem_migrations.tsx b/x-pack/plugins/security_solution/public/common/icons/siem_migrations.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 type { SVGProps } from 'react';
+import React from 'react';
+export const SiemMigrationsIcon: React.FC<SVGProps<SVGSVGElement>> = ({ ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={16}
+    height={16}
+    fill="none"
+    viewBox="0 0 32 32"
+    {...props}
+  >
+    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_2763_341531)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M10 12C15.4292 12 19.8479 16.3267 19.9962 21.7201L20 22V23H11V32H10C4.47715 32 0 27.5228 0 22C0 16.4772 4.47715 12 10 12ZM9 21L9.00005 14.0619C5.05371 14.554 2 17.9204 2 22C2 25.9928 4.92513 29.3024 8.74934 29.9028L9 29.9381V21ZM11 21L11.0009 14.062L11.258 14.0983C14.7544 14.6506 17.4976 17.4677 17.9381 21H11Z"
+          fill="#343741"
+        />
+        <path d="M26 22C26 13.1634 18.8366 6 10 6V8C17.732 8 24 14.268 24 22H26Z" fill="#007871" />
+        <path
+          d="M32 22C32 9.84974 22.1503 0 10 0V2C21.0457 2 30 10.9543 30 22H32Z"
+          fill="#007871"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_2763_341531">
+          <rect width="32" height="32" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  </svg>
+);
diff --git a/x-pack/plugins/security_solution/public/siem_migrations/links.ts b/x-pack/plugins/security_solution/public/siem_migrations/links.ts
@@ -13,15 +13,15 @@ import {
 } from '../../common/constants';
 import { SIEM_MIGRATIONS_RULES } from '../app/translations';
 import type { LinkItem } from '../common/links/types';
-import { IconConsoleCloud } from '../common/icons/console_cloud';
+import { SiemMigrationsIcon } from '../common/icons/siem_migrations';
 
 export const siemMigrationsLinks: LinkItem = {
   id: SecurityPageName.siemMigrationsRules,
   title: SIEM_MIGRATIONS_RULES,
   description: i18n.translate('xpack.securitySolution.appLinks.siemMigrationsRulesDescription', {
     defaultMessage: 'SIEM Rules Migrations.',
   }),
-  landingIcon: IconConsoleCloud,
+  landingIcon: SiemMigrationsIcon,
   path: SIEM_MIGRATIONS_RULES_PATH,
   capabilities: [`${SERVER_APP_ID}.show`],
   skipUrlState: true,

diff --git a/...ns/security_solution/public/siem_migrations/rules/components/rules_table/bulk_actions.tsx b/...ns/security_solution/public/siem_migrations/rules/components/rules_table/bulk_actions.tsx
@@ -28,9 +28,9 @@ export const BulkActions: React.FC<BulkActionsProps> = React.memo(
     installTranslatedRule,
     installSelectedRule,
   }) => {
-    const showInstallTranslatedRulesButton = numberOfTranslatedRules > 0;
+    const disableInstallTranslatedRulesButton = isTableLoading || !numberOfTranslatedRules;
     const showInstallSelectedRulesButton =
-      showInstallTranslatedRulesButton && numberOfSelectedRules > 0;
+      disableInstallTranslatedRulesButton && numberOfSelectedRules > 0;
     return (
       <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false} wrap={true}>
         {showInstallSelectedRulesButton ? (
@@ -46,21 +46,21 @@ export const BulkActions: React.FC<BulkActionsProps> = React.memo(
             </EuiButton>
           </EuiFlexItem>
         ) : null}
-        {showInstallTranslatedRulesButton ? (
-          <EuiFlexItem grow={false}>
-            <EuiButton
-              fill
-              iconType="plusInCircle"
-              data-test-subj="installTranslatedRulesButton"
-              onClick={installTranslatedRule}
-              disabled={isTableLoading}
-              aria-label={i18n.INSTALL_ALL_ARIA_LABEL}
-            >
-              {i18n.INSTALL_ALL_RULES(numberOfTranslatedRules)}
-              {isTableLoading && <EuiLoadingSpinner size="s" />}
-            </EuiButton>
-          </EuiFlexItem>
-        ) : null}
+        <EuiFlexItem grow={false}>
+          <EuiButton
+            fill
+            iconType="plusInCircle"
+            data-test-subj="installTranslatedRulesButton"
+            onClick={installTranslatedRule}
+            disabled={disableInstallTranslatedRulesButton}
+            aria-label={i18n.INSTALL_TRANSLATED_ARIA_LABEL}
+          >
+            {numberOfTranslatedRules > 0
+              ? i18n.INSTALL_TRANSLATED_RULES(numberOfTranslatedRules)
+              : i18n.INSTALL_TRANSLATED_RULES_EMPTY_STATE}
+            {isTableLoading && <EuiLoadingSpinner size="s" />}
+          </EuiButton>
+        </EuiFlexItem>
       </EuiFlexGroup>
     );
   }

diff --git a/...ins/security_solution/public/siem_migrations/rules/components/rules_table/translations.ts b/...ins/security_solution/public/siem_migrations/rules/components/rules_table/translations.ts
@@ -49,12 +49,22 @@ export const INSTALL_SELECTED_RULES = (numberOfSelectedRules: number) => {
   });
 };
 
-export const INSTALL_ALL_RULES = (numberOfAllRules: number) => {
-  return i18n.translate('xpack.securitySolution.siemMigrations.rules.table.installAllRules', {
-    defaultMessage:
-      'Install translated {numberOfAllRules, plural, one {rule} other {rules}} ({numberOfAllRules})',
-    values: { numberOfAllRules },
-  });
+export const INSTALL_TRANSLATED_RULES_EMPTY_STATE = i18n.translate(
+  'xpack.securitySolution.siemMigrations.rules.table.installTranslatedRulesEmptyState',
+  {
+    defaultMessage: 'Install translated rules',
+  }
+);
+
+export const INSTALL_TRANSLATED_RULES = (numberOfAllRules: number) => {
+  return i18n.translate(
+    'xpack.securitySolution.siemMigrations.rules.table.installTranslatedRules',
+    {
+      defaultMessage:
+        'Install translated {numberOfAllRules, plural, one {rule} other {rules}} ({numberOfAllRules})',
+      values: { numberOfAllRules },
+    }
+  );
 };
 
 export const INSTALL_SELECTED_ARIA_LABEL = i18n.translate(
@@ -64,8 +74,8 @@ export const INSTALL_SELECTED_ARIA_LABEL = i18n.translate(
   }
 );
 
-export const INSTALL_ALL_ARIA_LABEL = i18n.translate(
-  'xpack.securitySolution.siemMigrations.rules.table.installAllButtonAriaLabel',
+export const INSTALL_TRANSLATED_ARIA_LABEL = i18n.translate(
+  'xpack.securitySolution.siemMigrations.rules.table.installTranslatedButtonAriaLabel',
   {
     defaultMessage: 'Install all translated rules',
   }

diff --git a/...lic/siem_migrations/rules/components/translation_details_flyout/translation_tab/index.tsx b/...lic/siem_migrations/rules/components/translation_details_flyout/translation_tab/index.tsx
@@ -24,7 +24,10 @@ import type { RuleMigration } from '../../../../../../common/siem_migrations/mod
 import { TranslationTabHeader } from './header';
 import { RuleQueryComponent } from './rule_query';
 import * as i18n from './translations';
-import { convertTranslationResultIntoText } from '../../../utils/helpers';
+import {
+  convertTranslationResultIntoColor,
+  convertTranslationResultIntoText,
+} from '../../../utils/helpers';
 
 interface TranslationTabProps {
   ruleMigration: RuleMigration;
@@ -66,9 +69,7 @@ export const TranslationTab = ({ ruleMigration }: TranslationTabProps) => {
                 </EuiFlexItem>
                 <EuiFlexItem grow={false}>
                   <EuiBadge
-                    iconSide="right"
-                    iconType="arrowDown"
-                    color="primary"
+                    color={convertTranslationResultIntoColor(ruleMigration.translation_result)}
                     onClick={() => {}}
                     onClickAriaLabel={'Click to update translation status'}
                   >

diff --git a/x-pack/plugins/security_solution/public/siem_migrations/rules/utils/helpers.tsx b/x-pack/plugins/security_solution/public/siem_migrations/rules/utils/helpers.tsx
@@ -11,6 +11,22 @@ import {
 } from '../../../../common/siem_migrations/model/rule_migration.gen';
 import * as i18n from './translations';
 
+export const convertTranslationResultIntoColor = (status?: RuleMigrationTranslationResult) => {
+  switch (status) {
+    case RuleMigrationTranslationResultEnum.full:
+      return 'primary';
+
+    case RuleMigrationTranslationResultEnum.partial:
+      return 'warning';
+
+    case RuleMigrationTranslationResultEnum.untranslatable:
+      return 'danger';
+
+    default:
+      throw new Error(i18n.SIEM_TRANSLATION_RESULT_UNKNOWN_ERROR(status));
+  }
+};
+
 export const convertTranslationResultIntoText = (status?: RuleMigrationTranslationResult) => {
   switch (status) {
     case RuleMigrationTranslationResultEnum.full:
@@ -23,6 +39,6 @@ export const convertTranslationResultIntoText = (status?: RuleMigrationTranslati
       return i18n.SIEM_TRANSLATION_RESULT_UNTRANSLATABLE_LABEL;
 
     default:
-      return i18n.SIEM_TRANSLATION_RESULT_UNKNOWN_LABEL;
+      throw new Error(i18n.SIEM_TRANSLATION_RESULT_UNKNOWN_ERROR(status));
   }
 };
diff --git a/x-pack/plugins/security_solution/public/siem_migrations/rules/utils/translations.ts b/x-pack/plugins/security_solution/public/siem_migrations/rules/utils/translations.ts
@@ -34,3 +34,13 @@ export const SIEM_TRANSLATION_RESULT_UNKNOWN_LABEL = i18n.translate(
     defaultMessage: 'Unknown',
   }
 );
+
+export const SIEM_TRANSLATION_RESULT_UNKNOWN_ERROR = (status?: string) => {
+  return i18n.translate(
+    'xpack.securitySolution.siemMigrations.rules.translationResult.unknownError',
+    {
+      defaultMessage: 'Unknown translation result status: ({status})',
+      values: { status },
+    }
+  );
+};