[Security Solutions][Detection Engine] Updates the edit rules page to only have what is selected for editing

[FrankHassanabad]

Summary

Before when you would edit rules you get all the rules as disabled but you cannot switch between them in edit mode as it's already a rule you created:

After, now we remove those cards and only show the card of the rule type you're editing:

Changes the card's icon placement and text.

Before:

After:

Fixes the Schedule/Actions and weirdness with CSS.
Before:

After:

Checklist

Delete any items that are not applicable to this PR.

• Unit or functional tests were updated or added to match the most common scenarios
• This was checked for keyboard-only and screenreader accessibility
• This renders correctly on smaller devices using a responsive layout. (You can test this in your browser
• This was checked for cross-browser compatibility

For maintainers

• This was checked for breaking API changes and was labeled appropriately

[elasticmachine]

Pinging @elastic/siem (Team:SIEM)

[rylnd]

@FrankHassanabad it looks like these should've been explicitly typed as EuiCardSelectProps:

Suggested change

	const eqlSelectableConfig = useMemo(
	const eqlSelectableConfig: EuiCardSelectProps = useMemo(

While this doesn't behave exactly as I would expect (you can still pass it to the component), you at least get a type error when trying to reference the isVisible field, which does not exist on that type. This is why you're getting those react warnings in your tests (and likely in the browser as well).

[FrankHassanabad]

It's not technically that all the properties are being used within the EuiCard. For example the isVisible is only being used as a boolean to determine if the card should show up or not:

{querySelectableConfig.isVisible && (
          <EuiFlexItem>
            <EuiCard
              data-test-subj="customRuleType"
              title={i18n.QUERY_TYPE_TITLE}
              titleSize="xs"
              description={i18n.QUERY_TYPE_DESCRIPTION}
              icon={<EuiIcon size="xl" type="search" />}
              selectable={querySelectableConfig}
              layout="horizontal"
              textAlign="left"
            />
          </EuiFlexItem>
        )}

The errors I am getting look to be from within isVisible being set by something else under the covers within Eui and not this isVisible I use here (unless I'm missing something ... which I could be :-)).

[FrankHassanabad]

NOTE: I did not change a bunch of code here.

Instead I just changed:

<WrapperPage restrictWidth>
       ....

to be:

<WrapperPage>
        <EuiFlexGroup direction="row" justifyContent="spaceAround">
          <MaxWidthEuiFlexItem>
                ....

[FrankHassanabad]

NOTE: I did not change a bunch of code here.

Instead I just changed:

<WrapperPage restrictWidth>
       ....

to be:

<WrapperPage>
        <EuiFlexGroup direction="row" justifyContent="spaceAround">
          <MaxWidthEuiFlexItem>
                ....

[FrankHassanabad]

NOTE: Using this instead of the previous way as the previous way no longer works whenever the top level:

<Main ...

React component over the last few days has morphed into going from "display: block" to being "display: flex" and it is using a column based layout rather than previous row based. So now, we utilize this nifty MaxWidthEuiFlexItem here with EuiFlex in order to control our inner component and flip it back to being a row based element. This also removes all the other hand spun CSS that was centering things for the simpler Eui space around and text justifications. So much much better so far 👍

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: 2489b4e

Metrics [docs]

async chunks size

id	before	after	diff
securitySolution	10.4MB	10.4MB	-2.5KB

History

• 💔 Build #79369 failed f370f23
• 💚 Build #78999 succeeded c23af14

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

[elasticmachine]

Pinging @elastic/security-solution (Team: SecuritySolution)