[8.1] [data view management] Fix set default data view permissions check (#124897)

src/plugins/data_view_management/public/components/edit_index_pattern/create_edit_field/create_edit_field.tsx

@@ -70,7 +70,11 @@ export const CreateEditField = withRouter(
     if (spec) {
       return (
         <>
-          <IndexHeader indexPattern={indexPattern} defaultIndex={uiSettings.get('defaultIndex')} />
+          <IndexHeader
+            indexPattern={indexPattern}
+            defaultIndex={uiSettings.get('defaultIndex')}
+            canSave={dataViews.getCanSaveSync()}
+          />
           <EuiSpacer size={'l'} />
           <FieldEditor
             indexPattern={indexPattern}

src/plugins/data_view_management/public/components/edit_index_pattern/edit_index_pattern.tsx

@@ -65,7 +65,7 @@ const securitySolution = 'security-solution';
 
 export const EditIndexPattern = withRouter(
   ({ indexPattern, history, location }: EditIndexPatternProps) => {
-    const { application, uiSettings, overlays, chrome, dataViews } =
+    const { uiSettings, overlays, chrome, dataViews } =
       useKibana<IndexPatternManagmentContext>().services;
     const [fields, setFields] = useState<DataViewField[]>(indexPattern.getNonScriptedFields());
     const [conflictedFields, setConflictedFields] = useState<DataViewField[]>(
@@ -143,15 +143,16 @@ export const EditIndexPattern = withRouter(
     const showTagsSection = Boolean(indexPattern.timeFieldName || (tags && tags.length > 0));
     const kibana = useKibana();
     const docsUrl = kibana.services.docLinks!.links.elasticsearch.mapping;
-    const userEditPermission = !!application?.capabilities?.indexPatterns?.save;
+    const userEditPermission = dataViews.getCanSaveSync();
 
     return (
       <div data-test-subj="editIndexPattern" role="region" aria-label={headingAriaLabel}>
         <IndexHeader
           indexPattern={indexPattern}
           setDefault={setDefaultPattern}
-          {...(userEditPermission ? { deleteIndexPatternClick: removePattern } : {})}
+          deleteIndexPatternClick={removePattern}
           defaultIndex={defaultIndex}
+          canSave={userEditPermission}
         >
           {showTagsSection && (
             <EuiFlexGroup wrap gutterSize="s">

src/plugins/data_view_management/public/components/edit_index_pattern/index_header/index_header.tsx

@@ -16,6 +16,7 @@ interface IndexHeaderProps {
   defaultIndex?: string;
   setDefault?: () => void;
   deleteIndexPatternClick?: () => void;
+  canSave: boolean;
 }
 
 const setDefaultAriaLabel = i18n.translate('indexPatternManagement.editDataView.setDefaultAria', {
@@ -40,12 +41,13 @@ export const IndexHeader: React.FC<IndexHeaderProps> = ({
   setDefault,
   deleteIndexPatternClick,
   children,
+  canSave,
 }) => {
   return (
     <EuiPageHeader
       pageTitle={<span data-test-subj="indexPatternTitle">{indexPattern.title}</span>}
       rightSideItems={[
-        defaultIndex !== indexPattern.id && setDefault && (
+        defaultIndex !== indexPattern.id && setDefault && canSave && (
           <EuiToolTip content={setDefaultTooltip}>
             <EuiButtonIcon
               color="text"
@@ -56,7 +58,7 @@ export const IndexHeader: React.FC<IndexHeaderProps> = ({
             />
           </EuiToolTip>
         ),
-        deleteIndexPatternClick && (
+        canSave && (
           <EuiToolTip content={removeTooltip}>
             <EuiButtonIcon
               color="danger"

src/plugins/data_view_management/public/components/edit_index_pattern/indexed_fields_table/indexed_fields_table.test.tsx

@@ -90,6 +90,12 @@ const fields = [
   { name: 'amount', displayName: 'amount', esTypes: ['long'], isUserEditable: true },
 ].map(mockFieldToIndexPatternField);
 
+const mockedServices = {
+  userEditPermission: false,
+  openModal: () => ({ onClose: new Promise<void>(() => {}), close: async () => {} }),
+  theme: {} as any,
+};
+
 describe('IndexedFieldsTable', () => {
   test('should render normally', async () => {
     const component: ShallowWrapper<any, Readonly<{}>, React.Component<{}, {}, any>> = shallow(
@@ -102,8 +108,9 @@ describe('IndexedFieldsTable', () => {
         }}
         indexedFieldTypeFilter=""
         fieldFilter=""
+        {...mockedServices}
       />
-    ).dive();
+    );
 
     await new Promise((resolve) => process.nextTick(resolve));
     component.update();
@@ -122,8 +129,9 @@ describe('IndexedFieldsTable', () => {
         }}
         indexedFieldTypeFilter=""
         fieldFilter=""
+        {...mockedServices}
       />
-    ).dive();
+    );
 
     await new Promise((resolve) => process.nextTick(resolve));
     component.setProps({ fieldFilter: 'Elast' });
@@ -143,8 +151,30 @@ describe('IndexedFieldsTable', () => {
         }}
         indexedFieldTypeFilter=""
         fieldFilter=""
+        {...mockedServices}
+      />
+    );
+
+    await new Promise((resolve) => process.nextTick(resolve));
+    component.setProps({ indexedFieldTypeFilter: ['date'] });
+    component.update();
+
+    expect(component).toMatchSnapshot();
+  });
+
+  test('should filter based on the schema filter', async () => {
+    const component: ShallowWrapper<any, Readonly<{}>, React.Component<{}, {}, any>> = shallow(
+      <IndexedFieldsTable
+        fields={fields}
+        indexPattern={indexPattern}
+        helpers={helpers}
+        fieldWildcardMatcher={() => {
+          return () => false;
+        }}
+        fieldFilter=""
+        {...mockedServices}
       />
-    ).dive();
+    );
 
     await new Promise((resolve) => process.nextTick(resolve));
     component.setProps({ indexedFieldTypeFilter: 'date' });
@@ -165,8 +195,9 @@ describe('IndexedFieldsTable', () => {
           }}
           indexedFieldTypeFilter=""
           fieldFilter=""
+          {...mockedServices}
         />
-      ).dive();
+      );
 
       await new Promise((resolve) => process.nextTick(resolve));
       component.update();

src/plugins/data_view_management/public/components/edit_index_pattern/indexed_fields_table/indexed_fields_table.tsx

@@ -10,10 +10,8 @@ import React, { Component } from 'react';
 import { createSelector } from 'reselect';
 import { OverlayStart, ThemeServiceStart } from 'src/core/public';
 import { DataViewField, DataView } from '../../../../../../plugins/data_views/public';
-import { useKibana } from '../../../../../../plugins/kibana_react/public';
 import { Table } from './components/table';
 import { IndexedFieldItem } from './types';
-import { IndexPatternManagmentContext } from '../../../types';
 
 interface IndexedFieldsTableProps {
   fields: DataViewField[];
@@ -35,16 +33,10 @@ interface IndexedFieldsTableState {
   fields: IndexedFieldItem[];
 }
 
-const withHooks = (Comp: typeof Component) => {
-  return (props: any) => {
-    const { application } = useKibana<IndexPatternManagmentContext>().services;
-    const userEditPermission = !!application?.capabilities?.indexPatterns?.save;
-
-    return <Comp userEditPermission={userEditPermission} {...props} />;
-  };
-};
-
-class IndexedFields extends Component<IndexedFieldsTableProps, IndexedFieldsTableState> {
+export class IndexedFieldsTable extends Component<
+  IndexedFieldsTableProps,
+  IndexedFieldsTableState
+> {
   constructor(props: IndexedFieldsTableProps) {
     super(props);
 
@@ -136,5 +128,3 @@ class IndexedFields extends Component<IndexedFieldsTableProps, IndexedFieldsTabl
     );
   }
 }
-
-export const IndexedFieldsTable = withHooks(IndexedFields);

src/plugins/data_view_management/public/components/edit_index_pattern/scripted_fields_table/components/header/header.tsx

@@ -22,9 +22,9 @@ interface HeaderProps extends RouteComponentProps {
 }
 
 export const Header = withRouter(({ indexPatternId, history }: HeaderProps) => {
-  const { application, docLinks } = useKibana<IndexPatternManagmentContext>().services;
+  const { dataViews, docLinks } = useKibana<IndexPatternManagmentContext>().services;
   const links = docLinks?.links;
-  const userEditPermission = !!application?.capabilities?.indexPatterns?.save;
+  const userEditPermission = dataViews.getCanSaveSync();
   return (
     <EuiFlexGroup alignItems="center">
       <EuiFlexItem>

src/plugins/data_view_management/public/components/edit_index_pattern/scripted_fields_table/scripted_field_table.test.tsx

@@ -68,8 +68,9 @@ describe('ScriptedFieldsTable', () => {
         helpers={helpers}
         painlessDocLink={'painlessDoc'}
         saveIndexPattern={async () => {}}
+        userEditPermission={false}
       />
-    ).dive();
+    );
 
     // Allow the componentWillMount code to execute
     // https://github.com/airbnb/enzyme/issues/450
@@ -86,8 +87,9 @@ describe('ScriptedFieldsTable', () => {
         helpers={helpers}
         painlessDocLink={'painlessDoc'}
         saveIndexPattern={async () => {}}
+        userEditPermission={false}
       />
-    ).dive();
+    );
 
     // Allow the componentWillMount code to execute
     // https://github.com/airbnb/enzyme/issues/450
@@ -117,8 +119,9 @@ describe('ScriptedFieldsTable', () => {
         painlessDocLink={'painlessDoc'}
         helpers={helpers}
         saveIndexPattern={async () => {}}
+        userEditPermission={false}
       />
-    ).dive();
+    );
 
     // Allow the componentWillMount code to execute
     // https://github.com/airbnb/enzyme/issues/450
@@ -142,8 +145,9 @@ describe('ScriptedFieldsTable', () => {
         painlessDocLink={'painlessDoc'}
         helpers={helpers}
         saveIndexPattern={async () => {}}
+        userEditPermission={false}
       />
-    ).dive();
+    );
 
     // Allow the componentWillMount code to execute
     // https://github.com/airbnb/enzyme/issues/450
@@ -162,8 +166,9 @@ describe('ScriptedFieldsTable', () => {
         helpers={helpers}
         painlessDocLink={'painlessDoc'}
         saveIndexPattern={async () => {}}
+        userEditPermission={false}
       />
-    ).dive();
+    );
 
     await component.update(); // Fire `componentWillMount()`
     // @ts-expect-error lang is not valid
@@ -189,8 +194,9 @@ describe('ScriptedFieldsTable', () => {
         helpers={helpers}
         painlessDocLink={'painlessDoc'}
         saveIndexPattern={async () => {}}
+        userEditPermission={false}
       />
-    ).dive();
+    );
 
     await component.update(); // Fire `componentWillMount()`
     // @ts-expect-error

src/plugins/data_view_management/public/components/edit_index_pattern/scripted_fields_table/scripted_fields_table.tsx

@@ -15,10 +15,8 @@ import {
 
 import { Table, Header, CallOuts, DeleteScritpedFieldConfirmationModal } from './components';
 import { ScriptedFieldItem } from './types';
-import { IndexPatternManagmentContext } from '../../../types';
 
 import { DataView, DataViewsPublicPluginStart } from '../../../../../../plugins/data_views/public';
-import { useKibana } from '../../../../../../plugins/kibana_react/public';
 
 interface ScriptedFieldsTableProps {
   indexPattern: DataView;
@@ -41,16 +39,10 @@ interface ScriptedFieldsTableState {
   fields: ScriptedFieldItem[];
 }
 
-const withHooks = (Comp: typeof Component) => {
-  return (props: any) => {
-    const { application } = useKibana<IndexPatternManagmentContext>().services;
-    const userEditPermission = !!application?.capabilities?.indexPatterns?.save;
-
-    return <Comp userEditPermission={userEditPermission} {...props} />;
-  };
-};
-
-class ScriptedFields extends Component<ScriptedFieldsTableProps, ScriptedFieldsTableState> {
+export class ScriptedFieldsTable extends Component<
+  ScriptedFieldsTableProps,
+  ScriptedFieldsTableState
+> {
   constructor(props: ScriptedFieldsTableProps) {
     super(props);
 
@@ -168,5 +160,3 @@ class ScriptedFields extends Component<ScriptedFieldsTableProps, ScriptedFieldsT
     );
   }
 }
-
-export const ScriptedFieldsTable = withHooks(ScriptedFields);