Skip to content

Commit

Permalink
Refactor and fix enablement model
Browse files Browse the repository at this point in the history
  • Loading branch information
@machadoum
machadoum committed Feb 27, 2025
1 parent c4b91f5 commit fa9ded6
Show file tree
Hide file tree
Showing 2 changed files with 67 additions and 56 deletions.
12 changes: 3 additions & 9 deletions ...public/entity_analytics/components/entity_store/components/dashboard_enablement_panel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,7 @@ export const EnablementPanel: React.FC<EnableEntityStorePanelProps> = ({ state }

if (
riskEngineStatus !== RiskEngineStatusEnum.NOT_INSTALLED &&
(entityStoreStatus === 'running' || entityStoreStatus === 'stopped')
entityStoreStatus !== 'not_installed'
) {
return null;
}
Expand Down Expand Up @@ -224,14 +224,8 @@ export const EnablementPanel: React.FC<EnableEntityStorePanelProps> = ({ state }
visible={modal.visible}
toggle={(visible) => setModalState({ visible })}
enableStore={enableEntityStore}
riskScore={{
canToggle: riskEngineStatus === RiskEngineStatusEnum.NOT_INSTALLED,
checked: riskEngineStatus === RiskEngineStatusEnum.NOT_INSTALLED,
}}
entityStore={{
canToggle: entityStoreStatus !== 'running',
checked: entityStoreStatus === 'not_installed',
}}
riskEngineStatus={riskEngineStatus}
entityStoreStatus={entityStoreStatus}
/>
</>
);
Expand Down
111 changes: 64 additions & 47 deletions ..._solution/public/entity_analytics/components/entity_store/components/enablement_modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,18 +22,20 @@ import {
useEuiTheme,
} from '@elastic/eui';
import { css } from '@emotion/react';
import React, { useState } from 'react';
import React, { useEffect, useState } from 'react';
import { FormattedMessage } from '@kbn/i18n-react';
import type { RiskEngineStatus, StoreStatus } from '../../../../../common/api/entity_analytics';
import { RiskEngineStatusEnum } from '../../../../../common/api/entity_analytics';
import { useContractComponents } from '../../../../common/hooks/use_contract_component';
import {
ENABLEMENT_DESCRIPTION_RISK_ENGINE_ONLY,
ENABLEMENT_DESCRIPTION_ENTITY_STORE_ONLY,
ENABLEMENT_WARNING_SELECT_TO_PROCEED,
} from '../translations';
import { useEntityEnginePrivileges } from '../hooks/use_entity_engine_privileges';
import { MissingPrivilegesCallout } from './missing_privileges_callout';
import { useMissingRiskEnginePrivileges } from '../../../hooks/use_missing_risk_engine_privileges';
import { RiskEnginePrivilegesCallOut } from '../../risk_engine_privileges_callout';
import { useEntityEnginePrivileges } from '../hooks/use_entity_engine_privileges';

export interface Enablements {
riskScore: boolean;
Expand All @@ -44,51 +46,70 @@ interface EntityStoreEnablementModalProps {
visible: boolean;
toggle: (visible: boolean) => void;
enableStore: (enablements: Enablements) => () => void;
riskScore: {
canToggle?: boolean;
checked?: boolean;
};
entityStore: {
canToggle?: boolean;
checked?: boolean;
};
riskEngineStatus?: RiskEngineStatus;
entityStoreStatus?: StoreStatus;
}

const shouldAllowEnablement = (
riskScoreEnabled: boolean,
entityStoreEnabled: boolean,
const isInstallButtonEnabled = (
canInstallRiskScore: boolean,
canInstallEntityStore: boolean,
userHasEnabled: Enablements
) => {
if (riskScoreEnabled) {
return userHasEnabled.entityStore;
}
if (entityStoreEnabled) {
return userHasEnabled.riskScore;
if (canInstallRiskScore || canInstallEntityStore) {
return userHasEnabled.riskScore || userHasEnabled.entityStore;
}
return userHasEnabled.riskScore || userHasEnabled.entityStore;

return false;
};

export const EntityStoreEnablementModal: React.FC<EntityStoreEnablementModalProps> = ({
visible,
toggle,
enableStore,
riskScore,
entityStore,
riskEngineStatus,
entityStoreStatus,
}) => {
const { euiTheme } = useEuiTheme();
const [enablements, setEnablements] = useState({
riskScore: !!riskScore.checked,
entityStore: !!entityStore.checked,
});
const riskEnginePrivileges = useMissingRiskEnginePrivileges();
const { data: entityEnginePrivileges, isLoading: isLoadingEntityEnginePrivileges } =
useEntityEnginePrivileges();
const riskEnginePrivileges = useMissingRiskEnginePrivileges();

const enablementOptions = shouldAllowEnablement(
!riskScore.canToggle,
!entityStore.canToggle,
enablements
const hasRiskScorePrivileges = !(
riskEnginePrivileges.isLoading || !riskEnginePrivileges?.hasAllRequiredPrivileges
);

const canInstallRiskScore =
hasRiskScorePrivileges && riskEngineStatus === RiskEngineStatusEnum.NOT_INSTALLED;

const hasEntityStorePrivileges = !(
isLoadingEntityEnginePrivileges || !entityEnginePrivileges?.has_all_required
);

const canInstallEntityStore = hasEntityStorePrivileges && entityStoreStatus === 'not_installed';

const { euiTheme } = useEuiTheme();
const [toggleState, setToggleState] = useState({
riskScore: false,
entityStore: false,
});

/**
* Update the toggle state when the install status changes because privileges are async.
* We automatically toggle the switch when the user can enable the engine.
*
*/
useEffect(() => {
setToggleState({
riskScore: canInstallRiskScore,
entityStore: canInstallEntityStore,
});
}, [canInstallRiskScore, canInstallEntityStore]);

const isInstallButtonDisabled = !isInstallButtonEnabled(
canInstallRiskScore,
canInstallEntityStore,
toggleState
);

const { AdditionalChargesMessage } = useContractComponents();

if (!visible) {
Expand Down Expand Up @@ -127,12 +148,9 @@ export const EntityStoreEnablementModal: React.FC<EntityStoreEnablementModalProp
defaultMessage="Risk Score"
/>
}
checked={enablements.riskScore}
disabled={
!riskScore.canToggle ||
(!riskEnginePrivileges.isLoading && !riskEnginePrivileges?.hasAllRequiredPrivileges)
}
onChange={() => setEnablements((prev) => ({ ...prev, riskScore: !prev.riskScore }))}
checked={toggleState.riskScore}
disabled={!canInstallRiskScore}
onChange={() => setToggleState((prev) => ({ ...prev, riskScore: !prev.riskScore }))}
data-test-subj="enablementRiskScoreSwitch"
/>
</EuiFlexItem>
Expand All @@ -154,13 +172,10 @@ export const EntityStoreEnablementModal: React.FC<EntityStoreEnablementModalProp
defaultMessage="Entity Store"
/>
}
checked={enablements.entityStore}
disabled={
!entityStore.canToggle ||
(!isLoadingEntityEnginePrivileges && !entityEnginePrivileges?.has_all_required)
}
checked={toggleState.entityStore}
disabled={!canInstallEntityStore}
onChange={() =>
setEnablements((prev) => ({ ...prev, entityStore: !prev.entityStore }))
setToggleState((prev) => ({ ...prev, entityStore: !prev.entityStore }))
}
data-test-subj="enablementEntityStoreSwitch"
/>
Expand All @@ -179,15 +194,17 @@ export const EntityStoreEnablementModal: React.FC<EntityStoreEnablementModalProp

<EuiModalFooter>
<EuiFlexGroup justifyContent="flexEnd" alignItems="center">
{!enablementOptions ? <EuiFlexItem>{proceedWarning}</EuiFlexItem> : null}
{isInstallButtonDisabled && (canInstallRiskScore || canInstallEntityStore) ? (
<EuiFlexItem>{proceedWarning}</EuiFlexItem>
) : null}
<EuiFlexItem grow={false}>
<EuiFlexGroup direction="row" justifyContent="flexEnd">
<EuiButtonEmpty onClick={() => toggle(false)}>{'Cancel'}</EuiButtonEmpty>
<EuiButton
onClick={enableStore(enablements)}
onClick={enableStore(toggleState)}
fill
isDisabled={!enablementOptions}
aria-disabled={!enablementOptions}
isDisabled={isInstallButtonDisabled}
aria-disabled={isInstallButtonDisabled}
data-test-subj="entityStoreEnablementModalButton"
>
<FormattedMessage
Expand Down

0 comments on commit fa9ded6

Please sign in to comment.