[ML] Adding capabilities and ML node check to create job button in da…

…shboard (#172022)

Fixes #163575
When no jobs are available for selection the `Create job` button should
be disabled for users who cannot create jobs and when no ML nodes are
available.

**When user has insufficient permissions**
<img width="1372" alt="image"
src="https://github.com/elastic/kibana/assets/22172091/9fedc721-6e50-425f-b3b2-c7480146e1e1">

**When no ML nodes are available**

![image](https://github.com/elastic/kibana/assets/22172091/d77b3491-1f39-4956-8eb3-f060db3b7e6b)

x-pack/plugins/ml/public/application/components/job_selector/job_selector_table/job_selector_table.js

@@ -28,6 +28,7 @@ import { i18n } from '@kbn/i18n';
 import { useMlKibana } from '../../../contexts/kibana';
 import { ML_PAGES } from '../../../../../common/constants/locator';
 import { PLUGIN_ID } from '../../../../../common/constants/app';
+import { MlNodeAvailableWarningShared } from '../../node_available_warning';
 
 const JOB_FILTER_FIELDS = ['job_id', 'groups'];
 const GROUP_FILTER_FIELDS = ['id'];
@@ -43,11 +44,15 @@ export function JobSelectorTable({
   withTimeRangeSelector,
 }) {
   const [sortableProperties, setSortableProperties] = useState();
+  const [mlNodesAvailable, setMlNodesAvailable] = useState(true);
   const [currentTab, setCurrentTab] = useState('Jobs');
 
   const {
     services: {
-      application: { navigateToApp },
+      application: {
+        navigateToApp,
+        capabilities: { ml: mlCapabilities },
+      },
     },
   } = useMlKibana();
 
@@ -258,6 +263,7 @@ export function JobSelectorTable({
 
   return (
     <Fragment>
+      <MlNodeAvailableWarningShared nodeAvailableCallback={setMlNodesAvailable} />
       {jobs.length === 0 && (
         <EuiCallOut
           title={
@@ -269,7 +275,11 @@ export function JobSelectorTable({
           iconType="iInCircle"
         >
           <EuiText textAlign="center">
-            <EuiButton color="primary" onClick={navigateToWizard}>
+            <EuiButton
+              color="primary"
+              onClick={navigateToWizard}
+              disabled={mlCapabilities.canCreateJob === false || mlNodesAvailable === false}
+            >
               <FormattedMessage
                 id="xpack.ml.jobSelector.createJobButtonLabel"
                 defaultMessage="Create job"

x-pack/plugins/ml/public/application/components/job_selector/job_selector_table/job_selector_table.test.js

@@ -11,6 +11,9 @@ import { fireEvent, render } from '@testing-library/react'; // eslint-disable-li
 import { JobSelectorTable } from './job_selector_table';
 
 jest.mock('../../../contexts/kibana');
+jest.mock('../../node_available_warning', () => {
+  return { MlNodeAvailableWarningShared: () => <div /> };
+});
 
 const props = {
   ganttBarWidth: 299,

x-pack/plugins/ml/public/application/contexts/kibana/__mocks__/kibana_context.ts

@@ -38,7 +38,15 @@ export const kibanaContextMock = {
   services: {
     uiSettings: { get: jest.fn() },
     chrome: { recentlyAccessed: { add: jest.fn() } },
-    application: { navigateToApp: jest.fn(), navigateToUrl: jest.fn() },
+    application: {
+      navigateToApp: jest.fn(),
+      navigateToUrl: jest.fn(),
+      capabilities: {
+        ml: {
+          canCreateJob: true,
+        },
+      },
+    },
     http: {
       basePath: {
         get: jest.fn(),