Add yaml mode for create pipelinerun page

tektoncd · Nov 18, 2022 · 051c9c9 · 051c9c9
1 parent 6626364
commit 051c9c9
Show file tree

Hide file tree

Showing 22 changed files with 1,260 additions and 269 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,10 +23,13 @@
     "@babel/runtime": "^7.20.1",
     "@carbon/icons-react": "^10.49.0",
     "@carbon/themes": "^10.55.1",
+    "@codemirror/language": "^6.3.0",
+    "@codemirror/legacy-modes": "^6.2.0",
     "@tanstack/react-query": "^4.10.1",
     "@tanstack/react-query-devtools": "^4.16.1",
     "@tektoncd/dashboard-components": "*",
     "@tektoncd/dashboard-utils": "*",
+    "@uiw/react-codemirror": "^4.12.4",
     "buffer": "^6.0.3",
     "carbon-components": "^10.58.3",
     "carbon-components-react": "^7.59.5",

diff --git a/packages/e2e/cypress/e2e/run/create-pipelinerun.cy.js b/packages/e2e/cypress/e2e/run/create-pipelinerun.cy.js
@@ -12,11 +12,16 @@ limitations under the License.
 */
 
 const namespace = 'e2e';
-describe('Create Simple Pipeline Run', () => {
+describe('Create Pipeline Run', () => {
   before(() => {
     cy.exec('kubectl version --client');
     cy.exec(`kubectl create namespace ${namespace} || true`);
   });
+
+  after(() => {
+    cy.exec(`kubectl delete namespace ${namespace} || true`);
+  });
+
   it('should create pipelinerun', function () {
     const uniqueNumber = Date.now();
 
@@ -59,4 +64,77 @@ describe('Create Simple Pipeline Run', () => {
       .find('span[class="tkn--status-label"]', { timeout: 15000 })
       .should('have.text', 'Succeeded');
   });
+
+  it('should create pipelinerun yaml mode', function () {
+    const uniqueNumber = Date.now();
+
+    const pipelineRunName = `yaml-mode-${uniqueNumber}`;
+    const pipelineRun = `
+      apiVersion: tekton.dev/v1beta1
+      kind: PipelineRun
+      metadata:
+        name: ${pipelineRunName}
+        namespace: ${namespace}
+      spec:
+        pipelineSpec:
+          tasks:
+            - name: hello
+              taskSpec:
+                steps:
+                  - name: echo
+                    image: busybox
+                    script: |
+                      #!/bin/ash
+                      echo "Hello World!"
+    `;
+    cy.visit(`/#/pipelineruns/create`);
+
+    cy.contains('button', 'YAML Mode').click();
+    cy.url().should('include', 'mode=yaml');
+
+    cy.get('.cm-content').type(pipelineRun);
+
+    cy.contains('button', 'Create').click();
+
+    cy.get(`[title=${pipelineRunName}]`).parent().click();
+
+    cy.get('header[class="tkn--pipeline-run-header"]')
+      .find('span[class="tkn--status-label"]', { timeout: 15000 })
+      .should('have.text', 'Succeeded');
+  });
+
+  it('should create pipelinerun yaml mode when open yaml mode directly', function () {
+    const uniqueNumber = Date.now();
+
+    const pipelineRunName = `yaml-mode-${uniqueNumber}`;
+    const pipelineRun = `
+      apiVersion: tekton.dev/v1beta1
+      kind: PipelineRun
+      metadata:
+        name: ${pipelineRunName}
+        namespace: ${namespace}
+      spec:
+        pipelineSpec:
+          tasks:
+            - name: hello
+              taskSpec:
+                steps:
+                  - name: echo
+                    image: busybox
+                    script: |
+                      #!/bin/ash
+                      echo "Hello World!"
+    `;
+    cy.visit(`/#/pipelineruns/create?mode=yaml`);
+
+    cy.get('.cm-content').type(pipelineRun);
+
+    cy.contains('button', 'Create').click();
+
+    cy.get(`[title=${pipelineRunName}]`).parent().click();
+
+    cy.get('header[class="tkn--pipeline-run-header"]')
+      .find('span[class="tkn--status-label"]', { timeout: 15000 })
+      .should('have.text', 'Succeeded');
+  });
 });
diff --git a/pkg/router/router.go b/pkg/router/router.go
@@ -46,7 +46,7 @@ func registerWeb(resource endpoints.Resource, mux *http.ServeMux) {
 			w.Header().Set("Cache-Control", "public, max-age=31536000, immutable")
 		}
 
-		w.Header().Set("Content-Security-Policy", "default-src 'none'; img-src 'self'; script-src 'self'; style-src 'self'; connect-src 'self' wss: ws:; font-src 'self' https://1.www.s81c.com;")
+		w.Header().Set("Content-Security-Policy", "default-src 'none'; img-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; connect-src 'self' wss: ws:; font-src 'self' https://1.www.s81c.com;")
 
 		switch resource.Options.XFrameOptions {
 		case "": // Do nothing, no X-Frame-Options header

diff --git a/src/api/pipelineRuns.js b/src/api/pipelineRuns.js
@@ -73,6 +73,11 @@ export function deletePipelineRun({ name, namespace }) {
   return deleteRequest(uri);
 }
 
+export function createPipelineRunRaw({ namespace, payload }) {
+  const uri = getTektonAPI('pipelineruns', { namespace });
+  return post(uri, payload).then(({ body }) => body);
+}
+
 export function createPipelineRun({
   labels,
   namespace,

diff --git a/src/api/pipelineRuns.test.js b/src/api/pipelineRuns.test.js
@@ -160,6 +160,45 @@ it('createPipelineRun with nodeSelector', () => {
   });
 });
 
+it('createPipelineRunRaw', () => {
+  const pipelineRunRaw = {
+    apiVersion: 'tekton.dev/v1beta1',
+    kind: 'PipelineRun',
+    metadata: { name: 'test-pipeline-run-name', namespace: 'test-namespace' },
+    spec: {
+      pipelineSpec: {
+        tasks: [
+          {
+            name: 'hello',
+            taskSpec: {
+              steps: [
+                {
+                  image: 'busybox',
+                  name: 'echo',
+                  script: '#!/bin/ash\necho "Hello World!"\n'
+                }
+              ]
+            }
+          }
+        ]
+      }
+    }
+  };
+  server.use(
+    rest.post(/\/pipelineruns/, async (req, res, ctx) => {
+      expect(await req.json()).toEqual(pipelineRunRaw);
+      return res(ctx.status(201), ctx.json(pipelineRunRaw));
+    })
+  );
+
+  return API.createPipelineRunRaw({
+    namespace: 'test-namespace',
+    payload: pipelineRunRaw
+  }).then(response => {
+    expect(response).toEqual(pipelineRunRaw);
+  });
+});
+
 it('deletePipelineRun', () => {
   const name = 'foo';
   const data = { fake: 'pipelineRun' };

diff --git a/src/containers/CreatePipelineRun/CreatePipelineRun.js b/src/containers/CreatePipelineRun/CreatePipelineRun.js
@@ -44,6 +44,7 @@ import {
   useSelectedNamespace
 } from '../../api';
 import { isValidLabel } from '../../utils';
+import { CreateYAMLEditor } from './YAMLEditor';
 
 const initialState = {
   creating: false,
@@ -109,6 +110,11 @@ function CreatePipelineRun() {
     );
   }
 
+  function isYAMLMode() {
+    const urlSearchParams = new URLSearchParams(location.search);
+    return urlSearchParams.get('mode') === 'yaml';
+  }
+
   const [
     {
       creating,
@@ -162,6 +168,14 @@ function CreatePipelineRun() {
       pipelinePendingStatus: isPending ? 'PipelineRunPending' : ''
     }));
   };
+
+  function switchToYamlMode() {
+    const queryParams = new URLSearchParams(location.search);
+    queryParams.set('mode', 'yaml');
+    const browserURL = location.pathname.concat(`?${queryParams.toString()}`);
+    navigate(browserURL);
+  }
+
   function checkFormValidation() {
     // Namespace, PipelineRef, Resources, and Params must all have values
     const validNamespace = !!namespace;
@@ -452,6 +466,10 @@ function CreatePipelineRun() {
       });
   }
 
+  if (isYAMLMode()) {
+    return <CreateYAMLEditor />;
+  }
+
   return (
     <div className="tkn--create">
       <div className="tkn--create--heading">
@@ -461,6 +479,18 @@ function CreatePipelineRun() {
             defaultMessage: 'Create PipelineRun'
           })}
         </h1>
+        <div className="tkn--create--yaml-mode">
+          <Button
+            kind="tertiary"
+            id="create-pipelinerun--mode-button"
+            onClick={switchToYamlMode}
+          >
+            {intl.formatMessage({
+              id: 'dashboard.createPipelineRun.yamlModeButton',
+              defaultMessage: 'YAML Mode'
+            })}
+          </Button>
+        </div>
       </div>
       <Form>
         {pipelineError && (

diff --git a/src/containers/CreatePipelineRun/CreatePipelineRun.test.js b/src/containers/CreatePipelineRun/CreatePipelineRun.test.js
@@ -130,6 +130,14 @@ describe('CreatePipelineRun', () => {
     expect(queryByDisplayValue(/bar/i)).toBeFalsy();
   });
 
+  it('renders yaml mode', () => {
+    const { getByRole } = renderWithRouter(<CreatePipelineRun />, {
+      path: '/create',
+      route: '/create?mode=yaml'
+    });
+    expect(getByRole(/textbox/)).toBeTruthy();
+  });
+
   it('handles onClose event', () => {
     jest.spyOn(window.history, 'pushState');
     const { getByText } = renderWithRouter(<CreatePipelineRun />);