Add loading spinner and useEffect

src/api/pipelineRuns.test.js

@@ -370,9 +370,8 @@ it('generate new pipeline run maximum', () => {
     metadata: {
       annotations: {
         keya: 'valuea',
-        'kubectl.kubernetes.io/last-applied-configuration': {
-          keya: 'valuea'
-        }
+        'kubectl.kubernetes.io/last-applied-configuration':
+          '{"apiVersion": "tekton.dev/v1beta1", "keya": "valuea"}'
       },
       labels: {
         keyl: 'valuel',
@@ -418,9 +417,8 @@ it('generate new pipeline run last applied configuration should be removed', ()
     kind: 'PipelineRun',
     metadata: {
       annotations: {
-        'kubectl.kubernetes.io/last-applied-configuration': {
-          keya: 'valuea'
-        }
+        'kubectl.kubernetes.io/last-applied-configuration':
+          '{"apiVersion": "tekton.dev/v1beta1", "keya": "valuea"}'
       },
       name: 'test',
       namespace: 'test2'

src/containers/CreatePipelineRun/CreatePipelineRun.js

@@ -486,8 +486,18 @@ function CreatePipelineRun() {
         );
         payloadYaml = yaml.dump(payload);
       }
+      const loadingMessage = intl.formatMessage({
+        id: 'dashboard.loading.pipelineRun',
+        defaultMessage: 'Loading PipelineRun…'
+      });
 
-      return <CreateYAMLEditor code={payloadYaml || ''} loading={isLoading} />;
+      return (
+        <CreateYAMLEditor
+          code={payloadYaml || ''}
+          loading={isLoading}
+          loadingMessage={loadingMessage}
+        />
+      );
     }
     const pipelineRun = getPipelineRunPayload({
       labels: labels.reduce((acc, { key, value }) => {

src/containers/CreatePipelineRun/YAMLEditor.js

@@ -16,39 +16,40 @@ import {
   Button,
   Form,
   FormGroup,
-  InlineNotification
+  InlineNotification,
+  Loading
 } from 'carbon-components-react';
 import yaml from 'js-yaml';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import CodeMirror from '@uiw/react-codemirror';
 import { StreamLanguage } from '@codemirror/language';
 import { yaml as codeMirrorYAML } from '@codemirror/legacy-modes/mode/yaml';
 import { useNavigate } from 'react-router-dom-v5-compat';
 import { createPipelineRunRaw, useSelectedNamespace } from '../../api';
 
-export function CreateYAMLEditor({ code: initialCode, loading = false }) {
+export function CreateYAMLEditor({
+  code: initialCode,
+  loading = false,
+  loadingMessage = ''
+}) {
   const intl = useIntl();
   const navigate = useNavigate();
   const { selectedNamespace } = useSelectedNamespace();
 
-  const [
-    { isCreating, prevLoading, submitError, validationErrorMessage, code },
-    setState
-  ] = useState({
-    isCreating: false,
-    prevLoading: loading,
-    submitError: '',
-    validationErrorMessage: '',
-    code: initialCode
-  });
+  const [{ isCreating, submitError, validationErrorMessage, code }, setState] =
+    useState({
+      isCreating: false,
+      submitError: '',
+      validationErrorMessage: '',
+      code: initialCode
+    });
 
-  if (prevLoading !== loading) {
+  useEffect(() => {
     setState(state => ({
       ...state,
-      code: initialCode,
-      prevLoading: loading
+      code: initialCode
     }));
-  }
+  }, [loading]);
 
   function validateNamespace(obj) {
     if (!obj?.metadata?.namespace) {
@@ -187,23 +188,33 @@ export function CreateYAMLEditor({ code: initialCode, loading = false }) {
             lowContrast
           />
         )}
-        <FormGroup legendText="">
-          <CodeMirror
-            value={code}
-            height="800px"
-            theme="dark"
-            extensions={[StreamLanguage.define(codeMirrorYAML)]}
-            onChange={onChange}
-            editable={!loading}
-          />
+        <FormGroup legendText="" className="tkn--codemirror--form">
+          <>
+            {loading && (
+              <div className="tkn--data-loading-overlay">
+                <Loading description={loadingMessage} withOverlay={false} />
+                <span className="tkn--data-loading-text">{loadingMessage}</span>
+              </div>
+            )}
+            {!loading && (
+              <CodeMirror
+                value={code}
+                height="800px"
+                theme="dark"
+                extensions={[StreamLanguage.define(codeMirrorYAML)]}
+                onChange={onChange}
+                editable={!loading}
+              />
+            )}
+          </>
         </FormGroup>
         <Button
           iconDescription={intl.formatMessage({
             id: 'dashboard.actions.createButton',
             defaultMessage: 'Create'
           })}
           onClick={handleSubmit}
-          disabled={isCreating}
+          disabled={isCreating || loading}
         >
           {intl.formatMessage({
             id: 'dashboard.actions.createButton',

src/containers/CreatePipelineRun/YAMLEditor.test.js

@@ -19,6 +19,7 @@ import { CreateYAMLEditor } from './YAMLEditor';
 import * as PipelineRunsAPI from '../../api/pipelineRuns';
 
 const submitButton = allByText => allByText('Create')[0];
+const cancelButton = allByText => allByText('Cancel')[0];
 const pipelineRun = `
       apiVersion: tekton.dev/v1beta1
       kind: PipelineRun
@@ -211,4 +212,17 @@ describe('YAMLEditor', () => {
       expect(getByText(/Error creating PipelineRun/)).toBeTruthy();
     });
   });
+
+  it('during loading loading message should be displayed', () => {
+    const { getAllByText } = renderWithRouter(
+      <CreateYAMLEditor loading loadingMessage="wait. test is in progress" />
+    );
+    expect(getAllByText(/wait. test is in progress/)).toBeTruthy();
+  });
+
+  it('during loading button create should be disabled and button cancel should not', () => {
+    const { queryAllByText } = renderWithRouter(<CreateYAMLEditor loading />);
+    expect(submitButton(queryAllByText).disabled).toBe(true);
+    expect(cancelButton(queryAllByText).disabled).toBe(false);
+  });
 });