From 0a2b78a2360cfcb6540ae87d3498ded5f0864db3 Mon Sep 17 00:00:00 2001
From: Chaitali Mane <71449322+chaitali-mane@users.noreply.github.com>
Date: Wed, 19 Jan 2022 15:45:55 +0530
Subject: [PATCH] Added sync organization and user button (#6592)

* updated docs

Signed-off-by: Abdul-Az <aazeez@progress.com>

* cypress error fix

Signed-off-by: Abdul-Az <aazeez@progress.com>

* lint fixes

Signed-off-by: Abdul-Az <aazeez@progress.com>

* updated docs

Signed-off-by: Abdul-Az <aazeez@progress.com>

* cypress error fix

Signed-off-by: Abdul-Az <aazeez@progress.com>

* Added button as per new design

Signed-off-by: Chaitali Mane <cmane@progress.com>

* update change

Signed-off-by: Chaitali Mane <cmane@progress.com>

Co-authored-by: Abdul-Az <aazeez@progress.com>
---
 .../chef-server-details.component.html        | 16 ++++++++++++-
 .../chef-server-details.component.scss        | 24 ++++++++++++++++---
 2 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/components/automate-ui/src/app/modules/infra-proxy/chef-server-details/chef-server-details.component.html b/components/automate-ui/src/app/modules/infra-proxy/chef-server-details/chef-server-details.component.html
index c0f75b3dc0c..028a8dbc0dc 100644
--- a/components/automate-ui/src/app/modules/infra-proxy/chef-server-details/chef-server-details.component.html
+++ b/components/automate-ui/src/app/modules/infra-proxy/chef-server-details/chef-server-details.component.html
@@ -10,7 +10,7 @@
       </chef-breadcrumbs>
       <chef-page-header>
         <div class="meta-box">
-          <div class="summary-body">
+          <div class="summary-body first">
             <chef-heading data-cy="page-title">{{ server?.name }}</chef-heading>
             <ul>
               <li>
@@ -21,6 +21,10 @@
                 <span class="heading">IP Address</span>
                 <span>{{ server?.ip_address }}</span>
               </li>
+            </ul>
+          </div>
+          <div class="summary-body middle">
+            <ul>
               <li>
                 <span class="heading">Web UI Key</span>
                 <span *ngIf="validating" data-cy="valid-webui-key" class="webUIKeyStatus">Validating...</span>
@@ -34,8 +38,18 @@
                   >Update</a>
                 </span>
               </li>
+              <li>
+                <span class="heading">Org &amp; User last synced</span>
+                <span>Thu, Feb 04, 12:00:00 UTC</span>
+              </li>
             </ul>
           </div>
+          <div class="summary-body last">
+            <app-authorized [allOf]="['/api/v0/infra/servers/{server_id}', 'put', [server?.id]]">
+              <chef-button id="sync-button" class="sync-button" secondary primary data-cy="sync-button">Sync Org and Users
+              </chef-button>
+            </app-authorized>
+          </div>
         </div>
         <chef-tab-selector [value]="tabValue" (change)="onSelectedTab($event)">
           <chef-option value='orgs' data-cy="orgs-tab">Orgs</chef-option>
diff --git a/components/automate-ui/src/app/modules/infra-proxy/chef-server-details/chef-server-details.component.scss b/components/automate-ui/src/app/modules/infra-proxy/chef-server-details/chef-server-details.component.scss
index f7df6cda270..776c3e1fa6c 100644
--- a/components/automate-ui/src/app/modules/infra-proxy/chef-server-details/chef-server-details.component.scss
+++ b/components/automate-ui/src/app/modules/infra-proxy/chef-server-details/chef-server-details.component.scss
@@ -9,13 +9,26 @@ chef-page-header {
   border: 0.5px solid $chef-key-tab;
   border-radius: 4px;
   margin-bottom: 4em;
-  padding: 1em 0 4em;
+  padding: 1em 0 2em;
   background: $chef-white;
 
   .summary-body {
+    display: inline-block;
     font-size: 14px;
     padding: 0 1em;
 
+    &.first {
+      width: 33%;
+    }
+
+    &.middle {
+      width: 40%;
+    }
+
+    &.last {
+      width: 25%;
+    }
+
     .meta-head {
       text-transform: uppercase;
       font-size: 15px;
@@ -30,7 +43,7 @@ chef-page-header {
 
       li {
         display: flex;
-        margin-bottom: 5px;
+        margin-bottom: 15px;
 
         span {
           font-size: 14px;
@@ -40,7 +53,7 @@ chef-page-header {
           &.heading {
             display: inline-block;
             font-weight: bold;
-            width: 30%;
+            width: 50%;
           }
 
           &.webUIKeyStatus {
@@ -64,6 +77,11 @@ chef-page-header {
         }
       }
     }
+
+    .sync-button {
+      float: right;
+      margin-bottom: 0;
+    }
   }
 }