added badge to show when a selector is not being used by a response

elastic · Apr 17, 2023 · 63bcf7c · 63bcf7c
1 parent f56f55d
commit 63bcf7c
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 10 deletions.
diff --git a/x-pack/plugins/cloud_defend/public/components/control_general_view/index.tsx b/x-pack/plugins/cloud_defend/public/components/control_general_view/index.tsx
@@ -338,13 +338,18 @@ export const ControlGeneralView = ({ policy, onChange, show }: ViewDeps) => {
       </EuiFlexItem>
 
       {selectors.map((selector, i) => {
+        const usedByResponse = !!responses.find((response) =>
+          response.match.includes(selector.name)
+        );
+
         return (
           <EuiFlexItem key={i}>
             <ControlGeneralViewSelector
               key={i}
               index={i}
               selector={selector}
               selectors={selectors}
+              usedByResponse={usedByResponse}
               onDuplicate={onDuplicateSelector}
               onRemove={onRemoveSelector}
               onChange={onSelectorChange}

diff --git a/x-pack/plugins/cloud_defend/public/components/control_general_view/translations.ts b/x-pack/plugins/cloud_defend/public/components/control_general_view/translations.ts
@@ -116,6 +116,14 @@ export const name = i18n.translate('xpack.cloudDefend.name', {
   defaultMessage: 'Name',
 });
 
+export const unusedSelector = i18n.translate('xpack.cloudDefend.unusedSelector', {
+  defaultMessage: 'Not in use',
+});
+
+export const unusedSelectorHelp = i18n.translate('xpack.cloudDefend.unusedSelectorHelp', {
+  defaultMessage: 'This selector is not in use by any response.',
+});
+
 export const errorInvalidResourceLabel = i18n.translate(
   'xpack.cloudDefend.errorInvalidResourceLabel',
   {

diff --git a/x-pack/plugins/cloud_defend/public/components/control_general_view_selector/index.test.tsx b/x-pack/plugins/cloud_defend/public/components/control_general_view_selector/index.test.tsx
@@ -50,6 +50,7 @@ describe('<ControlGeneralViewSelector />', () => {
           onChange={onChange}
           onRemove={onRemove}
           onDuplicate={onDuplicate}
+          usedByResponse={false}
         />
       </TestProvider>
     );
@@ -68,6 +69,12 @@ describe('<ControlGeneralViewSelector />', () => {
     expect(getByTestId('cloud-defend-selectorcondition-operation')).toBeTruthy();
   });
 
+  it('renders a badge to show that the selector is unused', () => {
+    const { getByText } = render(<WrappedComponent />);
+
+    expect(getByText(i18n.unusedSelector)).toBeTruthy();
+  });
+
   it('allows the user to add a limited set of operations', () => {
     const { getByTestId, rerender } = render(<WrappedComponent />);
 

diff --git a/x-pack/plugins/cloud_defend/public/components/control_general_view_selector/index.tsx b/x-pack/plugins/cloud_defend/public/components/control_general_view_selector/index.tsx
@@ -184,6 +184,7 @@ const StringArrayCondition = ({
 export const ControlGeneralViewSelector = ({
   selector,
   selectors,
+  usedByResponse,
   index,
   onRemove,
   onDuplicate,
@@ -393,17 +394,24 @@ export const ControlGeneralViewSelector = ({
       css={styles.accordion}
       extraAction={
         <EuiFlexGroup alignItems="center" gutterSize="none">
-          {accordionState === 'closed' && (
-            <div>
-              <EuiText css={styles.conditionsBadge} size="xs">
-                <b>{i18n.conditions}</b>
-              </EuiText>
-              <EuiBadge title={conditionsAdded.join(',')} color="hollow">
-                {conditionsAdded.length}
+          <div>
+            {accordionState === 'closed' && (
+              <>
+                <EuiText css={styles.conditionsBadge} size="xs">
+                  <b>{i18n.conditions}</b>
+                </EuiText>
+                <EuiBadge title={conditionsAdded.join(',')} color="hollow">
+                  {conditionsAdded.length}
+                </EuiBadge>
+              </>
+            )}
+            {!usedByResponse && (
+              <EuiBadge title={i18n.unusedSelectorHelp} color="warning">
+                {i18n.unusedSelector}
               </EuiBadge>
-              <div css={styles.verticalDivider} />
-            </div>
-          )}
+            )}
+            <div css={styles.verticalDivider} />
+          </div>
           <EuiFlexItem>
             <EuiPopover
               id={selector.name}

diff --git a/x-pack/plugins/cloud_defend/public/types.ts b/x-pack/plugins/cloud_defend/public/types.ts
@@ -224,6 +224,7 @@ export interface ViewDeps extends SettingsDeps {
 export interface ControlGeneralViewSelectorDeps {
   selector: Selector;
   selectors: Selector[];
+  usedByResponse: boolean;
   index: number;
   onChange(selector: Selector, index: number): void;
   onRemove(index: number): void;