Skip to content

Commit

Permalink
Review feedback
Browse files Browse the repository at this point in the history
  • Loading branch information
@e40pud
e40pud committed Jan 25, 2025
1 parent 24a4b76 commit 37d5846
Show file tree
Hide file tree
Showing 2 changed files with 101 additions and 84 deletions.
106 changes: 22 additions & 84 deletions ...curity_solution/public/siem_migrations/rules/components/tours/translation_guide/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,83 +6,25 @@
*/

import React, { useCallback, useEffect, useMemo, useState } from 'react';
import type { PopoverAnchorPosition } from '@elastic/eui';
import { EuiButtonEmpty, EuiTourStep } from '@elastic/eui';
import { noop } from 'lodash';
import { FormattedMessage } from '@kbn/i18n-react';
import { DocLink } from '../../../../../common/components/links_to_docs/doc_link';
import { useIsElementMounted } from '../../../../../detection_engine/rule_management_ui/components/rules_table/rules_table/guided_onboarding/use_is_element_mounted';
import {
NEW_FEATURES_TOUR_STORAGE_KEYS,
SecurityPageName,
} from '../../../../../../common/constants';
import { NEW_FEATURES_TOUR_STORAGE_KEYS } from '../../../../../../common/constants';
import { useKibana } from '../../../../../common/lib/kibana';
import { SIEM_MIGRATIONS_STATUS_HEADER_ID } from '../../rules_table_columns';
import { SIEM_MIGRATIONS_SELECT_MIGRATION_BUTTON_ID } from '../../header_buttons';
import { TourSteps, tourConfig, tourSteps } from './step_config';
import * as i18n from './translations';

export const SECURITY_GET_STARTED_BUTTON_ANCHOR = `solutionSideNavCustomIconItem-${SecurityPageName.landing}`;

const tourConfig = {
currentTourStep: 1,
isTourActive: true,
tourPopoverWidth: 360,
};

const tourSteps: Array<{
step: number;
title: string;
content: React.ReactNode;
anchorPosition: PopoverAnchorPosition;
}> = [
{
step: 1,
title: i18n.MIGRATION_RULES_SELECTOR_TOUR_STEP_TITLE,
content: i18n.MIGRATION_RULES_SELECTOR_TOUR_STEP_CONTENT,
anchorPosition: 'downCenter',
},
{
step: 2,
title: i18n.TRANSLATION_STATUS_TOUR_STEP_TITLE,
content: (
<FormattedMessage
id="xpack.securitySolution.siemMigrations.rules.tour.statusStepContent"
defaultMessage="{installed} rules have a check mark. Click {view} to access rule details. {translated} rules are ready to {install}, or for your to {edit}. Rules with errors can be {reprocessed}. Learn more about our AI Translations here.
{lineBreak}{lineBreak}
Learn more about our {link}"
values={{
lineBreak: <br />,
install: <b>{i18n.INSTALL_LABEL}</b>,
installed: <b>{i18n.INSTALLED_LABEL}</b>,
view: <b>{i18n.VIEW_LABEL}</b>,
edit: <b>{i18n.EDIT_LABEL}</b>,
translated: <b>{i18n.TRANSLATED_LABEL}</b>,
reprocessed: <b>{i18n.REPROCESSED_LABEL}</b>,
// TODO: Update doc path once available
link: <DocLink docPath="index.html" linkText={i18n.SIEM_MIGRATIONS_LINK_LABEL} />,
}}
/>
),
anchorPosition: 'rightCenter',
},
{
step: 3,
title: i18n.MIGRATION_GUIDE_TOUR_STEP_TITLE,
content: i18n.MIGRATION_GUIDE_TOUR_STEP_CONTENT,
anchorPosition: 'rightCenter',
},
];

export const SiemTranslatedRulesTour: React.FC = React.memo(() => {
const { siemMigrations, storage } = useKibana().services;

const isSelectMigrationAnchorMounted = useIsElementMounted(
SIEM_MIGRATIONS_SELECT_MIGRATION_BUTTON_ID
);
const isStatusHeaderAnchorMounted = useIsElementMounted(SIEM_MIGRATIONS_STATUS_HEADER_ID);
const isGetStartedNavigationAnchorMounted = useIsElementMounted(
SECURITY_GET_STARTED_BUTTON_ANCHOR
);
const stepsCount = Object.keys(tourSteps).length;
const selectMigrationStepData = tourSteps[TourSteps.MIGRATION_SELECTION];
const statusHeaderStepData = tourSteps[TourSteps.MIGRATION_RULE_STATUS];
const getStartedStepData = tourSteps[TourSteps.MIGRATION_ONBOARDING_HUB];

const isSelectMigrationAnchorMounted = useIsElementMounted(selectMigrationStepData.anchorId);
const isStatusHeaderAnchorMounted = useIsElementMounted(statusHeaderStepData.anchorId);
const isGetStartedNavigationAnchorMounted = useIsElementMounted(getStartedStepData.anchorId);

const [tourState, setTourState] = useState(() => {
const restoredTourState = storage.get(
Expand Down Expand Up @@ -116,21 +58,17 @@ export const SiemTranslatedRulesTour: React.FC = React.memo(() => {
return siemMigrations.rules.isAvailable() && tourState.isTourActive;
}, [siemMigrations.rules, tourState]);

const selectMigrationStepData = tourSteps[0];
const statusHeaderStepData = tourSteps[1];
const getStartedStepData = tourSteps[2];

return (
<>
{isSelectMigrationAnchorMounted && (
<EuiTourStep
title={selectMigrationStepData.title}
content={selectMigrationStepData.content}
onFinish={noop}
step={1}
stepsTotal={tourSteps.length}
isStepOpen={isTourActive && tourState.currentTourStep === 1}
anchor={`#${SIEM_MIGRATIONS_SELECT_MIGRATION_BUTTON_ID}`}
step={selectMigrationStepData.step}
stepsTotal={stepsCount}
isStepOpen={isTourActive && tourState.currentTourStep === selectMigrationStepData.step}
anchor={`#${selectMigrationStepData.anchorId}`}
anchorPosition={selectMigrationStepData.anchorPosition}
maxWidth={tourState.tourPopoverWidth}
footerAction={
Expand All @@ -145,10 +83,10 @@ export const SiemTranslatedRulesTour: React.FC = React.memo(() => {
title={statusHeaderStepData.title}
content={statusHeaderStepData.content}
onFinish={noop}
step={2}
stepsTotal={tourSteps.length}
isStepOpen={isTourActive && tourState.currentTourStep === 2}
anchor={`#${SIEM_MIGRATIONS_STATUS_HEADER_ID}`}
step={statusHeaderStepData.step}
stepsTotal={stepsCount}
isStepOpen={isTourActive && tourState.currentTourStep === statusHeaderStepData.step}
anchor={`#${statusHeaderStepData.anchorId}`}
anchorPosition={statusHeaderStepData.anchorPosition}
maxWidth={tourState.tourPopoverWidth}
footerAction={
Expand All @@ -163,10 +101,10 @@ export const SiemTranslatedRulesTour: React.FC = React.memo(() => {
title={getStartedStepData.title}
content={getStartedStepData.content}
onFinish={noop}
step={3}
stepsTotal={tourSteps.length}
isStepOpen={isTourActive && tourState.currentTourStep === 3}
anchor={`#${SECURITY_GET_STARTED_BUTTON_ANCHOR}`}
step={getStartedStepData.step}
stepsTotal={stepsCount}
isStepOpen={isTourActive && tourState.currentTourStep === getStartedStepData.step}
anchor={`#${getStartedStepData.anchorId}`}
anchorPosition={getStartedStepData.anchorPosition}
maxWidth={tourState.tourPopoverWidth}
footerAction={
Expand Down
79 changes: 79 additions & 0 deletions ..._solution/public/siem_migrations/rules/components/tours/translation_guide/step_config.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
/*
* 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 { FormattedMessage } from '@kbn/i18n-react';
import type { PopoverAnchorPosition } from '@elastic/eui';
import { DocLink } from '../../../../../common/components/links_to_docs/doc_link';
import { SecurityPageName } from '../../../../../../common/constants';
import { SIEM_MIGRATIONS_SELECT_MIGRATION_BUTTON_ID } from '../../header_buttons';
import { SIEM_MIGRATIONS_STATUS_HEADER_ID } from '../../rules_table_columns';
import * as i18n from './translations';

export const SECURITY_GET_STARTED_BUTTON_ANCHOR = `solutionSideNavCustomIconItem-${SecurityPageName.landing}`;

export enum TourSteps {
MIGRATION_SELECTION,
MIGRATION_RULE_STATUS,
MIGRATION_ONBOARDING_HUB,
}

export const tourSteps: {
[key in TourSteps]: {
step: number;
title: string;
content: React.ReactNode;
anchorId: string;
anchorPosition: PopoverAnchorPosition;
};
} = {
[TourSteps.MIGRATION_SELECTION]: {
step: 1,
title: i18n.MIGRATION_RULES_SELECTOR_TOUR_STEP_TITLE,
content: i18n.MIGRATION_RULES_SELECTOR_TOUR_STEP_CONTENT,
anchorId: SIEM_MIGRATIONS_SELECT_MIGRATION_BUTTON_ID,
anchorPosition: 'downCenter',
},
[TourSteps.MIGRATION_RULE_STATUS]: {
step: 2,
title: i18n.TRANSLATION_STATUS_TOUR_STEP_TITLE,
content: (
<FormattedMessage
id="xpack.securitySolution.siemMigrations.rules.tour.statusStepContent"
defaultMessage="{installed} rules have a check mark. Click {view} to access rule details. {translated} rules are ready to {install}, or for your to {edit}. Rules with errors can be {reprocessed}. Learn more about our AI Translations here.
{lineBreak}{lineBreak}
Learn more about our {link}"
values={{
lineBreak: <br />,
install: <b>{i18n.INSTALL_LABEL}</b>,
installed: <b>{i18n.INSTALLED_LABEL}</b>,
view: <b>{i18n.VIEW_LABEL}</b>,
edit: <b>{i18n.EDIT_LABEL}</b>,
translated: <b>{i18n.TRANSLATED_LABEL}</b>,
reprocessed: <b>{i18n.REPROCESSED_LABEL}</b>,
// TODO: Update doc path once available
link: <DocLink docPath="index.html" linkText={i18n.SIEM_MIGRATIONS_LINK_LABEL} />,
}}
/>
),
anchorId: SIEM_MIGRATIONS_STATUS_HEADER_ID,
anchorPosition: 'rightCenter',
},
[TourSteps.MIGRATION_ONBOARDING_HUB]: {
step: 3,
title: i18n.MIGRATION_GUIDE_TOUR_STEP_TITLE,
content: i18n.MIGRATION_GUIDE_TOUR_STEP_CONTENT,
anchorId: SECURITY_GET_STARTED_BUTTON_ANCHOR,
anchorPosition: 'rightCenter',
},
};

export const tourConfig = {
currentTourStep: tourSteps[TourSteps.MIGRATION_SELECTION].step,
isTourActive: true,
tourPopoverWidth: 360,
};

0 comments on commit 37d5846

Please sign in to comment.