From 539741d89da2f092845fa4f4fba05858c52dbfd3 Mon Sep 17 00:00:00 2001
From: Sumit-solytics <sumit.roy@solytics-partners.com>
Date: Wed, 14 Feb 2024 17:10:53 +0530
Subject: [PATCH] Edit pipeline changes

---
 .../assets/icons/fingers-white.svg            | 11 +++++++
 .../edit-pipeline-header.component.html       |  2 +-
 .../edit-pipeline-header.component.scss       | 10 +++++-
 .../edit-pipeline.component.html              |  9 ++---
 .../edit-pipeline.component.scss              | 33 +++++++++++++++++++
 .../shared/ui-components/styles/icons.scss    |  3 ++
 6 files changed, 62 insertions(+), 6 deletions(-)
 create mode 100644 src/app/webapp-common/assets/icons/fingers-white.svg

diff --git a/src/app/webapp-common/assets/icons/fingers-white.svg b/src/app/webapp-common/assets/icons/fingers-white.svg
new file mode 100644
index 00000000..45dac035
--- /dev/null
+++ b/src/app/webapp-common/assets/icons/fingers-white.svg
@@ -0,0 +1,11 @@
+<svg width="107" height="107" viewBox="0 0 107 107" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M48.6098 3.97071C41.2118 5.97697 35.3602 12.1211 33.8137 19.5192C33.1868 22.6539 33.563 27.168 34.6915 30.2192L35.611 32.6434L36.9067 31.8492C38.3696 30.9715 38.3696 30.9297 37.4083 27.377C36.3634 23.657 36.7813 19.8535 38.6204 16.05C40.4176 12.4555 42.9255 10.0313 46.729 8.234C49.2786 7.02189 49.9055 6.8965 53.5419 6.8965C57.3036 6.8965 57.6798 6.98009 60.6891 8.44298C64.4927 10.3238 66.8333 12.7481 68.6723 16.6352C69.8844 19.1848 70.0098 19.8117 70.0098 23.4063C70.0098 27.0008 69.8844 27.6277 68.6723 30.1774C67.9618 31.7238 66.5825 33.8137 65.6212 34.8586C63.8657 36.7813 58.7665 39.707 57.22 39.707C56.593 39.707 56.5094 39.916 56.7184 41.0445C57.0528 43.009 57.3872 43.218 59.2262 42.6328C69.4247 39.3727 75.527 28.6727 72.9356 18.6832C70.1352 7.85783 59.0173 1.17033 48.6098 3.97071Z" fill="#C3CDF0"/>
+<path d="M13.3743 29.3414C11.1172 30.052 10.2395 30.6371 7.89888 32.9777C5.47467 35.402 4.9731 36.1543 4.22076 38.6203C3.13404 42.1313 3.09224 44.7227 4.13717 48.0246C6.01803 54.127 11.995 58.5156 18.3899 58.5156C19.4766 58.5156 21.6919 58.1395 23.2383 57.6379C25.7044 56.8855 26.4567 56.384 28.8809 53.9598C31.3051 51.5355 31.8067 50.7832 32.559 48.3172C33.0606 46.7707 33.4368 44.5555 33.4368 43.4688C33.4368 42.382 33.0606 40.1668 32.559 38.6203C31.8067 36.1543 31.3051 35.402 28.8809 32.9777C26.4567 30.5535 25.7044 30.052 23.2383 29.2996C19.7274 28.2129 16.8852 28.2129 13.3743 29.3414ZM22.1516 32.4344C26.5403 33.7301 30.093 38.6621 30.093 43.4688C30.093 49.7383 24.6594 55.1719 18.3899 55.1719C12.1204 55.1719 6.68678 49.7383 6.68678 43.4688C6.68678 37.241 11.9532 31.891 18.2227 31.8074C19.1422 31.7656 20.8977 32.0582 22.1516 32.4344Z" fill="#C3CDF0"/>
+<path d="M16.5098 39.7071L12.748 43.4688L16.6352 47.3559C20.6477 51.3684 21.1074 51.5356 22.3195 49.613C22.6957 49.0278 22.2777 48.4427 20.0625 46.1856L17.3875 43.4688L19.9789 40.8356C21.4 39.4145 22.5703 38.077 22.5703 37.8681C22.5703 37.4919 20.9402 35.9454 20.5223 35.9454C20.3551 35.9454 18.5578 37.6591 16.5098 39.7071Z" fill="#C3CDF0"/>
+<path d="M83.5938 29.3415C81.3367 30.052 80.459 30.6372 78.1184 32.9778C75.6941 35.4021 75.1926 36.1544 74.4402 38.6204C73.9387 40.1669 73.5625 42.3821 73.5625 43.4688C73.5625 44.5556 73.9387 46.7708 74.4402 48.3173C75.1926 50.7833 75.6941 51.5356 78.1184 53.9599C80.5426 56.3841 81.2949 56.8856 83.7609 57.638C87.3555 58.7665 89.8633 58.7665 93.4578 57.638C95.9238 56.8856 96.6762 56.3841 99.1004 53.9599C101.525 51.5356 102.026 50.7833 102.779 48.3173C103.28 46.7708 103.656 44.5556 103.656 43.4688C103.656 42.3821 103.28 40.1669 102.779 38.6204C102.026 36.1544 101.525 35.4021 99.1004 32.9778C96.6762 30.5536 95.9238 30.052 93.4578 29.2997C89.9469 28.213 87.1047 28.213 83.5938 29.3415ZM92.3711 32.4345C96.7598 33.7302 100.312 38.6622 100.312 43.4688C100.312 49.7384 94.8789 55.172 88.6094 55.172C82.3398 55.172 76.9062 49.7384 76.9062 43.4688C76.9062 37.2411 82.1727 31.8911 88.4422 31.8075C89.3617 31.7657 91.1172 32.0583 92.3711 32.4345Z" fill="#C3CDF0"/>
+<path d="M85.3902 36.6559C84.8469 36.9902 84.4289 37.4918 84.4289 37.7426C84.4289 38.0352 85.5992 39.4145 87.0203 40.8355L89.6117 43.4688L86.9367 46.1855L84.2617 48.9023L85.3902 50.0309L86.5187 51.2012L90.3641 47.3141L94.2512 43.4688L90.4895 39.707C88.4414 37.659 86.6441 35.9453 86.5187 35.9871C86.3934 35.9871 85.8918 36.2797 85.3902 36.6559Z" fill="#C3CDF0"/>
+<path d="M42.8 34.1063C40.2086 35.3602 40.125 35.9035 40.125 48.6516V60.1875H37.7844C35.1094 60.1875 33.4793 60.9816 32.4344 62.6953C31.891 63.6566 31.7656 65.1195 31.7656 70.6367V77.4078L36.7812 86.6031L41.7969 95.7566V99.7273V103.656H56.8438H71.8906V99.6438C71.8906 95.7148 71.9324 95.5895 74.3984 89.7797L76.9062 83.9281V71.598C76.9062 58.0559 76.7809 57.2617 74.4402 55.8824C73.3953 55.2555 71.8488 55.1719 62.5281 55.1719H51.8281V46.3527C51.8281 36.4469 51.5773 35.2766 49.1113 34.1063C47.3559 33.2703 44.4719 33.2703 42.8 34.1063ZM47.9828 37.2828C48.359 37.659 48.4844 41.5879 48.4844 52.3297V66.875H50.1562H51.8281V62.6953V58.5156H54.3359H56.8438V62.6953V66.875H58.5156H60.1875V62.6953V58.5156H62.6953H65.2031V62.6953V66.875H66.875H68.5469V62.6953V58.5156H70.5531C71.6398 58.5156 72.7684 58.7246 73.0609 59.0172C73.4371 59.3934 73.5625 62.7371 73.5625 71.4309V83.3848L71.3473 88.4004L69.132 93.416L56.802 93.5414L44.4719 93.625L39.7906 85.0148L35.1094 76.4047V70.4695C35.1094 66.4152 35.2766 64.3672 35.6109 64.0328C35.9035 63.7402 37.032 63.5313 38.1188 63.5313H40.125V66.875V70.2188H41.7969H43.4688V54.0016C43.4688 41.9641 43.5941 37.659 43.9703 37.2828C44.2629 36.9902 45.1406 36.7813 45.9766 36.7813C46.8125 36.7813 47.6902 36.9902 47.9828 37.2828ZM68.5469 98.6406V100.313H56.8438H45.1406V98.6406V96.9688H56.8438H68.5469V98.6406Z" fill="#C3CDF0"/>
+<path d="M65.202 81.7129C65.202 84.6387 65.0766 85.0566 63.7391 87.0629L62.2344 89.2363L63.4047 90.1559C64.0734 90.6992 64.6586 91.1172 64.784 91.1172C64.9094 91.1172 65.7871 89.8633 66.7902 88.4004C68.5039 85.7672 68.5457 85.6 68.5457 82.1309V78.5781H66.8738H65.202V81.7129Z" fill="#C3CDF0"/>
+<path d="M54 16V27.6667" stroke="#C3CDF0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M48 21.8333H60" stroke="#C3CDF0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/app/webapp-common/pipelines/edit-pipeline-header/edit-pipeline-header.component.html b/src/app/webapp-common/pipelines/edit-pipeline-header/edit-pipeline-header.component.html
index 6efc757b..193a19ca 100644
--- a/src/app/webapp-common/pipelines/edit-pipeline-header/edit-pipeline-header.component.html
+++ b/src/app/webapp-common/pipelines/edit-pipeline-header/edit-pipeline-header.component.html
@@ -1,7 +1,7 @@
 <!-- <div class="d-flex justify-content-between header-container align-items-center"
      [ngClass]="{'archive-mode': isArchived}"> -->
   <!-- <div class="d-flex-center"> -->
-  <div class="d-flex justify-content-end align-items-center right-buttons">
+  <div class="d-flex justify-content-end align-items-center header-container">
     <sm-clear-filters-button
       *ngIf="!minimizedView"
       [tableFilters]="tableFilters"
diff --git a/src/app/webapp-common/pipelines/edit-pipeline-header/edit-pipeline-header.component.scss b/src/app/webapp-common/pipelines/edit-pipeline-header/edit-pipeline-header.component.scss
index d7e78f71..bbc6a604 100644
--- a/src/app/webapp-common/pipelines/edit-pipeline-header/edit-pipeline-header.component.scss
+++ b/src/app/webapp-common/pipelines/edit-pipeline-header/edit-pipeline-header.component.scss
@@ -1,5 +1,13 @@
-.right-buttons{
+@import '../../../../webapp-common/shared/ui-components/styles/variables';
+@import '../../../../webapp-common/layout/layout.scss';
+
+.header-container{
     display: flex;
     flex-grow: 1;
     justify-content: end;
+    background-color: #333746;
+    height: $project-header-height;
+    gap: 24px;
+    padding-right: 28px;
+    transition: background-color 0.5s;
 }
\ No newline at end of file
diff --git a/src/app/webapp-common/pipelines/edit-pipeline/edit-pipeline.component.html b/src/app/webapp-common/pipelines/edit-pipeline/edit-pipeline.component.html
index f9bcb8ae..7c56b6a6 100644
--- a/src/app/webapp-common/pipelines/edit-pipeline/edit-pipeline.component.html
+++ b/src/app/webapp-common/pipelines/edit-pipeline/edit-pipeline.component.html
@@ -1,9 +1,10 @@
-<div class="sm-card-list-layout projects">
+<div class="sm-edit-pipeline-main projects">
   <sm-edit-pipeline-header
   >
   </sm-edit-pipeline-header>
-  <div>
-    <div>Details</div>
-    <div>image</div>
+  <div class="sm-edit-pipeline-body">
+    <div class="details"><i class="icon no-output-icon i-no-code-dark"></i>&nbsp;DETAILS</div>
+    <div class="addStep"><i class="icon i-fingers-white"></i>
+      PLEASE ADD ATLEAST ONE  STEP TO GET STARTED</div>
   </div>
 </div>
\ No newline at end of file
diff --git a/src/app/webapp-common/pipelines/edit-pipeline/edit-pipeline.component.scss b/src/app/webapp-common/pipelines/edit-pipeline/edit-pipeline.component.scss
index e69de29b..1e63d029 100644
--- a/src/app/webapp-common/pipelines/edit-pipeline/edit-pipeline.component.scss
+++ b/src/app/webapp-common/pipelines/edit-pipeline/edit-pipeline.component.scss
@@ -0,0 +1,33 @@
+.sm-edit-pipeline-main{
+    display: flexbox;
+}
+.sm-edit-pipeline-body{
+    // display: flex;
+    flex-grow: 1;
+    padding: 30px;
+    justify-content: flex-start;
+    height: 100%;
+    .details{
+        display: flex;
+    width: 144px;
+    height: 45px;
+    background-color: #2c3246;
+    align-items: center;
+    justify-content: center;
+    border-radius: 5px;
+    .icon{
+        margin-right: 20px;
+    }
+    }
+    .addStep{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        height: 100svh;
+        justify-content: center;
+        .icon{
+            width:107px ;
+            height:107px ;
+        }
+    }
+}
diff --git a/src/app/webapp-common/shared/ui-components/styles/icons.scss b/src/app/webapp-common/shared/ui-components/styles/icons.scss
index 7a39b808..5542d696 100755
--- a/src/app/webapp-common/shared/ui-components/styles/icons.scss
+++ b/src/app/webapp-common/shared/ui-components/styles/icons.scss
@@ -596,3 +596,6 @@
 .i-datasets-empty-state {
   @include icon('#{$assets-icons-path}/datasets-empty-state.svg');
 }
+.i-fingers-white {
+  @include icon('#{$assets-icons-path}/fingers-white.svg');
+}