elastic · jonathan-buttner · Jun 22, 2021 · Jun 22, 2021
diff --git a/x-pack/plugins/cases/public/components/add_comment/index.test.tsx b/x-pack/plugins/cases/public/components/add_comment/index.test.tsx
@@ -14,7 +14,7 @@ import { TestProviders } from '../../common/mock';
 
 import { CommentRequest, CommentType, SECURITY_SOLUTION_OWNER } from '../../../common';
 import { usePostComment } from '../../containers/use_post_comment';
-import { AddComment, AddCommentRefObject } from '.';
+import { AddComment, AddCommentProps, AddCommentRefObject } from '.';
 import { CasesTimelineIntegrationProvider } from '../timeline_context';
 import { timelineIntegrationMock } from '../__mock__/timeline';
 
@@ -25,10 +25,9 @@ const onCommentSaving = jest.fn();
 const onCommentPosted = jest.fn();
 const postComment = jest.fn();
 
-const addCommentProps = {
+const addCommentProps: AddCommentProps = {
   caseId: '1234',
-  disabled: false,
-  insertQuote: null,
+  userCanCrud: true,
   onCommentSaving,
   onCommentPosted,
   showLoading: false,
@@ -94,11 +93,11 @@ describe('AddComment ', () => {
     ).toBeTruthy();
   });
 
-  it('should disable submit button when disabled prop passed', () => {
+  it('should disable submit button when isLoading is true', () => {
     usePostCommentMock.mockImplementation(() => ({ ...defaultPostComment, isLoading: true }));
     const wrapper = mount(
       <TestProviders>
-        <AddComment {...{ ...addCommentProps, disabled: true }} />
+        <AddComment {...addCommentProps} />
       </TestProviders>
     );
 
@@ -107,12 +106,23 @@ describe('AddComment ', () => {
     ).toBeTruthy();
   });
 
+  it('should hide the component when the user does not have crud permissions', () => {
+    usePostCommentMock.mockImplementation(() => ({ ...defaultPostComment, isLoading: true }));
+    const wrapper = mount(
+      <TestProviders>
+        <AddComment {...{ ...addCommentProps, userCanCrud: false }} />
+      </TestProviders>
+    );
+
+    expect(wrapper.find(`[data-test-subj="add-comment"]`).exists()).toBeFalsy();
+  });
+
   it('should insert a quote', async () => {
     const sampleQuote = 'what a cool quote';
     const ref = React.createRef<AddCommentRefObject>();
     const wrapper = mount(
       <TestProviders>
-        <AddComment {...{ ...addCommentProps }} ref={ref} />
+        <AddComment {...addCommentProps} ref={ref} />
       </TestProviders>
     );
 
@@ -143,7 +153,7 @@ describe('AddComment ', () => {
     const wrapper = mount(
       <TestProviders>
         <CasesTimelineIntegrationProvider timelineIntegration={mockTimelineIntegration}>
-          <AddComment {...{ ...addCommentProps }} />
+          <AddComment {...addCommentProps} />
         </CasesTimelineIntegrationProvider>
       </TestProviders>
     );

diff --git a/x-pack/plugins/cases/public/components/add_comment/index.tsx b/x-pack/plugins/cases/public/components/add_comment/index.tsx
@@ -33,9 +33,9 @@ export interface AddCommentRefObject {
   addQuote: (quote: string) => void;
 }
 
-interface AddCommentProps {
+export interface AddCommentProps {
   caseId: string;
-  disabled?: boolean;
+  userCanCrud?: boolean;
   onCommentSaving?: () => void;
   onCommentPosted: (newCase: Case) => void;
   showLoading?: boolean;
@@ -45,7 +45,7 @@ interface AddCommentProps {
 export const AddComment = React.memo(
   forwardRef<AddCommentRefObject, AddCommentProps>(
     (
-      { caseId, disabled, onCommentPosted, onCommentSaving, showLoading = true, subCaseId },
+      { caseId, userCanCrud, onCommentPosted, onCommentSaving, showLoading = true, subCaseId },
       ref
     ) => {
       const owner = useOwnerContext();
@@ -91,31 +91,33 @@ export const AddComment = React.memo(
       return (
         <span id="add-comment-permLink">
           {isLoading && showLoading && <MySpinner data-test-subj="loading-spinner" size="xl" />}
-          <Form form={form}>
-            <UseField
-              path={fieldName}
-              component={MarkdownEditorForm}
-              componentProps={{
-                idAria: 'caseComment',
-                isDisabled: isLoading,
-                dataTestSubj: 'add-comment',
-                placeholder: i18n.ADD_COMMENT_HELP_TEXT,
-                bottomRightContent: (
-                  <EuiButton
-                    data-test-subj="submit-comment"
-                    iconType="plusInCircle"
-                    isDisabled={isLoading || disabled}
-                    isLoading={isLoading}
-                    onClick={onSubmit}
-                    size="s"
-                  >
-                    {i18n.ADD_COMMENT}
-                  </EuiButton>
-                ),
-              }}
-            />
-            <InsertTimeline fieldName="comment" />
-          </Form>
+          {userCanCrud && (
+            <Form form={form}>
+              <UseField
+                path={fieldName}
+                component={MarkdownEditorForm}
+                componentProps={{
+                  idAria: 'caseComment',
+                  isDisabled: isLoading,
+                  dataTestSubj: 'add-comment',
+                  placeholder: i18n.ADD_COMMENT_HELP_TEXT,
+                  bottomRightContent: (
+                    <EuiButton
+                      data-test-subj="submit-comment"
+                      iconType="plusInCircle"
+                      isDisabled={isLoading}
+                      isLoading={isLoading}
+                      onClick={onSubmit}
+                      size="s"
+                    >
+                      {i18n.ADD_COMMENT}
+                    </EuiButton>
+                  ),
+                }}
+              />
+              <InsertTimeline fieldName="comment" />
+            </Form>
+          )}
         </span>
       );
     }

diff --git a/x-pack/plugins/cases/public/components/all_cases/header.tsx b/x-pack/plugins/cases/public/components/all_cases/header.tsx
@@ -52,17 +52,27 @@ export const CasesTableHeader: FunctionComponent<Props> = ({
       wrap={true}
       data-test-subj="all-cases-header"
     >
-      <FlexItemDivider grow={false}>
-        <Count refresh={refresh} />
-      </FlexItemDivider>
-      <EuiFlexItem grow={false}>
-        <NavButtons
-          actionsErrors={actionsErrors}
-          configureCasesNavigation={configureCasesNavigation}
-          createCaseNavigation={createCaseNavigation}
-          userCanCrud={userCanCrud}
-        />
-      </EuiFlexItem>
+      {userCanCrud ? (
+        <>
+          <FlexItemDivider grow={false}>
+            <Count refresh={refresh} />
+          </FlexItemDivider>
+
+          <EuiFlexItem grow={false}>
+            <NavButtons
+              actionsErrors={actionsErrors}
+              configureCasesNavigation={configureCasesNavigation}
+              createCaseNavigation={createCaseNavigation}
+            />
+          </EuiFlexItem>
+        </>
+      ) : (
+        // doesn't include the horizontal bar that divides the buttons and other padding since we don't have any buttons
+        // to the right
+        <EuiFlexItem>
+          <Count refresh={refresh} />
+        </EuiFlexItem>
+      )}
     </EuiFlexGroup>
   </CaseHeaderPage>
 );
diff --git a/x-pack/plugins/cases/public/components/all_cases/nav_buttons.tsx b/x-pack/plugins/cases/public/components/all_cases/nav_buttons.tsx
@@ -17,7 +17,6 @@ interface OwnProps {
   actionsErrors: ErrorMessage[];
   configureCasesNavigation: CasesNavigation;
   createCaseNavigation: CasesNavigation;
-  userCanCrud: boolean;
 }
 
 type Props = OwnProps;
@@ -26,22 +25,20 @@ export const NavButtons: FunctionComponent<Props> = ({
   actionsErrors,
   configureCasesNavigation,
   createCaseNavigation,
-  userCanCrud,
 }) => (
   <EuiFlexGroup>
     <EuiFlexItem grow={false}>
       <ConfigureCaseButton
         configureCasesNavigation={configureCasesNavigation}
         label={i18n.CONFIGURE_CASES_BUTTON}
-        isDisabled={!isEmpty(actionsErrors) || !userCanCrud}
+        isDisabled={!isEmpty(actionsErrors)}
         showToolTip={!isEmpty(actionsErrors)}
         msgTooltip={!isEmpty(actionsErrors) ? actionsErrors[0].description : <></>}
         titleTooltip={!isEmpty(actionsErrors) ? actionsErrors[0].title : ''}
       />
     </EuiFlexItem>
     <EuiFlexItem grow={false}>
       <LinkButton
-        isDisabled={!userCanCrud}
         fill
         onClick={createCaseNavigation.onClick}
         href={createCaseNavigation.href}

diff --git a/x-pack/plugins/cases/public/components/all_cases/table.tsx b/x-pack/plugins/cases/public/components/all_cases/table.tsx
@@ -121,19 +121,21 @@ export const CasesTable: FunctionComponent<CasesTableProps> = ({
           <EuiEmptyPrompt
             title={<h3>{i18n.NO_CASES}</h3>}
             titleSize="xs"
-            body={i18n.NO_CASES_BODY}
+            body={userCanCrud ? i18n.NO_CASES_BODY : i18n.NO_CASES_BODY_READ_ONLY}
             actions={
-              <LinkButton
-                isDisabled={!userCanCrud}
-                fill
-                size="s"
-                onClick={goToCreateCase}
-                href={createCaseNavigation.href}
-                iconType="plusInCircle"
-                data-test-subj="cases-table-add-case"
-              >
-                {i18n.ADD_NEW_CASE}
-              </LinkButton>
+              userCanCrud && (
+                <LinkButton
+                  isDisabled={!userCanCrud}
+                  fill
+                  size="s"
+                  onClick={goToCreateCase}
+                  href={createCaseNavigation.href}
+                  iconType="plusInCircle"
+                  data-test-subj="cases-table-add-case"
+                >
+                  {i18n.ADD_NEW_CASE}
+                </LinkButton>
+              )
             }
           />
         }

diff --git a/x-pack/plugins/cases/public/components/all_cases/translations.ts b/x-pack/plugins/cases/public/components/all_cases/translations.ts
@@ -12,11 +12,19 @@ export * from '../../common/translations';
 export const NO_CASES = i18n.translate('xpack.cases.caseTable.noCases.title', {
   defaultMessage: 'No Cases',
 });
+
 export const NO_CASES_BODY = i18n.translate('xpack.cases.caseTable.noCases.body', {
   defaultMessage:
     'There are no cases to display. Please create a new case or change your filter settings above.',
 });
 
+export const NO_CASES_BODY_READ_ONLY = i18n.translate(
+  'xpack.cases.caseTable.noCases.readonly.body',
+  {
+    defaultMessage: 'There are no cases to display. Please change your filter settings above.',
+  }
+);
+
 export const ADD_NEW_CASE = i18n.translate('xpack.cases.caseTable.addNewCase', {
   defaultMessage: 'Add New Case',
 });

diff --git a/x-pack/plugins/cases/public/components/callout/helpers.tsx b/x-pack/plugins/cases/public/components/callout/helpers.tsx
@@ -5,18 +5,7 @@
  * 2.0.
  */
 
-import React from 'react';
 import md5 from 'md5';
 
-import * as i18n from './translations';
-import { ErrorMessage } from './types';
-
-export const permissionsReadOnlyErrorMessage: ErrorMessage = {
-  id: 'read-only-privileges-error',
-  title: i18n.READ_ONLY_FEATURE_TITLE,
-  description: <>{i18n.READ_ONLY_FEATURE_MSG}</>,
-  errorType: 'warning',
-};
-
 export const createCalloutId = (ids: string[], delimiter: string = '|'): string =>
   md5(ids.join(delimiter));
diff --git a/x-pack/plugins/cases/public/components/callout/translations.ts b/x-pack/plugins/cases/public/components/callout/translations.ts
@@ -7,15 +7,6 @@
 
 import { i18n } from '@kbn/i18n';
 
-export const READ_ONLY_FEATURE_TITLE = i18n.translate('xpack.cases.readOnlyFeatureTitle', {
-  defaultMessage: 'You cannot open new or update existing cases',
-});
-
-export const READ_ONLY_FEATURE_MSG = i18n.translate('xpack.cases.readOnlyFeatureDescription', {
-  defaultMessage:
-    'You only have privileges to view cases. If you need to open and update cases, contact your Kibana administrator.',
-});
-
 export const DISMISS_CALLOUT = i18n.translate('xpack.cases.dismissErrorsPushServiceCallOutTitle', {
   defaultMessage: 'Dismiss',
 });
diff --git a/x-pack/plugins/cases/public/components/case_action_bar/actions.tsx b/x-pack/plugins/cases/public/components/case_action_bar/actions.tsx
@@ -19,14 +19,12 @@ interface CaseViewActions {
   allCasesNavigation: CasesNavigation;
   caseData: Case;
   currentExternalIncident: CaseService | null;
-  disabled?: boolean;
 }
 
 const ActionsComponent: React.FC<CaseViewActions> = ({
   allCasesNavigation,
   caseData,
   currentExternalIncident,
-  disabled = false,
 }) => {
   // Delete case
   const {
@@ -39,7 +37,6 @@ const ActionsComponent: React.FC<CaseViewActions> = ({
   const propertyActions = useMemo(
     () => [
       {
-        disabled,
         iconType: 'trash',
         label: i18n.DELETE_CASE(),
         onClick: handleToggleModal,
@@ -54,7 +51,7 @@ const ActionsComponent: React.FC<CaseViewActions> = ({
           ]
         : []),
     ],
-    [disabled, handleToggleModal, currentExternalIncident]
+    [handleToggleModal, currentExternalIncident]
   );
 
   if (isDeleted) {

diff --git a/x-pack/plugins/cases/public/components/case_action_bar/index.test.tsx b/x-pack/plugins/cases/public/components/case_action_bar/index.test.tsx
@@ -26,6 +26,7 @@ describe('CaseActionBar', () => {
     onRefresh,
     onUpdateField,
     currentExternalIncident: null,
+    userCanCrud: true,
   };
 
   beforeEach(() => {