[EDR Workflows] An empty note section in read mode (#168338)

#168318 Don't render Note section in View mode (no write permissions) if no note to show. ![Screenshot 2023-10-09 at 12 58 59](https://github.com/elastic/kibana/assets/29123534/fc8fbf87-4b45-4051-b4e1-30af8d842a0f) ![Screenshot 2023-10-09 at 12 59 42](https://github.com/elastic/kibana/assets/29123534/8d08480e-4c1d-408a-9642-3bb4eb9128ac)
elastic · Oct 11, 2023 · bf1357c · bf1357c
1 parent e8a9968
commit bf1357c
Show file tree

Hide file tree

Showing 2 changed files with 133 additions and 73 deletions.
diff --git a/x-pack/plugins/security_solution/public/management/cypress/e2e/policy/policy_details.cy.ts b/x-pack/plugins/security_solution/public/management/cypress/e2e/policy/policy_details.cy.ts
@@ -197,47 +197,99 @@ describe(
       });
 
       describe('Renders read only protection updates for user without write permissions', () => {
-        let indexedPolicy: IndexedFleetEndpointPolicyResponse;
-        let policy: PolicyData;
-        const oneWeekAgo = moment.utc().subtract(1, 'weeks');
-
-        beforeEach(() => {
-          login(ROLE.endpoint_security_policy_management_read);
-          disableExpandableFlyoutAdvancedSettings();
-          getEndpointIntegrationVersion().then((version) => {
-            createAgentPolicyTask(version).then((data) => {
-              indexedPolicy = data;
-              policy = indexedPolicy.integrationPolicies[0];
-              setCustomProtectionUpdatesManifestVersion(policy.id, oneWeekAgo.format('YYYY-MM-DD'));
-              setCustomProtectionUpdatesNote(policy.id, testNote);
+        describe('With note field', () => {
+          let indexedPolicy: IndexedFleetEndpointPolicyResponse;
+          let policy: PolicyData;
+          const oneWeekAgo = moment.utc().subtract(1, 'weeks');
+
+          beforeEach(() => {
+            login(ROLE.endpoint_security_policy_management_read);
+            disableExpandableFlyoutAdvancedSettings();
+            getEndpointIntegrationVersion().then((version) => {
+              createAgentPolicyTask(version).then((data) => {
+                indexedPolicy = data;
+                policy = indexedPolicy.integrationPolicies[0];
+                setCustomProtectionUpdatesManifestVersion(
+                  policy.id,
+                  oneWeekAgo.format('YYYY-MM-DD')
+                );
+                setCustomProtectionUpdatesNote(policy.id, testNote);
+              });
             });
           });
-        });
 
-        afterEach(() => {
-          if (indexedPolicy) {
-            cy.task('deleteIndexedFleetEndpointPolicies', indexedPolicy);
-          }
+          afterEach(() => {
+            if (indexedPolicy) {
+              cy.task('deleteIndexedFleetEndpointPolicies', indexedPolicy);
+            }
+          });
+
+          it('should render the protection updates tab content', () => {
+            loadProtectionUpdatesUrl(policy.id);
+            cy.getByTestSubj('protection-updates-manifest-switch').should('not.exist');
+            cy.getByTestSubj('protection-updates-state-view-mode');
+            cy.getByTestSubj('protection-updates-manifest-name-title');
+
+            cy.getByTestSubj('protection-updates-manifest-name-deployed-version-title');
+            cy.getByTestSubj('protection-updates-deployed-version').contains(
+              oneWeekAgo.format('MMMM DD, YYYY')
+            );
+            cy.getByTestSubj('protection-updates-manifest-name-version-to-deploy-title');
+            cy.getByTestSubj('protection-updates-version-to-deploy-view-mode');
+            cy.getByTestSubj('protection-updates-version-to-deploy-picker').should('not.exist');
+
+            cy.getByTestSubj('protection-updates-manifest-name-note-title');
+            cy.getByTestSubj('protection-updates-manifest-note').should('not.exist');
+            cy.getByTestSubj('protection-updates-manifest-note-view-mode').contains(testNote);
+            cy.getByTestSubj('protectionUpdatesSaveButton').should('be.disabled');
+          });
         });
 
-        it('should render the protection updates tab content', () => {
-          loadProtectionUpdatesUrl(policy.id);
-          cy.getByTestSubj('protection-updates-manifest-switch').should('not.exist');
-          cy.getByTestSubj('protection-updates-state-view-mode');
-          cy.getByTestSubj('protection-updates-manifest-name-title');
+        describe('Without note field', () => {
+          let indexedPolicy: IndexedFleetEndpointPolicyResponse;
+          let policy: PolicyData;
+          const oneWeekAgo = moment.utc().subtract(1, 'weeks');
+
+          beforeEach(() => {
+            login(ROLE.endpoint_security_policy_management_read);
+            disableExpandableFlyoutAdvancedSettings();
+            getEndpointIntegrationVersion().then((version) => {
+              createAgentPolicyTask(version).then((data) => {
+                indexedPolicy = data;
+                policy = indexedPolicy.integrationPolicies[0];
+                setCustomProtectionUpdatesManifestVersion(
+                  policy.id,
+                  oneWeekAgo.format('YYYY-MM-DD')
+                );
+              });
+            });
+          });
 
-          cy.getByTestSubj('protection-updates-manifest-name-deployed-version-title');
-          cy.getByTestSubj('protection-updates-deployed-version').contains(
-            oneWeekAgo.format('MMMM DD, YYYY')
-          );
-          cy.getByTestSubj('protection-updates-manifest-name-version-to-deploy-title');
-          cy.getByTestSubj('protection-updates-version-to-deploy-view-mode');
-          cy.getByTestSubj('protection-updates-version-to-deploy-picker').should('not.exist');
+          afterEach(() => {
+            if (indexedPolicy) {
+              cy.task('deleteIndexedFleetEndpointPolicies', indexedPolicy);
+            }
+          });
 
-          cy.getByTestSubj('protection-updates-manifest-name-note-title');
-          cy.getByTestSubj('protection-updates-manifest-note').should('not.exist');
-          cy.getByTestSubj('protection-updates-manifest-note-view-mode').contains(testNote);
-          cy.getByTestSubj('protectionUpdatesSaveButton').should('be.disabled');
+          it('should render the protection updates tab content', () => {
+            loadProtectionUpdatesUrl(policy.id);
+            cy.getByTestSubj('protection-updates-manifest-switch').should('not.exist');
+            cy.getByTestSubj('protection-updates-state-view-mode');
+            cy.getByTestSubj('protection-updates-manifest-name-title');
+
+            cy.getByTestSubj('protection-updates-manifest-name-deployed-version-title');
+            cy.getByTestSubj('protection-updates-deployed-version').contains(
+              oneWeekAgo.format('MMMM DD, YYYY')
+            );
+            cy.getByTestSubj('protection-updates-manifest-name-version-to-deploy-title');
+            cy.getByTestSubj('protection-updates-version-to-deploy-view-mode');
+            cy.getByTestSubj('protection-updates-version-to-deploy-picker').should('not.exist');
+
+            cy.getByTestSubj('protection-updates-manifest-name-note-title').should('not.exist');
+            cy.getByTestSubj('protection-updates-manifest-note').should('not.exist');
+            cy.getByTestSubj('protection-updates-manifest-note-view-mode').should('not.exist');
+            cy.getByTestSubj('protectionUpdatesSaveButton').should('be.disabled');
+          });
         });
       });
     });

diff --git a/...tion/public/management/pages/policy/view/protection_updates/protection_updates_layout.tsx b/...tion/public/management/pages/policy/view/protection_updates/protection_updates_layout.tsx
@@ -330,46 +330,54 @@ export const ProtectionUpdatesLayout = React.memo<ProtectionUpdatesLayoutProps>(
 
           <EuiSpacer size="l" />
           {renderVersionToDeployPicker()}
-
-          <EuiSpacer size="m" />
-          <EuiFlexGroup direction="row" gutterSize="none" alignItems="center">
-            <EuiTitle size="xxs" data-test-subj={'protection-updates-manifest-name-note-title'}>
-              <h5>
-                {i18n.translate('xpack.securitySolution.endpoint.protectionUpdates.note.label', {
-                  defaultMessage: 'Note',
-                })}
-              </h5>
-            </EuiTitle>
-            <EuiIconTip
-              position="right"
-              content={
-                <>
-                  <FormattedMessage
-                    id="xpack.securitySolution.endpoint.protectionUpdates.note.tooltip"
-                    defaultMessage="You can add an optional note to explain the reason for selecting a particular policy version."
-                  />
-                </>
-              }
-            />
-          </EuiFlexGroup>
-          <EuiSpacer size="m" />
-          {canWritePolicyManagement ? (
-            <EuiTextArea
-              value={note}
-              disabled={getNoteInProgress || createNoteInProgress}
-              onChange={(e) => setNote(e.target.value)}
-              fullWidth
-              rows={3}
-              placeholder={i18n.translate(
-                'xpack.securitySolution.endpoint.protectionUpdates.note.placeholder',
-                {
-                  defaultMessage: 'Add relevant information about update here',
-                }
+          {(canWritePolicyManagement || note) && (
+            <>
+              <EuiSpacer size="m" />
+              <EuiFlexGroup direction="row" gutterSize="none" alignItems="center">
+                <EuiTitle size="xxs" data-test-subj={'protection-updates-manifest-name-note-title'}>
+                  <h5>
+                    {i18n.translate(
+                      'xpack.securitySolution.endpoint.protectionUpdates.note.label',
+                      {
+                        defaultMessage: 'Note',
+                      }
+                    )}
+                  </h5>
+                </EuiTitle>
+                <EuiIconTip
+                  position="right"
+                  content={
+                    <>
+                      <FormattedMessage
+                        id="xpack.securitySolution.endpoint.protectionUpdates.note.tooltip"
+                        defaultMessage="You can add an optional note to explain the reason for selecting a particular policy version."
+                      />
+                    </>
+                  }
+                />
+              </EuiFlexGroup>
+              <EuiSpacer size="m" />
+              {canWritePolicyManagement ? (
+                <EuiTextArea
+                  value={note}
+                  disabled={getNoteInProgress || createNoteInProgress}
+                  onChange={(e) => setNote(e.target.value)}
+                  fullWidth
+                  rows={3}
+                  placeholder={i18n.translate(
+                    'xpack.securitySolution.endpoint.protectionUpdates.note.placeholder',
+                    {
+                      defaultMessage: 'Add relevant information about update here',
+                    }
+                  )}
+                  data-test-subj={'protection-updates-manifest-note'}
+                />
+              ) : (
+                <EuiText data-test-subj={'protection-updates-manifest-note-view-mode'}>
+                  {note}
+                </EuiText>
               )}
-              data-test-subj={'protection-updates-manifest-note'}
-            />
-          ) : (
-            <EuiText data-test-subj={'protection-updates-manifest-note-view-mode'}>{note}</EuiText>
+            </>
           )}
         </>
       );