From 7897813eb9193bbe3640b7b0833170b9d65e3e35 Mon Sep 17 00:00:00 2001
From: Sudhir Verma <sudhirvvermaa@gmail.com>
Date: Sun, 14 Jun 2020 23:01:39 +0530
Subject: [PATCH] Fix scss

---
 src/view/pipeline/app/_modals.scss            | 265 +++++++++++--
 src/view/pipeline/app/index.html              |   8 +-
 .../app/start-pipeline/StartPipelineModal.tsx | 360 +++++++++---------
 3 files changed, 424 insertions(+), 209 deletions(-)

diff --git a/src/view/pipeline/app/_modals.scss b/src/view/pipeline/app/_modals.scss
index 2f1b4776..61d74ae0 100644
--- a/src/view/pipeline/app/_modals.scss
+++ b/src/view/pipeline/app/_modals.scss
@@ -49,6 +49,9 @@
 @import '~@patternfly/patternfly/sass-utilities/scss-variables';
 @import '~patternfly/dist/sass/patternfly/color-variables';
 
+$font-size-base: 14px;
+
+
 .co-overlay {
   background: rgba(0, 0, 0, 0.5);
   bottom: 0;
@@ -77,7 +80,6 @@
   background-repeat: no-repeat;
   background-size: 100% 12px;
 }
-    
 
 .modal-body {
   display: flex;
@@ -90,6 +92,26 @@
   -webkit-overflow-scrolling: touch;
 }
 
+form.pf-c-form {
+  --pf-c-form__helper-text--Color: var(--pf-global--Color--200);
+}
+
+:root {
+  --pf-chart-global--FontFamily: $font-family-base; // so charts get the correct font-family
+  --pf-global--FontSize--md: $font-size-base;
+  --pf-global--FontSize--sm: 13px;
+}
+
+.pf-c-form__helper-text {
+  font-size: 13px;
+  color: #525151;
+}
+
+.pf-c-form__label-text {
+  font-size: 13px;
+  color: #0a0a0acf;;
+}
+
 .modal-body-border {
   border-top: 1px solid $pf-color-black-300;
 }
@@ -108,6 +130,8 @@
   // so that input, textarea, button, and input-group-addon don't mask the inner scroll shadows
   input, textarea {
     &.pf-c-form-control {
+      font-size: 14px;
+      height: auto;
       background-color: transparent;
       &[disabled],
       &[readonly] {
@@ -126,6 +150,11 @@
   flex-direction: column;
   height: 100%;
   position: relative;
+  // margin: auto;
+  // max-width: 768px;
+  margin: 0 auto;
+  width: 78%;
+  top: 44px;
   @media(min-width: $screen-sm-min) {
     // Desktop only responsive max-height allows modal to adjust to content height and enable scroll shadows if needed.
     max-height: calc(100vh - 60px);
@@ -139,7 +168,7 @@
         overflow-y: visible !important;
       }
       .modal-body-content {
-        background-color: brown;
+        background-color: var(--pf-global--BackgroundColor--100);
       }
       .modal-body-inner-shadow-covers {
         padding-bottom: var(--pf-global--spacer--lg);
@@ -164,19 +193,6 @@
   }
 }
 
-.pf-c-select__menu {
-  position: absolute;
-  top: var(--pf-c-select__menu--Top);
-  z-index: var(--pf-c-select__menu--ZIndex);
-  min-width: 100%;
-  padding-top: var(--pf-c-select__menu--PaddingTop);
-  padding-bottom: var(--pf-c-select__menu--PaddingBottom);
-  background-color: var(--pf-c-select__menu--BackgroundColor);
-  background-clip: padding-box;
-  border: var(--pf-c-select__menu--BorderWidth) solid transparent;
-  box-shadow: var(--pf-c-select__menu--BoxShadow);
-}
-
 .modal-footer {
   background-color: var(--pf-global--BackgroundColor--100);
   margin-top: 0;
@@ -184,16 +200,10 @@
 }
 
 .modal-header {
-  background-color: #fff;
+  background-color:var(--pf-global--BackgroundColor--100);
   padding: var(--pf-global--spacer--xl) var(--pf-global--spacer--xl) var(--pf-global--spacer--lg);
 }
 
-.title-size {
-  font-size: 1.5rem;
-  font-weight: 400;
-  line-height: 1.3
-}
-
 .toleration-modal__field, .taint-modal__field  {
   padding-right: 0;
 }
@@ -215,3 +225,214 @@
     margin-bottom: 24px;
   }
 }
+
+.pf-c-form__actions--right {
+  justify-content: flex-end;
+}
+
+.pf-c-form__group--no-top-margin {
+  margin-top: 0 !important;
+}
+
+.pf-m-redhat-font .pf-c-button {
+  --pf-c-button--FontWeight: var(--pf-global--FontWeight--normal);
+}
+
+.pf-c-button.pf-m-secondary {
+  color: var(--pf-c-button--m-secondary--Color);
+  background-color: var(--pf-c-button--m-secondary--BackgroundColor);
+}
+
+$headings-font-family: var(--pf-global--FontFamily--heading--sans-serif);
+
+h2 {
+  font-size: 20px;
+}
+
+h2 {
+  display: block;
+  font-size: 1.5em;
+  margin-block-start: 0.83em;
+  margin-block-end: 0.83em;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+  font-weight: bold;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  // reset headings font family back to correct value
+  // bug caused by PF4 _shield-inheritable.scss
+  .pf-l-split {
+    font-family: $headings-font-family;
+  }
+}
+
+h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+  font-family: var(--pf-global--FontFamily--heading--sans-serif);
+  font-weight: var(--pf-global--FontWeight--normal);
+  line-height: 1.1;
+  color: inherit;
+}
+
+label {
+  font-weight: 600;
+}
+
+.pf-c-select__toggle {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-width: var(--pf-c-select__toggle--MinWidth);
+  padding: var(--pf-c-select__toggle--PaddingTop) var(--pf-c-select__toggle--PaddingRight) var(--pf-c-select__toggle--PaddingBottom) var(--pf-c-select__toggle--PaddingLeft);
+  font-size: var(--pf-c-select__toggle--FontSize);
+  font-weight: var(--pf-c-select__toggle--FontWeight);
+  line-height: var(--pf-c-select__toggle--LineHeight);
+  color: var(--pf-c-select__toggle--Color);
+  white-space: nowrap;
+  cursor: pointer;
+  background-color: var(--pf-c-select__toggle--BackgroundColor);
+  border: none;
+}
+
+.pf-c-select__toggle-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 15px;
+  font-style: normal;
+  color: #1d1b1bd9;
+}
+
+.pf-c-select__menu {
+  position: absolute;
+  top: var(--pf-c-select__menu--Top);
+  z-index: var(--pf-c-select__menu--ZIndex);
+  min-width: 100%;
+  padding-top: var(--pf-c-select__menu--PaddingTop);
+  padding-bottom: var(--pf-c-select__menu--PaddingBottom);
+  background-color: var(--pf-c-select__menu--BackgroundColor);
+  background-clip: padding-box;
+  border: var(--pf-c-select__menu--BorderWidth) solid transparent;
+  box-shadow: var(--pf-c-select__menu--BoxShadow);
+}
+
+.pf-c-select__menu-item {
+  position: relative;
+  width: 100%;
+  padding: var(--pf-c-select__menu-item--PaddingTop) var(--pf-c-select__menu-item--PaddingRight) var(--pf-c-select__menu-item--PaddingBottom) var(--pf-c-select__menu-item--PaddingLeft);
+  font-size: var(--pf-c-select__menu-item--FontSize);
+  font-weight: var(--pf-c-select__menu-item--FontWeight);
+  line-height: var(--pf-c-select__menu-item--LineHeight);
+  color: #1d1b1bd9;
+  text-align: left;
+  white-space: nowrap;
+  background-color: transparent;
+  border: none;
+}
+
+.pf-c-button {
+  --pf-c-button--PaddingTop: var(--pf-global--spacer--form-element);
+  --pf-c-button--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-button--PaddingBottom: var(--pf-global--spacer--form-element);
+  --pf-c-button--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-button--LineHeight: var(--pf-global--LineHeight--md);
+  --pf-c-button--FontWeight: var(--pf-global--FontWeight--semi-bold);
+  --pf-c-button--FontSize: var(--pf-global--FontSize--md);
+  --pf-c-button--BorderRadius: var(--pf-global--BorderRadius--sm);
+  --pf-c-button--BorderColor: transparent;
+  --pf-c-button--BorderWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-button--hover--BorderWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-button--focus--BorderWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-button--active--BorderWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-button--disabled--Color: var(--pf-global--disabled-color--100);
+  --pf-c-button--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
+  --pf-c-button--disabled--BorderColor: transparent;
+  --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--100);
+  --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
+  --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
+  --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
+  --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
+  --pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
+  --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
+  --pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100);
+  --pf-c-button--m-secondary--BackgroundColor: transparent;
+  --pf-c-button--m-secondary--BorderColor: var(--pf-global--primary-color--100);
+  --pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
+  --pf-c-button--m-secondary--hover--BackgroundColor: transparent;
+  --pf-c-button--m-secondary--hover--BorderColor: var(--pf-global--primary-color--100);
+  --pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
+  --pf-c-button--m-secondary--focus--BackgroundColor: transparent;
+  --pf-c-button--m-secondary--focus--BorderColor: var(--pf-global--primary-color--100);
+  --pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
+  --pf-c-button--m-secondary--active--BackgroundColor: transparent;
+  --pf-c-button--m-secondary--active--BorderColor: var(--pf-global--primary-color--100);
+  --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
+  --pf-c-button--m-tertiary--BackgroundColor: transparent;
+  --pf-c-button--m-tertiary--BorderColor: var(--pf-global--Color--100);
+  --pf-c-button--m-tertiary--Color: var(--pf-global--Color--100);
+  --pf-c-button--m-tertiary--hover--BackgroundColor: transparent;
+  --pf-c-button--m-tertiary--hover--BorderColor: var(--pf-global--Color--100);
+  --pf-c-button--m-tertiary--hover--Color: var(--pf-global--Color--100);
+  --pf-c-button--m-tertiary--focus--BackgroundColor: transparent;
+  --pf-c-button--m-tertiary--focus--BorderColor: var(--pf-global--Color--100);
+  --pf-c-button--m-tertiary--focus--Color: var(--pf-global--Color--100);
+  --pf-c-button--m-tertiary--active--BackgroundColor: transparent;
+  --pf-c-button--m-tertiary--active--BorderColor: var(--pf-global--Color--100);
+  --pf-c-button--m-tertiary--active--Color: var(--pf-global--Color--100);
+  --pf-c-button--m-danger--BackgroundColor: var(--pf-global--danger-color--100);
+  --pf-c-button--m-danger--Color: var(--pf-global--Color--light-100);
+  --pf-c-button--m-danger--hover--BackgroundColor: var(--pf-global--danger-color--200);
+  --pf-c-button--m-danger--hover--Color: var(--pf-global--Color--light-100);
+  --pf-c-button--m-danger--focus--BackgroundColor: var(--pf-global--danger-color--200);
+  --pf-c-button--m-danger--focus--Color: var(--pf-global--Color--light-100);
+  --pf-c-button--m-danger--active--BackgroundColor: var(--pf-global--danger-color--200);
+  --pf-c-button--m-danger--active--Color: var(--pf-global--Color--light-100);
+  --pf-c-button--m-link--Color: var(--pf-global--link--Color);
+  --pf-c-button--m-link--hover--Color: var(--pf-global--link--Color--hover);
+  --pf-c-button--m-link--focus--Color: var(--pf-global--link--Color--hover);
+  --pf-c-button--m-link--active--Color: var(--pf-global--link--Color--hover);
+  --pf-c-button--m-link--disabled--BackgroundColor: transparent;
+  --pf-c-button--m-link--m-inline--hover--TextDecoration: var(--pf-global--link--TextDecoration--hover);
+  --pf-c-button--m-link--m-inline--hover--Color: var(--pf-global--link--Color--hover);
+  --pf-c-button--m-plain--Color: var(--pf-global--Color--200);
+  --pf-c-button--m-plain--hover--Color: var(--pf-global--Color--100);
+  --pf-c-button--m-plain--focus--Color: var(--pf-global--Color--100);
+  --pf-c-button--m-plain--active--Color: var(--pf-global--Color--100);
+  --pf-c-button--m-plain--disabled--Color: var(--pf-global--disabled-color--200);
+  --pf-c-button--m-plain--disabled--BackgroundColor: transparent;
+  --pf-c-button--m-control--after--BorderWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-button--m-control--after--BorderTopColor: var(--pf-global--BorderColor--300);
+  --pf-c-button--m-control--after--BorderRightColor: var(--pf-global--BorderColor--300);
+  --pf-c-button--m-control--after--BorderBottomColor: var(--pf-global--BorderColor--200);
+  --pf-c-button--m-control--after--BorderLeftColor: var(--pf-global--BorderColor--300);
+  --pf-c-button--m-control--hover--after--BorderBottomWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-button--m-control--hover--after--BorderBottomColor: var(--pf-global--active-color--100);
+  --pf-c-button--m-control--active--after--BorderBottomWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-button--m-control--active--after--BorderBottomColor: var(--pf-global--active-color--100);
+  --pf-c-button--m-control--focus--after--BorderBottomWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-button--m-control--focus--after--BorderBottomColor: var(--pf-global--active-color--100);
+  --pf-c-button--m-control--m-expanded--after--BorderBottomWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-button--m-control--m-expanded--after--BorderBottomColor: var(--pf-global--active-color--100);
+  --pf-c-button--m-control--disabled--after--BorderBottomColor: var(--pf-global--BorderColor--300);
+  --pf-c-button--m-control--disabled--BackgroundColor: transparent;
+  --pf-c-button__icon--MarginRight: var(--pf-global--spacer--xs);
+  --pf-c-button__text--icon--MarginLeft: var(--pf-global--spacer--xs);
+  position: relative;
+  display: inline-block;
+  padding: var(--pf-c-button--PaddingTop) var(--pf-c-button--PaddingRight) var(--pf-c-button--PaddingBottom) var(--pf-c-button--PaddingLeft);
+  font-size: var(--pf-c-button--FontSize);
+  font-weight: var(--pf-c-button--FontWeight);
+  line-height: var(--pf-c-button--LineHeight);
+  text-align: center;
+  white-space: nowrap;
+  user-select: none;
+  border: 0;
+  border-radius: var(--pf-c-button--BorderRadius);
+}
\ No newline at end of file
diff --git a/src/view/pipeline/app/index.html b/src/view/pipeline/app/index.html
index 07655950..5c0acaa7 100644
--- a/src/view/pipeline/app/index.html
+++ b/src/view/pipeline/app/index.html
@@ -12,12 +12,6 @@
             }
         </script>
         <style>
-            html,
-            body {
-                padding: 0;
-                overflow: visible;
-            }
-
             .box {
                 display: flex;
                 flex-flow: column;
@@ -39,7 +33,7 @@
             }
         </style>
     </head>
-    <body>
+    <body class="pf-m-redhat-font">
         <div class='box' id='root'></div>
     </body>
 </html>
diff --git a/src/view/pipeline/app/start-pipeline/StartPipelineModal.tsx b/src/view/pipeline/app/start-pipeline/StartPipelineModal.tsx
index c71b1a37..80d4294d 100644
--- a/src/view/pipeline/app/start-pipeline/StartPipelineModal.tsx
+++ b/src/view/pipeline/app/start-pipeline/StartPipelineModal.tsx
@@ -12,144 +12,14 @@ import { startPipelineSchema } from '../modals/validation-utils';
 import ModalStructure from '../common/ModalStructure';
 import StartPipelineForm from './StartPipelineForm';
 
-// const pipeline: Pipeline = {
-//   'apiVersion': 'tekton.dev/v1beta1',
-//   'kind': 'Pipeline',
-//   'metadata': {
-//     'annotations': {
-//       'kubectl.kubernetes.io/last-applied-configuration': '{\'apiVersion\':\'tekton.dev/v1beta1\',\'kind\':\'Pipeline\',\'metadata\':{\'annotations\':{},\'name\':\'build-and-deploy\',\'namespace\':\'pipelines-tutorial\'},\'spec\':{\'params\':[{\'description\':\'name of the deployment to be patched\',\'name\':\'deployment-name\',\'type\':\'string\'}],\'resources\':[{\'name\':\'git-repo\',\'type\':\'git\'},{\'name\':\'image\',\'type\':\'image\'}],\'tasks\':[{\'name\':\'build-image\',\'params\':[{\'name\':\'TLSVERIFY\',\'value\':\'false\'}],\'resources\':{\'inputs\':[{\'name\':\'source\',\'resource\':\'git-repo\'}],\'outputs\':[{\'name\':\'image\',\'resource\':\'image\'}]},\'taskRef\':{\'kind\':\'ClusterTask\',\'name\':\'buildah\'}},{\'name\':\'apply-manifests\',\'resources\':{\'inputs\':[{\'name\':\'source\',\'resource\':\'git-repo\'}]},\'runAfter\':[\'build-image\'],\'taskRef\':{\'name\':\'apply-manifests\'}},{\'name\':\'update-deployment\',\'params\':[{\'name\':\'deployment\',\'value\':\'$(params.deployment-name)\'}],\'resources\':{\'inputs\':[{\'name\':\'image\',\'resource\':\'image\'}]},\'runAfter\':[\'apply-manifests\'],\'taskRef\':{\'name\':\'update-deployment\'}}]}}\n'
-//     },
-//     'creationTimestamp': '2020-06-05T14:28:13Z',
-//     'generation': 1,
-//     'managedFields': [
-//       {
-//         'apiVersion': 'tekton.dev/v1beta1',
-//         'fieldsType': 'FieldsV1',
-//         'fieldsV1': {
-//           'f:metadata': {
-//             'f:annotations': {
-//               '.': {},
-//               'f:kubectl.kubernetes.io/last-applied-configuration': {}
-//             }
-//           },
-//           'f:spec': {
-//             '.': {},
-//             'f:params': {},
-//             'f:resources': {},
-//             'f:tasks': {}
-//           }
-//         },
-//         'manager': 'oc',
-//         'operation': 'Update',
-//         'time': '2020-06-05T14:28:13Z'
-//       }
-//     ],
-//     'name': 'build-and-deploy',
-//     'namespace': 'pipelines-tutorial',
-//     'resourceVersion': '56200',
-//     'selfLink': '/apis/tekton.dev/v1beta1/namespaces/pipelines-tutorial/pipelines/build-and-deploy',
-//     'uid': 'a771e905-15c7-4966-a743-66bbfc60de39'
-//   },
-//   'spec': {
-//     'params': [
-//       {
-//         'description': 'name of the deployment to be patched',
-//         'name': 'deployment-name',
-//         'type': 'string'
-//       }
-//     ],
-//     'resources': [
-//       {
-//         'name': 'git-repo',
-//         'type': 'git'
-//       },
-//       {
-//         'name': 'image',
-//         'type': 'image'
-//       }
-//     ],
-//     'tasks': [
-//       {
-//         'name': 'build-image',
-//         'params': [
-//           {
-//             'name': 'TLSVERIFY',
-//             'value': 'false'
-//           }
-//         ],
-//         'resources': {
-//           'inputs': [
-//             {
-//               'name': 'source',
-//               'resource': 'git-repo'
-//             }
-//           ],
-//           'outputs': [
-//             {
-//               'name': 'image',
-//               'resource': 'image'
-//             }
-//           ]
-//         },
-//         'taskRef': {
-//           'kind': 'ClusterTask',
-//           'name': 'buildah'
-//         }
-//       },
-//       {
-//         'name': 'apply-manifests',
-//         'resources': {
-//           'inputs': [
-//             {
-//               'name': 'source',
-//               'resource': 'git-repo'
-//             }
-//           ]
-//         },
-//         'runAfter': [
-//           'build-image'
-//         ],
-//         'taskRef': {
-//           'kind': 'Task',
-//           'name': 'apply-manifests'
-//         }
-//       },
-//       {
-//         'name': 'update-deployment',
-//         'params': [
-//           {
-//             'name': 'deployment',
-//             'value': '$(params.deployment-name)'
-//           }
-//         ],
-//         'resources': {
-//           'inputs': [
-//             {
-//               'name': 'image',
-//               'resource': 'image'
-//             }
-//           ]
-//         },
-//         'runAfter': [
-//           'apply-manifests'
-//         ],
-//         'taskRef': {
-//           'kind': 'Task',
-//           'name': 'update-deployment'
-//         }
-//       }
-//     ]
-//   }
-// }
-
 const pipeline: Pipeline = {
   'apiVersion': 'tekton.dev/v1beta1',
   'kind': 'Pipeline',
   'metadata': {
     'annotations': {
-      'kubectl.kubernetes.io/last-applied-configuration': '{"apiVersion":"tekton.dev/v1beta1","kind":"Pipeline","metadata":{"annotations":{},"name":"fetch-and-print-recipe","namespace":"pipelines-tutorial"},"spec":{"tasks":[{"name":"fetch-the-recipe","taskRef":{"name":"fetch-secure-data"},"workspaces":[{"name":"super-secret-password","workspace":"password-vault"},{"name":"secure-store","workspace":"recipe-store"},{"name":"filedrop","workspace":"shared-data"}]},{"name":"print-the-recipe","params":[{"name":"filename","value":"recipe.txt"}],"runAfter":["fetch-the-recipe"],"taskRef":{"name":"print-data"},"workspaces":[{"name":"storage","workspace":"shared-data"}]}],"workspaces":[{"name":"password-vault"},{"name":"recipe-store"},{"name":"shared-data"}]}}\n'
+      'kubectl.kubernetes.io/last-applied-configuration': '{\'apiVersion\':\'tekton.dev/v1beta1\',\'kind\':\'Pipeline\',\'metadata\':{\'annotations\':{},\'name\':\'build-and-deploy\',\'namespace\':\'pipelines-tutorial\'},\'spec\':{\'params\':[{\'description\':\'name of the deployment to be patched\',\'name\':\'deployment-name\',\'type\':\'string\'}],\'resources\':[{\'name\':\'git-repo\',\'type\':\'git\'},{\'name\':\'image\',\'type\':\'image\'}],\'tasks\':[{\'name\':\'build-image\',\'params\':[{\'name\':\'TLSVERIFY\',\'value\':\'false\'}],\'resources\':{\'inputs\':[{\'name\':\'source\',\'resource\':\'git-repo\'}],\'outputs\':[{\'name\':\'image\',\'resource\':\'image\'}]},\'taskRef\':{\'kind\':\'ClusterTask\',\'name\':\'buildah\'}},{\'name\':\'apply-manifests\',\'resources\':{\'inputs\':[{\'name\':\'source\',\'resource\':\'git-repo\'}]},\'runAfter\':[\'build-image\'],\'taskRef\':{\'name\':\'apply-manifests\'}},{\'name\':\'update-deployment\',\'params\':[{\'name\':\'deployment\',\'value\':\'$(params.deployment-name)\'}],\'resources\':{\'inputs\':[{\'name\':\'image\',\'resource\':\'image\'}]},\'runAfter\':[\'apply-manifests\'],\'taskRef\':{\'name\':\'update-deployment\'}}]}}\n'
     },
-    'creationTimestamp': '2020-06-12T16:05:41Z',
+    'creationTimestamp': '2020-06-05T14:28:13Z',
     'generation': 1,
     'managedFields': [
       {
@@ -164,81 +34,211 @@ const pipeline: Pipeline = {
           },
           'f:spec': {
             '.': {},
-            'f:tasks': {},
-            'f:workspaces': {}
+            'f:params': {},
+            'f:resources': {},
+            'f:tasks': {}
           }
         },
-        'manager': 'kubectl',
+        'manager': 'oc',
         'operation': 'Update',
-        'time': '2020-06-12T16:05:41Z'
+        'time': '2020-06-05T14:28:13Z'
       }
     ],
-    'name': 'fetch-and-print-recipe',
+    'name': 'build-and-deploy',
     'namespace': 'pipelines-tutorial',
-    'resourceVersion': '41631',
-    'selfLink': '/apis/tekton.dev/v1beta1/namespaces/pipelines-tutorial/pipelines/fetch-and-print-recipe',
-    'uid': '521708a0-5e83-4ba5-b4db-ba5c78f6f7f1'
+    'resourceVersion': '56200',
+    'selfLink': '/apis/tekton.dev/v1beta1/namespaces/pipelines-tutorial/pipelines/build-and-deploy',
+    'uid': 'a771e905-15c7-4966-a743-66bbfc60de39'
   },
   'spec': {
+    'params': [
+      {
+        'description': 'name of the deployment to be patched',
+        'name': 'deployment-name',
+        'type': 'string'
+      }
+    ],
+    'resources': [
+      {
+        'name': 'git-repo',
+        'type': 'git'
+      },
+      {
+        'name': 'image',
+        'type': 'image'
+      }
+    ],
     'tasks': [
       {
-        'name': 'fetch-the-recipe',
-        'taskRef': {
-          'kind': 'Task',
-          'name': 'fetch-secure-data'
-        },
-        'workspaces': [
-          {
-            'name': 'super-secret-password',
-            'workspace': 'password-vault'
-          },
-          {
-            'name': 'secure-store',
-            'workspace': 'recipe-store'
-          },
+        'name': 'build-image',
+        'params': [
           {
-            'name': 'filedrop',
-            'workspace': 'shared-data'
+            'name': 'TLSVERIFY',
+            'value': 'false'
           }
-        ]
+        ],
+        'resources': {
+          'inputs': [
+            {
+              'name': 'source',
+              'resource': 'git-repo'
+            }
+          ],
+          'outputs': [
+            {
+              'name': 'image',
+              'resource': 'image'
+            }
+          ]
+        },
+        'taskRef': {
+          'kind': 'ClusterTask',
+          'name': 'buildah'
+        }
+      },
+      {
+        'name': 'apply-manifests',
+        'resources': {
+          'inputs': [
+            {
+              'name': 'source',
+              'resource': 'git-repo'
+            }
+          ]
+        },
+        'runAfter': [
+          'build-image'
+        ],
+        'taskRef': {
+          'kind': 'Task',
+          'name': 'apply-manifests'
+        }
       },
       {
-        'name': 'print-the-recipe',
+        'name': 'update-deployment',
         'params': [
           {
-            'name': 'filename',
-            'value': 'recipe.txt'
+            'name': 'deployment',
+            'value': '$(params.deployment-name)'
           }
         ],
+        'resources': {
+          'inputs': [
+            {
+              'name': 'image',
+              'resource': 'image'
+            }
+          ]
+        },
         'runAfter': [
-          'fetch-the-recipe'
+          'apply-manifests'
         ],
         'taskRef': {
           'kind': 'Task',
-          'name': 'print-data'
-        },
-        'workspaces': [
-          {
-            'name': 'storage',
-            'workspace': 'shared-data'
-          }
-        ]
-      }
-    ],
-    'workspaces': [
-      {
-        'name': 'password-vault'
-      },
-      {
-        'name': 'recipe-store'
-      },
-      {
-        'name': 'shared-data'
+          'name': 'update-deployment'
+        }
       }
     ]
   }
 }
 
+// const pipeline: Pipeline = {
+//   'apiVersion': 'tekton.dev/v1beta1',
+//   'kind': 'Pipeline',
+//   'metadata': {
+//     'annotations': {
+//       'kubectl.kubernetes.io/last-applied-configuration': '{"apiVersion":"tekton.dev/v1beta1","kind":"Pipeline","metadata":{"annotations":{},"name":"fetch-and-print-recipe","namespace":"pipelines-tutorial"},"spec":{"tasks":[{"name":"fetch-the-recipe","taskRef":{"name":"fetch-secure-data"},"workspaces":[{"name":"super-secret-password","workspace":"password-vault"},{"name":"secure-store","workspace":"recipe-store"},{"name":"filedrop","workspace":"shared-data"}]},{"name":"print-the-recipe","params":[{"name":"filename","value":"recipe.txt"}],"runAfter":["fetch-the-recipe"],"taskRef":{"name":"print-data"},"workspaces":[{"name":"storage","workspace":"shared-data"}]}],"workspaces":[{"name":"password-vault"},{"name":"recipe-store"},{"name":"shared-data"}]}}\n'
+//     },
+//     'creationTimestamp': '2020-06-12T16:05:41Z',
+//     'generation': 1,
+//     'managedFields': [
+//       {
+//         'apiVersion': 'tekton.dev/v1beta1',
+//         'fieldsType': 'FieldsV1',
+//         'fieldsV1': {
+//           'f:metadata': {
+//             'f:annotations': {
+//               '.': {},
+//               'f:kubectl.kubernetes.io/last-applied-configuration': {}
+//             }
+//           },
+//           'f:spec': {
+//             '.': {},
+//             'f:tasks': {},
+//             'f:workspaces': {}
+//           }
+//         },
+//         'manager': 'kubectl',
+//         'operation': 'Update',
+//         'time': '2020-06-12T16:05:41Z'
+//       }
+//     ],
+//     'name': 'fetch-and-print-recipe',
+//     'namespace': 'pipelines-tutorial',
+//     'resourceVersion': '41631',
+//     'selfLink': '/apis/tekton.dev/v1beta1/namespaces/pipelines-tutorial/pipelines/fetch-and-print-recipe',
+//     'uid': '521708a0-5e83-4ba5-b4db-ba5c78f6f7f1'
+//   },
+//   'spec': {
+//     'tasks': [
+//       {
+//         'name': 'fetch-the-recipe',
+//         'taskRef': {
+//           'kind': 'Task',
+//           'name': 'fetch-secure-data'
+//         },
+//         'workspaces': [
+//           {
+//             'name': 'super-secret-password',
+//             'workspace': 'password-vault'
+//           },
+//           {
+//             'name': 'secure-store',
+//             'workspace': 'recipe-store'
+//           },
+//           {
+//             'name': 'filedrop',
+//             'workspace': 'shared-data'
+//           }
+//         ]
+//       },
+//       {
+//         'name': 'print-the-recipe',
+//         'params': [
+//           {
+//             'name': 'filename',
+//             'value': 'recipe.txt'
+//           }
+//         ],
+//         'runAfter': [
+//           'fetch-the-recipe'
+//         ],
+//         'taskRef': {
+//           'kind': 'Task',
+//           'name': 'print-data'
+//         },
+//         'workspaces': [
+//           {
+//             'name': 'storage',
+//             'workspace': 'shared-data'
+//           }
+//         ]
+//       }
+//     ],
+//     'workspaces': [
+//       {
+//         'name': 'password-vault'
+//       },
+//       {
+//         'name': 'recipe-store'
+//       },
+//       {
+//         'name': 'shared-data'
+//       }
+//     ]
+//   }
+// }
+
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type