Removing the title edit icon for read only (#103540)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/cases/public/components/case_view/index.tsx

@@ -381,7 +381,7 @@ export const CaseComponent = React.memo<CaseComponentProps>(
             data-test-subj="case-view-title"
             titleNode={
               <EditableTitle
-                disabled={!userCanCrud}
+                userCanCrud={userCanCrud}
                 isLoading={isLoading && updateKey === 'title'}
                 title={caseData.title}
                 onSubmit={onSubmitTitle}

x-pack/plugins/cases/public/components/header_page/__snapshots__/editable_title.test.tsx.snap

@@ -19,7 +19,6 @@ exports[`EditableTitle it renders 1`] = `
       aria-label="You can edit Test title by clicking"
       data-test-subj="editable-title-edit-icon"
       iconType="pencil"
-      isDisabled={false}
       onClick={[Function]}
     />
   </EuiFlexItem>

x-pack/plugins/cases/public/components/header_page/editable_title.test.tsx

@@ -10,25 +10,43 @@ import React from 'react';
 
 import '../../common/mock/match_media';
 import { TestProviders } from '../../common/mock';
-import { EditableTitle } from './editable_title';
+import { EditableTitle, EditableTitleProps } from './editable_title';
 import { useMountAppended } from '../../utils/use_mount_appended';
 
 describe('EditableTitle', () => {
   const mount = useMountAppended();
   const submitTitle = jest.fn();
+  const defaultProps: EditableTitleProps = {
+    title: 'Test title',
+    onSubmit: submitTitle,
+    isLoading: false,
+    userCanCrud: true,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
 
   test('it renders', () => {
-    const wrapper = shallow(
+    const wrapper = shallow(<EditableTitle {...defaultProps} />);
-      <EditableTitle title="Test title" onSubmit={submitTitle} isLoading={false} />
-    );
 
     expect(wrapper).toMatchSnapshot();
   });
 
+  test('it does not show the edit icon when the user does not have edit permissions', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <EditableTitle {...{ ...defaultProps, userCanCrud: false }} />
+      </TestProviders>
+    );
+
+    expect(wrapper.find('[data-test-subj="editable-title-edit-icon"]').exists()).toBeFalsy();
+  });
+
   test('it shows the edit title input field', () => {
     const wrapper = mount(
       <TestProviders>
-        <EditableTitle title="Test title" onSubmit={submitTitle} isLoading={false} />
+        <EditableTitle {...defaultProps} />
       </TestProviders>
     );
 
@@ -43,7 +61,7 @@ describe('EditableTitle', () => {
   test('it shows the submit button', () => {
     const wrapper = mount(
       <TestProviders>
-        <EditableTitle title="Test title" onSubmit={submitTitle} isLoading={false} />
+        <EditableTitle {...defaultProps} />
       </TestProviders>
     );
 
@@ -58,7 +76,7 @@ describe('EditableTitle', () => {
   test('it shows the cancel button', () => {
     const wrapper = mount(
       <TestProviders>
-        <EditableTitle title="Test title" onSubmit={submitTitle} isLoading={false} />
+        <EditableTitle {...defaultProps} />
       </TestProviders>
     );
 
@@ -73,7 +91,7 @@ describe('EditableTitle', () => {
   test('it DOES NOT shows the edit icon when in edit mode', () => {
     const wrapper = mount(
       <TestProviders>
-        <EditableTitle title="Test title" onSubmit={submitTitle} isLoading={false} />
+        <EditableTitle {...defaultProps} />
       </TestProviders>
     );
 
@@ -88,7 +106,7 @@ describe('EditableTitle', () => {
   test('it switch to non edit mode when canceled', () => {
     const wrapper = mount(
       <TestProviders>
-        <EditableTitle title="Test title" onSubmit={submitTitle} isLoading={false} />
+        <EditableTitle {...defaultProps} />
       </TestProviders>
     );
 
@@ -104,7 +122,7 @@ describe('EditableTitle', () => {
 
     const wrapper = mount(
       <TestProviders>
-        <EditableTitle title="Test title" onSubmit={submitTitle} isLoading={false} />
+        <EditableTitle {...defaultProps} />
       </TestProviders>
     );
 
@@ -128,7 +146,7 @@ describe('EditableTitle', () => {
 
     const wrapper = mount(
       <TestProviders>
-        <EditableTitle title={title} onSubmit={submitTitle} isLoading={false} />
+        <EditableTitle {...{ ...defaultProps, title }} />
       </TestProviders>
     );
 
@@ -151,7 +169,7 @@ describe('EditableTitle', () => {
 
     const wrapper = mount(
       <TestProviders>
-        <EditableTitle title="Test title" onSubmit={submitTitle} isLoading={false} />
+        <EditableTitle {...defaultProps} />
       </TestProviders>
     );
 

x-pack/plugins/cases/public/components/header_page/editable_title.tsx

@@ -34,15 +34,15 @@ const MySpinner = styled(EuiLoadingSpinner)`
   `}
 `;
 
-interface Props {
+export interface EditableTitleProps {
-  disabled?: boolean;
+  userCanCrud: boolean;
   isLoading: boolean;
   title: string | React.ReactNode;
   onSubmit: (title: string) => void;
 }
 
-const EditableTitleComponent: React.FC<Props> = ({
+const EditableTitleComponent: React.FC<EditableTitleProps> = ({
-  disabled = false,
+  userCanCrud = false,
   onSubmit,
   isLoading,
   title,
@@ -106,9 +106,8 @@ const EditableTitleComponent: React.FC<Props> = ({
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
         {isLoading && <MySpinner data-test-subj="editable-title-loading" />}
-        {!isLoading && (
+        {!isLoading && userCanCrud && (
           <MyEuiButtonIcon
-            isDisabled={disabled}
             aria-label={i18n.EDIT_TITLE_ARIA(title as string)}
             iconType="pencil"
             onClick={onClickEditIcon}