From 351e7350039cce58b4f2ff904e0b260509561160 Mon Sep 17 00:00:00 2001
From: Lina <lina.lumburovska@kern.ai>
Date: Mon, 5 Sep 2022 18:43:39 +0200
Subject: [PATCH 01/15] Update logic start

---
 .../sidebar-pm/sidebar-pm.component.html      | 30 +++++++++++++++++--
 .../sidebar-pm/sidebar-pm.component.ts        |  7 +++++
 .../services/config/config-apollo.service.ts  |  9 ++++++
 .../base/services/config/config-queries.ts    | 13 +++++++-
 4 files changed, 55 insertions(+), 4 deletions(-)

diff --git a/src/app/base/components/sidebar-pm/sidebar-pm.component.html b/src/app/base/components/sidebar-pm/sidebar-pm.component.html
index f5f52b23..e62f984b 100644
--- a/src/app/base/components/sidebar-pm/sidebar-pm.component.html
+++ b/src/app/base/components/sidebar-pm/sidebar-pm.component.html
@@ -192,9 +192,9 @@
                     </button>
                 </div>
                 <div class="flex-shrink-0 flex py-6 justify-center">
-                    <a data-tip="Changelog" target="_blank" rel="noopener noreferrer"
-                        class="z-50 tooltip tooltip-right cursor-pointer select-none text-white"
-                        href="https://docs.kern.ai/changelog">v1.1.1</a>
+                    <label data-tip="Changelog" for="change-log"
+                      class="z-50 tooltip tooltip-right cursor-pointer select-none text-white">v1.1.1</label>
+                    
                 </div>
             </div>
         </div>
@@ -206,4 +206,28 @@
             <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
         </svg>
     </div>
+</div>
+
+<input type="checkbox" id="change-log" class="modal-toggle">
+<div class="modal" id="change-log">
+    <div class="modal-box text-black bg-white justify-center">
+        <div class="flex flex-grow justify-center text-lg leading-6 text-gray-900 font-medium">
+            Changelog information</div>
+
+        <div class="flex flex-col justify-center">
+            <div *ngFor="let service of versionOverview">
+                {{service.service}}
+                {{service.installedVersion}}
+                {{service.checkedVersion}}
+                {{service.lastChecked}}
+                {{service.link}}
+
+            </div>
+        </div>
+
+        <div class="modal-action">
+            <label for="change-log"
+                class="mr-2 bg-white text-gray-700 text-xs font-semibold mr-4 px-4 py-2 rounded border border-gray-300 cursor-pointer hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 inline-block">Close</label>
+        </div>
+    </div>
 </div>
\ No newline at end of file
diff --git a/src/app/base/components/sidebar-pm/sidebar-pm.component.ts b/src/app/base/components/sidebar-pm/sidebar-pm.component.ts
index 0ffc4558..3c4c2327 100644
--- a/src/app/base/components/sidebar-pm/sidebar-pm.component.ts
+++ b/src/app/base/components/sidebar-pm/sidebar-pm.component.ts
@@ -14,6 +14,7 @@ import { OrganizationApolloService } from '../../services/organization/organizat
 import { RouteService } from '../../services/route.service';
 import { DOCUMENT } from '@angular/common';
 import { ProjectApolloService } from '../../services/project/project-apollo.service';
+import { ConfigApolloService } from '../../services/config/config-apollo.service';
 
 
 @Component({
@@ -60,6 +61,7 @@ export class SidebarPmComponent implements OnInit {
   isFullscreen: boolean = false;
   @Output() firstName = new EventEmitter<Observable<any>>();
   toggleClass = 'ft-maximize';
+  versionOverview: any[] = [];
 
   constructor(
     private organizationService: OrganizationApolloService,
@@ -67,6 +69,7 @@ export class SidebarPmComponent implements OnInit {
     private activatedRoute: ActivatedRoute,
     private auth: AuthApiService,
     private projectApolloService: ProjectApolloService,
+    private configService: ConfigApolloService,
     @Inject(DOCUMENT) private document: any
   ) { }
 
@@ -89,6 +92,10 @@ export class SidebarPmComponent implements OnInit {
         })
       )
       .subscribe());
+    
+    this.subscriptions$.push(this.configService
+      .getVersionOverview()
+      .subscribe((versionOverview) => this.versionOverview = versionOverview));
   }
 
   onDestroy() {
diff --git a/src/app/base/services/config/config-apollo.service.ts b/src/app/base/services/config/config-apollo.service.ts
index bc4b8f59..91ae45eb 100644
--- a/src/app/base/services/config/config-apollo.service.ts
+++ b/src/app/base/services/config/config-apollo.service.ts
@@ -60,4 +60,13 @@ export class ConfigApolloService {
       .pipe(map((result) => JSON.parse(result['data']['getBlackWhiteDemo'])));
   }
 
+  getVersionOverview() {
+    return this.apollo
+      .query({
+        query: queries.GET_VERSION_OVERVIEW,
+        fetchPolicy: 'no-cache',
+      })
+      .pipe(map((result) => result['data']['versionOverview']));
+  }
+
 }
diff --git a/src/app/base/services/config/config-queries.ts b/src/app/base/services/config/config-queries.ts
index 6cb9cda7..f5f442ce 100644
--- a/src/app/base/services/config/config-queries.ts
+++ b/src/app/base/services/config/config-queries.ts
@@ -62,5 +62,16 @@ export const queries = {
   {
     getBlackWhiteDemo
   }  
-  `
+  `,
+  GET_VERSION_OVERVIEW: gql`
+    query {
+      versionOverview {
+        service
+        installedVersion
+        checkedVersion
+        lastChecked
+        link
+      }
+    }
+  `,
 };

From 05d04aa11bcfb0e391f3957d6352fde7317c9024 Mon Sep 17 00:00:00 2001
From: Lina <lina.lumburovska@kern.ai>
Date: Tue, 6 Sep 2022 11:48:51 +0200
Subject: [PATCH 02/15] Modal for version overview and added navigation to
 modal for steps update

---
 .../sidebar-pm/sidebar-pm.component.html      | 113 +++++++++++++++---
 .../sidebar-pm/sidebar-pm.component.ts        |  29 ++++-
 2 files changed, 124 insertions(+), 18 deletions(-)

diff --git a/src/app/base/components/sidebar-pm/sidebar-pm.component.html b/src/app/base/components/sidebar-pm/sidebar-pm.component.html
index e62f984b..03ad59e3 100644
--- a/src/app/base/components/sidebar-pm/sidebar-pm.component.html
+++ b/src/app/base/components/sidebar-pm/sidebar-pm.component.html
@@ -192,7 +192,7 @@
                     </button>
                 </div>
                 <div class="flex-shrink-0 flex py-6 justify-center">
-                    <label data-tip="Changelog" for="change-log"
+                    <label data-tip="Changelog" for="version-overview"
                       class="z-50 tooltip tooltip-right cursor-pointer select-none text-white">v1.1.1</label>
                     
                 </div>
@@ -208,26 +208,107 @@
     </div>
 </div>
 
-<input type="checkbox" id="change-log" class="modal-toggle">
-<div class="modal" id="change-log">
-    <div class="modal-box text-black bg-white justify-center">
-        <div class="flex flex-grow justify-center text-lg leading-6 text-gray-900 font-medium">
-            Changelog information</div>
-
-        <div class="flex flex-col justify-center">
-            <div *ngFor="let service of versionOverview">
-                {{service.service}}
-                {{service.installedVersion}}
-                {{service.checkedVersion}}
-                {{service.lastChecked}}
-                {{service.link}}
+<input #versionOverviewModal type="checkbox" id="version-overview" class="modal-toggle">
+<div class="modal">
+    <div class="modal-box text-black bg-white justify-center modal-configuration text-center">
+        <div class="inline-block justify-center text-lg leading-6 text-gray-900 font-medium">
+            Version overview
 
+            <a class="text-green-800 text-base font-medium ml-3" href="https://docs.kern.ai/changelog" target="_blank">
+                <span class="leading-5">Changelog</span>
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block" fill="none"
+                    viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                    <path stroke-linecap="round" stroke-linejoin="round"
+                        d="M13 7l5 5m0 0l-5 5m5-5H6" />
+                </svg>
+            </a> 
+        </div>
+       
+        <div class="inline-block min-w-full align-middle mt-3">
+            <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
+                <table class="min-w-full divide-y divide-gray-300">
+                    <thead class="bg-gray-50">
+                        <tr>
+                            <th scope="col"
+                                class="px-3 py-2 text-center text-xs font-medium uppercase tracking-wide text-gray-500">
+                                Service</th>
+                            <th scope="col"
+                                class="px-3 py-2 text-center text-xs font-medium uppercase tracking-wide text-gray-500">
+                                Installed version</th>
+                            <th scope="col"
+                                class="px-3 py-2 text-center text-xs font-medium uppercase tracking-wide text-gray-500">
+                                Remote version</th>
+                            <th scope="col"
+                                class="px-3 py-2 text-center text-xs font-medium uppercase tracking-wide text-gray-500">
+                                Last checked</th>
+                            <th scope="col"
+                                class="px-3 py-2 text-center text-xs font-medium uppercase tracking-wide text-gray-500">
+                                Link</th>
+                        </tr>
+                    </thead>
+                    <tbody class="divide-y divide-gray-200">
+                        <tr *ngFor="let service of versionOverview">
+                            <td class="text-center px-3 py-2 text-sm text-gray-500">
+                                {{service.service}}
+                            </td>
+                            <td class="text-center px-3 py-2 text-sm text-gray-500">
+                                {{service.installedVersion}}
+                            </td>
+                            <td class="text-center px-3 py-2 text-sm text-gray-500">
+                                <span class="inline-block mr-2">{{service.checkedVersion}}</span>
+                                <span *ngIf="service.hasNewerVersion" class="tooltip tooltip-right" data-tip="Newer version available">
+                                    <svg xmlns="http://www.w3.org/2000/svg" 
+                                        class="icon icon-tabler icon-tabler-alert-circle inline-block text-yellow-700" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                                        <circle cx="12" cy="12" r="9"></circle>
+                                        <line x1="12" y1="8" x2="12" y2="12"></line>
+                                        <line x1="12" y1="16" x2="12.01" y2="16"></line>
+                                    </svg>
+                                </span>
+                            </td>
+                            <td class="text-center px-3 py-2 text-sm text-gray-500">
+                                {{service.parseDate}}
+                            </td>
+                            <td class="text-center px-3 py-2 text-sm text-gray-500">
+                                <a [href]="service.link" target="_blank" class="h4 w-4 m-auto block"
+                                    style="padding:0px"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 m-auto"
+                                    fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                        d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+                                </svg></a>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
             </div>
         </div>
 
         <div class="modal-action">
-            <label for="change-log"
-                class="mr-2 bg-white text-gray-700 text-xs font-semibold mr-4 px-4 py-2 rounded border border-gray-300 cursor-pointer hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 inline-block">Close</label>
+            <label (click)="howToUpdate()"
+                class="mr-2 bg-green-100 text-green-700 border border-green-400 text-xs font-semibold px-4 py-2 rounded-md cursor-pointer hover:bg-green-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">How to update</label>
+            <label for="version-overview"
+                class="bg-white text-gray-700 text-xs font-semibold mr-4 px-4 py-2 rounded border border-gray-300 cursor-pointer hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 inline-block">Close</label>
+        </div>
+    </div>
+</div>
+
+<input #stepsUpdate type="checkbox" id="steps-update" class="modal-toggle">
+<div class="modal">
+    <div class="modal-box text-black bg-white justify-center modal-configuration text-center">
+        <div class="inline-block justify-center text-lg leading-6 text-gray-900 font-medium">
+            <button class="text-green-800 text-base font-medium mr-3" (click)="back()">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block" fill="none"
+                    viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M7 16l-4-4m0 0l4-4m-4 4h18" />
+                </svg>
+                <span class="leading-5">Go back</span>
+            </button> 
+            How to update
+        </div>
+
+        <div class="modal-action">
+            <label for="steps-update"
+                class="bg-white text-gray-700 text-xs font-semibold mr-4 px-4 py-2 rounded border border-gray-300 cursor-pointer hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 inline-block">Close</label>
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/app/base/components/sidebar-pm/sidebar-pm.component.ts b/src/app/base/components/sidebar-pm/sidebar-pm.component.ts
index 3c4c2327..39fad260 100644
--- a/src/app/base/components/sidebar-pm/sidebar-pm.component.ts
+++ b/src/app/base/components/sidebar-pm/sidebar-pm.component.ts
@@ -5,7 +5,7 @@ import {
   transition,
   trigger,
 } from '@angular/animations';
-import { Component, Inject, EventEmitter, OnInit, Output, Input, HostListener } from '@angular/core';
+import { Component, Inject, EventEmitter, OnInit, Output, Input, HostListener, ViewChild, ElementRef } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Observable, Subscription } from 'rxjs';
 import { tap } from 'rxjs/operators';
@@ -15,6 +15,7 @@ import { RouteService } from '../../services/route.service';
 import { DOCUMENT } from '@angular/common';
 import { ProjectApolloService } from '../../services/project/project-apollo.service';
 import { ConfigApolloService } from '../../services/config/config-apollo.service';
+import { dateAsUTCDate } from 'src/app/util/helper-functions';
 
 
 @Component({
@@ -62,6 +63,9 @@ export class SidebarPmComponent implements OnInit {
   @Output() firstName = new EventEmitter<Observable<any>>();
   toggleClass = 'ft-maximize';
   versionOverview: any[] = [];
+  @ViewChild('versionOverviewModal', { read: ElementRef }) versionOverviewModal: ElementRef;
+  @ViewChild('stepsUpdate', { read: ElementRef }) stepsUpdate: ElementRef;
+
 
   constructor(
     private organizationService: OrganizationApolloService,
@@ -95,7 +99,13 @@ export class SidebarPmComponent implements OnInit {
     
     this.subscriptions$.push(this.configService
       .getVersionOverview()
-      .subscribe((versionOverview) => this.versionOverview = versionOverview));
+      .subscribe((versionOverview) => {
+        this.versionOverview = versionOverview;
+        this.versionOverview.forEach((version)=> {
+          version.parseDate = this.parseUTC(version.lastChecked);
+          version.hasNewerVersion = version.installedVersion !== version.checkedVersion;
+        });
+      }));
   }
 
   onDestroy() {
@@ -168,4 +178,19 @@ export class SidebarPmComponent implements OnInit {
 
     }
   }
+
+  parseUTC(utc: string) {
+    const utcDate = dateAsUTCDate(new Date(utc));
+    return utcDate.toLocaleString();
+  }
+
+  howToUpdate() {
+    this.versionOverviewModal.nativeElement.checked = false;
+    this.stepsUpdate.nativeElement.checked = true;
+  }
+
+  back() {
+    this.stepsUpdate.nativeElement.checked = false;
+    this.versionOverviewModal.nativeElement.checked = true;
+  }
 }

From 91c6ddb0a9a203bb3f3d5676272d246fad988e5e Mon Sep 17 00:00:00 2001
From: Lina <lina.lumburovska@kern.ai>
Date: Tue, 6 Sep 2022 12:09:23 +0200
Subject: [PATCH 03/15] Renamed checked version to remote version and added
 tabs for OS

---
 .../sidebar-pm/sidebar-pm.component.html      | 25 ++++++++++++++++++-
 .../sidebar-pm/sidebar-pm.component.scss      |  4 +++
 .../sidebar-pm/sidebar-pm.component.ts        |  8 ++++--
 .../base/services/config/config-queries.ts    |  2 +-
 4 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/src/app/base/components/sidebar-pm/sidebar-pm.component.html b/src/app/base/components/sidebar-pm/sidebar-pm.component.html
index 03ad59e3..f192ebb6 100644
--- a/src/app/base/components/sidebar-pm/sidebar-pm.component.html
+++ b/src/app/base/components/sidebar-pm/sidebar-pm.component.html
@@ -255,7 +255,7 @@
                                 {{service.installedVersion}}
                             </td>
                             <td class="text-center px-3 py-2 text-sm text-gray-500">
-                                <span class="inline-block mr-2">{{service.checkedVersion}}</span>
+                                <span class="inline-block mr-2">{{service.remoteVersion}}</span>
                                 <span *ngIf="service.hasNewerVersion" class="tooltip tooltip-right" data-tip="Newer version available">
                                     <svg xmlns="http://www.w3.org/2000/svg" 
                                         class="icon icon-tabler icon-tabler-alert-circle inline-block text-yellow-700" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
@@ -306,6 +306,29 @@
             How to update
         </div>
 
+        <div class="flex border-b-2 border-b-gray-200 max-w-full overflow-x-auto">
+            <div (click)="toggleTabs(0)"
+                [ngClass]="openTab == 0 ? 'text-indigo-700 border-bottom' : 'text-gray-500' "
+                class="text-sm leading-5 font-medium mr-10 cursor-pointer py-5">
+                Bash Users (Linux/Mac)
+            </div>
+            <div (click)="toggleTabs(1)"
+                [ngClass]="openTab == 1 ? 'text-indigo-700 border-bottom' : 'text-gray-500' "
+                class="text-sm leading-5 font-medium mr-10 cursor-pointer py-5">
+                CLI Users (installed refinery with pip)
+            </div>
+            <div (click)="toggleTabs(2)"
+                [ngClass]="openTab == 2 ? 'text-indigo-700 border-bottom' : 'text-gray-500' "
+                class="text-sm leading-5 font-medium mr-10 cursor-pointer py-5">
+                cmd (Windows terminal)
+            </div>
+            <div (click)="toggleTabs(3)"
+                [ngClass]="openTab == 3 ? 'text-indigo-700 border-bottom' : 'text-gray-500' "
+                class="text-sm leading-5 font-medium mr-10 cursor-pointer py-5">
+                Executing from explorer (Windows from File Explorer)
+            </div>
+        </div>
+
         <div class="modal-action">
             <label for="steps-update"
                 class="bg-white text-gray-700 text-xs font-semibold mr-4 px-4 py-2 rounded border border-gray-300 cursor-pointer hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 inline-block">Close</label>
diff --git a/src/app/base/components/sidebar-pm/sidebar-pm.component.scss b/src/app/base/components/sidebar-pm/sidebar-pm.component.scss
index 8fdbe3c4..d10f12a4 100644
--- a/src/app/base/components/sidebar-pm/sidebar-pm.component.scss
+++ b/src/app/base/components/sidebar-pm/sidebar-pm.component.scss
@@ -1,3 +1,7 @@
 .overflow-initial {
   overflow: initial;
 }
+
+.border-bottom {
+  border-bottom: 1px solid #4F46E5;
+}
\ No newline at end of file
diff --git a/src/app/base/components/sidebar-pm/sidebar-pm.component.ts b/src/app/base/components/sidebar-pm/sidebar-pm.component.ts
index 39fad260..303b505d 100644
--- a/src/app/base/components/sidebar-pm/sidebar-pm.component.ts
+++ b/src/app/base/components/sidebar-pm/sidebar-pm.component.ts
@@ -65,7 +65,7 @@ export class SidebarPmComponent implements OnInit {
   versionOverview: any[] = [];
   @ViewChild('versionOverviewModal', { read: ElementRef }) versionOverviewModal: ElementRef;
   @ViewChild('stepsUpdate', { read: ElementRef }) stepsUpdate: ElementRef;
-
+  openTab: number = 0;
 
   constructor(
     private organizationService: OrganizationApolloService,
@@ -103,7 +103,7 @@ export class SidebarPmComponent implements OnInit {
         this.versionOverview = versionOverview;
         this.versionOverview.forEach((version)=> {
           version.parseDate = this.parseUTC(version.lastChecked);
-          version.hasNewerVersion = version.installedVersion !== version.checkedVersion;
+          version.hasNewerVersion = version.installedVersion !== version.remoteVersion;
         });
       }));
   }
@@ -193,4 +193,8 @@ export class SidebarPmComponent implements OnInit {
     this.stepsUpdate.nativeElement.checked = false;
     this.versionOverviewModal.nativeElement.checked = true;
   }
+
+  toggleTabs(index: number) {
+    this.openTab = index;
+  }
 }
diff --git a/src/app/base/services/config/config-queries.ts b/src/app/base/services/config/config-queries.ts
index f5f442ce..f75fd56b 100644
--- a/src/app/base/services/config/config-queries.ts
+++ b/src/app/base/services/config/config-queries.ts
@@ -68,7 +68,7 @@ export const queries = {
       versionOverview {
         service
         installedVersion
-        checkedVersion
+        remoteVersion
         lastChecked
         link
       }

From c58691cd9d70eff4d52c49f73a3ee9b24c909f49 Mon Sep 17 00:00:00 2001
From: Lina <lina.lumburovska@kern.ai>
Date: Tue, 6 Sep 2022 14:19:23 +0200
Subject: [PATCH 04/15] Steps for update added

---
 .../sidebar-pm/sidebar-pm.component.html      | 81 ++++++++++++++++++-
 .../sidebar-pm/sidebar-pm.component.scss      | 11 +++
 .../sidebar-pm/sidebar-pm.component.ts        |  4 +
 3 files changed, 92 insertions(+), 4 deletions(-)

diff --git a/src/app/base/components/sidebar-pm/sidebar-pm.component.html b/src/app/base/components/sidebar-pm/sidebar-pm.component.html
index f192ebb6..640d80f9 100644
--- a/src/app/base/components/sidebar-pm/sidebar-pm.component.html
+++ b/src/app/base/components/sidebar-pm/sidebar-pm.component.html
@@ -294,8 +294,8 @@
 
 <input #stepsUpdate type="checkbox" id="steps-update" class="modal-toggle">
 <div class="modal">
-    <div class="modal-box text-black bg-white justify-center modal-configuration text-center">
-        <div class="inline-block justify-center text-lg leading-6 text-gray-900 font-medium">
+    <div class="modal-box text-black bg-white justify-center modal-configuration">
+        <div class="text-center">
             <button class="text-green-800 text-base font-medium mr-3" (click)="back()">
                 <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block" fill="none"
                     viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
@@ -303,10 +303,12 @@
                 </svg>
                 <span class="leading-5">Go back</span>
             </button> 
-            How to update
+            <div class="inline-block justify-center text-lg leading-6 text-gray-900 font-medium">
+                How to update
+            </div>
         </div>
 
-        <div class="flex border-b-2 border-b-gray-200 max-w-full overflow-x-auto">
+        <div class="flex border-b-2 border-b-gray-200 max-w-full overflow-x-auto text-center">
             <div (click)="toggleTabs(0)"
                 [ngClass]="openTab == 0 ? 'text-indigo-700 border-bottom' : 'text-gray-500' "
                 class="text-sm leading-5 font-medium mr-10 cursor-pointer py-5">
@@ -329,6 +331,77 @@
             </div>
         </div>
 
+        <div class="mt-3 px-5">
+            <ng-container [ngSwitch]="openTab">
+                <ng-template [ngSwitchCase]="0">
+                    <ol class="font-dmMono">
+                        <li>Open a Terminal</li>
+                        <li>Change to refinery directory (using cd) - 
+                            <span class="bg-gray-200 text-red-700 rounded-md p-1">$ 
+                                <span class="cursor-pointer tooltip tooltip-top" data-tip="Click to copy" (click)="copyToClipboard('cd /path/to/refinery')">cd /path/to/refinery</span>
+                            </span>
+                        </li>
+                        <li>Run the update script - 
+                            <span class="bg-gray-200 text-red-700 rounded-md p-1">$ 
+                                <span class="cursor-pointer tooltip tooltip-top" data-tip="Click to copy" (click)="copyToClipboard('./update')">./update</span>
+                            </span>
+                        </li>
+                    </ol>
+                </ng-template>
+                <ng-template [ngSwitchCase]="1">
+                    <ol class="font-dmMono">
+                        <li>Open a Terminal</li>
+                        <li>Change to refinery directory 
+                            <ol class="list-letters">
+                                <li>Linux/Mac - 
+                                    <span class="bg-gray-200 text-red-700 rounded-md p-1">$ 
+                                        <span class="cursor-pointer tooltip tooltip-top" data-tip="Click to copy" (click)="copyToClipboard('cd path/to/refinery')">cd path/to/refinery</span>
+                                    </span>
+                                </li>
+                                <li>Windows -
+                                    <span class="bg-gray-200 text-red-700 rounded-md p-1">$ 
+                                        <span class="cursor-pointer tooltip tooltip-top" data-tip="Click to copy" (click)="copyToClipboard('cd path\to\refinery')">cd path\to\refinery</span>
+                                    </span>
+                                </li>
+                            </ol>
+                        </li>
+                        <li>
+                            Run the CLI update command
+                            <span class="bg-gray-200 text-red-700 rounded-md p-1">$ 
+                                <span class="cursor-pointer tooltip tooltip-top" data-tip="Click to copy" (click)="copyToClipboard('refinery update')">refinery update</span>
+                            </span>
+                        </li>
+                    </ol>
+                </ng-template>
+                <ng-template [ngSwitchCase]="2">
+                    <ol class="font-dmMono">
+                        <li>Open a Terminal</li>
+                        <li>Change to refinery directory
+                            <span class="bg-gray-200 text-red-700 rounded-md p-1">$ 
+                                <span class="cursor-pointer tooltip tooltip-top" data-tip="Click to copy" (click)="copyToClipboard('cd path\to\refinery')">cd path\to\refinery</span>
+                            </span>
+                        </li>
+                        <li>Run the update script - 
+                            <span class="bg-gray-200 text-red-700 rounded-md p-1">$ 
+                                <span class="cursor-pointer tooltip tooltip-top" data-tip="Click to copy" (click)="copyToClipboard('update.bat')">update.bat</span>
+                            </span>
+                        </li>
+                    </ol>
+                </ng-template>
+                <ng-template [ngSwitchCase]="3">
+                    <ol class="font-dmMono">
+                        <li>Open the File Explorer</li>
+                        <li>Navigate to the refinery directory</li>
+                        <li>Launch the update script by double-clicking 
+                            <span class="bg-gray-200 text-red-700 rounded-md p-1">$ 
+                                <span class="cursor-pointer tooltip tooltip-top" data-tip="Click to copy" (click)="copyToClipboard('update.bat')">update.bat</span>
+                            </span>
+                        </li>
+                    </ol>
+                </ng-template>
+            </ng-container>
+        </div>
+
         <div class="modal-action">
             <label for="steps-update"
                 class="bg-white text-gray-700 text-xs font-semibold mr-4 px-4 py-2 rounded border border-gray-300 cursor-pointer hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 inline-block">Close</label>
diff --git a/src/app/base/components/sidebar-pm/sidebar-pm.component.scss b/src/app/base/components/sidebar-pm/sidebar-pm.component.scss
index d10f12a4..7237ca7b 100644
--- a/src/app/base/components/sidebar-pm/sidebar-pm.component.scss
+++ b/src/app/base/components/sidebar-pm/sidebar-pm.component.scss
@@ -4,4 +4,15 @@
 
 .border-bottom {
   border-bottom: 1px solid #4F46E5;
+}
+
+ol {
+  list-style: decimal;
+  li {
+    margin-top: 8px;
+  }
+}
+
+ol.list-letters {
+  list-style-type: lower-alpha !important;
 }
\ No newline at end of file
diff --git a/src/app/base/components/sidebar-pm/sidebar-pm.component.ts b/src/app/base/components/sidebar-pm/sidebar-pm.component.ts
index 303b505d..2fc16c7b 100644
--- a/src/app/base/components/sidebar-pm/sidebar-pm.component.ts
+++ b/src/app/base/components/sidebar-pm/sidebar-pm.component.ts
@@ -197,4 +197,8 @@ export class SidebarPmComponent implements OnInit {
   toggleTabs(index: number) {
     this.openTab = index;
   }
+
+  copyToClipboard(textToCopy) {
+    navigator.clipboard.writeText(textToCopy);
+  }
 }

From aeb328237070881ff7c94c8ea585882b1b4b43a4 Mon Sep 17 00:00:00 2001
From: Lina <lina.lumburovska@kern.ai>
Date: Tue, 6 Sep 2022 15:57:07 +0200
Subject: [PATCH 05/15] Added new fields for checking updates

---
 .../sidebar-pm/sidebar-pm.component.html      | 23 +++++++---
 .../sidebar-pm/sidebar-pm.component.ts        | 42 +++++++++++++------
 .../services/config/config-apollo.service.ts  |  9 ++++
 .../base/services/config/config-queries.ts    |  6 +++
 4 files changed, 62 insertions(+), 18 deletions(-)

diff --git a/src/app/base/components/sidebar-pm/sidebar-pm.component.html b/src/app/base/components/sidebar-pm/sidebar-pm.component.html
index 640d80f9..4f71d297 100644
--- a/src/app/base/components/sidebar-pm/sidebar-pm.component.html
+++ b/src/app/base/components/sidebar-pm/sidebar-pm.component.html
@@ -192,9 +192,18 @@
                     </button>
                 </div>
                 <div class="flex-shrink-0 flex py-6 justify-center">
-                    <label data-tip="Changelog" for="version-overview"
-                      class="z-50 tooltip tooltip-right cursor-pointer select-none text-white">v1.1.1</label>
-                    
+                    <label data-tip="Changelog" for="version-overview" (click)="requestVersionOverview()"
+                      class="z-50 tooltip tooltip-right cursor-pointer select-none text-white ml-1">v1.1.1
+                        <span *ngIf="(hasUpdates$ | async)" class="tooltip tooltip-right" data-tip="Newer version available">
+                            <svg xmlns="http://www.w3.org/2000/svg" 
+                                class="icon icon-tabler icon-tabler-alert-circle inline-block text-yellow-700" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                                <circle cx="12" cy="12" r="9"></circle>
+                                <line x1="12" y1="8" x2="12" y2="12"></line>
+                                <line x1="12" y1="16" x2="12.01" y2="16"></line>
+                            </svg>
+                        </span>
+                    </label>
                 </div>
             </div>
         </div>
@@ -224,7 +233,7 @@
             </a> 
         </div>
        
-        <div class="inline-block min-w-full align-middle mt-3">
+        <div class="inline-block min-w-full align-middle mt-3" *ngIf="versionOverview">
             <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
                 <table class="min-w-full divide-y divide-gray-300">
                     <thead class="bg-gray-50">
@@ -256,7 +265,7 @@
                             </td>
                             <td class="text-center px-3 py-2 text-sm text-gray-500">
                                 <span class="inline-block mr-2">{{service.remoteVersion}}</span>
-                                <span *ngIf="service.hasNewerVersion" class="tooltip tooltip-right" data-tip="Newer version available">
+                                <span *ngIf="service.remoteHasNewer" class="tooltip tooltip-right" data-tip="Newer version available">
                                     <svg xmlns="http://www.w3.org/2000/svg" 
                                         class="icon icon-tabler icon-tabler-alert-circle inline-block text-yellow-700" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                         <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
@@ -283,8 +292,10 @@
             </div>
         </div>
 
+        <kern-loading *ngIf="versionOverview == null" color="yellow" class="mt-3"></kern-loading>
+
         <div class="modal-action">
-            <label (click)="howToUpdate()"
+            <label (click)="howToUpdate()" *ngIf="isManaged"
                 class="mr-2 bg-green-100 text-green-700 border border-green-400 text-xs font-semibold px-4 py-2 rounded-md cursor-pointer hover:bg-green-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">How to update</label>
             <label for="version-overview"
                 class="bg-white text-gray-700 text-xs font-semibold mr-4 px-4 py-2 rounded border border-gray-300 cursor-pointer hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 inline-block">Close</label>
diff --git a/src/app/base/components/sidebar-pm/sidebar-pm.component.ts b/src/app/base/components/sidebar-pm/sidebar-pm.component.ts
index 2fc16c7b..d0e0bdcc 100644
--- a/src/app/base/components/sidebar-pm/sidebar-pm.component.ts
+++ b/src/app/base/components/sidebar-pm/sidebar-pm.component.ts
@@ -7,8 +7,8 @@ import {
 } from '@angular/animations';
 import { Component, Inject, EventEmitter, OnInit, Output, Input, HostListener, ViewChild, ElementRef } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { Observable, Subscription } from 'rxjs';
-import { tap } from 'rxjs/operators';
+import { Observable, Subscription, timer } from 'rxjs';
+import { first, tap } from 'rxjs/operators';
 import { AuthApiService } from '../../services/auth-api.service';
 import { OrganizationApolloService } from '../../services/organization/organization-apollo.service';
 import { RouteService } from '../../services/route.service';
@@ -16,6 +16,7 @@ import { DOCUMENT } from '@angular/common';
 import { ProjectApolloService } from '../../services/project/project-apollo.service';
 import { ConfigApolloService } from '../../services/config/config-apollo.service';
 import { dateAsUTCDate } from 'src/app/util/helper-functions';
+import { ConfigManager } from '../../services/config-service';
 
 
 @Component({
@@ -66,6 +67,8 @@ export class SidebarPmComponent implements OnInit {
   @ViewChild('versionOverviewModal', { read: ElementRef }) versionOverviewModal: ElementRef;
   @ViewChild('stepsUpdate', { read: ElementRef }) stepsUpdate: ElementRef;
   openTab: number = 0;
+  isManaged: boolean = true;
+  hasUpdates$: Observable<boolean>;
 
   constructor(
     private organizationService: OrganizationApolloService,
@@ -96,16 +99,23 @@ export class SidebarPmComponent implements OnInit {
         })
       )
       .subscribe());
-    
-    this.subscriptions$.push(this.configService
-      .getVersionOverview()
-      .subscribe((versionOverview) => {
-        this.versionOverview = versionOverview;
-        this.versionOverview.forEach((version)=> {
-          version.parseDate = this.parseUTC(version.lastChecked);
-          version.hasNewerVersion = version.installedVersion !== version.remoteVersion;
-        });
-      }));
+
+    this.requestVersionOverview();
+    this.checkIfManagedVersion();
+    this.hasUpdates$ = this.configService.hasUpdates();
+  }
+
+  requestVersionOverview() {
+    this.versionOverview = null; 
+    this.configService
+    .getVersionOverview()
+    .pipe(first())
+    .subscribe((versionOverview) => {
+      this.versionOverview = versionOverview;
+      this.versionOverview.forEach((version)=> {
+        version.parseDate = this.parseUTC(version.lastChecked);
+      });
+    });
   }
 
   onDestroy() {
@@ -201,4 +211,12 @@ export class SidebarPmComponent implements OnInit {
   copyToClipboard(textToCopy) {
     navigator.clipboard.writeText(textToCopy);
   }
+
+  checkIfManagedVersion() {
+    if (!ConfigManager.isInit()) {
+      timer(250).subscribe(() => this.checkIfManagedVersion());
+      return;
+    }
+    this.isManaged = ConfigManager.getIsManaged();
+  }
 }
diff --git a/src/app/base/services/config/config-apollo.service.ts b/src/app/base/services/config/config-apollo.service.ts
index 91ae45eb..b9884e9c 100644
--- a/src/app/base/services/config/config-apollo.service.ts
+++ b/src/app/base/services/config/config-apollo.service.ts
@@ -69,4 +69,13 @@ export class ConfigApolloService {
       .pipe(map((result) => result['data']['versionOverview']));
   }
 
+  hasUpdates() {
+    return this.apollo
+      .query({
+        query: queries.GET_HAS_UPDATES,
+        fetchPolicy: 'no-cache',
+      })
+      .pipe(map((result) => result['data']['hasUpdates']));
+  }
+
 }
diff --git a/src/app/base/services/config/config-queries.ts b/src/app/base/services/config/config-queries.ts
index f75fd56b..7944a4b7 100644
--- a/src/app/base/services/config/config-queries.ts
+++ b/src/app/base/services/config/config-queries.ts
@@ -71,7 +71,13 @@ export const queries = {
         remoteVersion
         lastChecked
         link
+        remoteHasNewer
       }
     }
   `,
+
+  GET_HAS_UPDATES: gql`
+  {
+    hasUpdates
+  }`
 };

From 1869deffddcc00bd8090f18ef85ef91f8acac179 Mon Sep 17 00:00:00 2001
From: Lina <lina.lumburovska@kern.ai>
Date: Tue, 6 Sep 2022 16:42:30 +0200
Subject: [PATCH 06/15] Sorted array,align left and scrollable modal body

---
 .../sidebar-pm/sidebar-pm.component.html      | 34 +++++++------------
 .../sidebar-pm/sidebar-pm.component.scss      |  7 +++-
 .../sidebar-pm/sidebar-pm.component.ts        |  1 +
 3 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/src/app/base/components/sidebar-pm/sidebar-pm.component.html b/src/app/base/components/sidebar-pm/sidebar-pm.component.html
index 4f71d297..b3d9ffd6 100644
--- a/src/app/base/components/sidebar-pm/sidebar-pm.component.html
+++ b/src/app/base/components/sidebar-pm/sidebar-pm.component.html
@@ -234,12 +234,12 @@
         </div>
        
         <div class="inline-block min-w-full align-middle mt-3" *ngIf="versionOverview">
-            <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
+            <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg scrollable-size">
                 <table class="min-w-full divide-y divide-gray-300">
                     <thead class="bg-gray-50">
                         <tr>
                             <th scope="col"
-                                class="px-3 py-2 text-center text-xs font-medium uppercase tracking-wide text-gray-500">
+                                class="px-3 py-2 text-left text-xs font-medium uppercase tracking-wide text-gray-500">
                                 Service</th>
                             <th scope="col"
                                 class="px-3 py-2 text-center text-xs font-medium uppercase tracking-wide text-gray-500">
@@ -257,7 +257,7 @@
                     </thead>
                     <tbody class="divide-y divide-gray-200">
                         <tr *ngFor="let service of versionOverview">
-                            <td class="text-center px-3 py-2 text-sm text-gray-500">
+                            <td class="text-left px-3 py-2 text-sm text-gray-500">
                                 {{service.service}}
                             </td>
                             <td class="text-center px-3 py-2 text-sm text-gray-500">
@@ -295,7 +295,7 @@
         <kern-loading *ngIf="versionOverview == null" color="yellow" class="mt-3"></kern-loading>
 
         <div class="modal-action">
-            <label (click)="howToUpdate()" *ngIf="isManaged"
+            <label (click)="howToUpdate()"
                 class="mr-2 bg-green-100 text-green-700 border border-green-400 text-xs font-semibold px-4 py-2 rounded-md cursor-pointer hover:bg-green-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">How to update</label>
             <label for="version-overview"
                 class="bg-white text-gray-700 text-xs font-semibold mr-4 px-4 py-2 rounded border border-gray-300 cursor-pointer hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 inline-block">Close</label>
@@ -348,12 +348,10 @@
                     <ol class="font-dmMono">
                         <li>Open a Terminal</li>
                         <li>Change to refinery directory (using cd) - 
-                            <span class="bg-gray-200 text-red-700 rounded-md p-1">$ 
-                                <span class="cursor-pointer tooltip tooltip-top" data-tip="Click to copy" (click)="copyToClipboard('cd /path/to/refinery')">cd /path/to/refinery</span>
-                            </span>
+                            <span class="bg-gray-200 text-red-700 rounded-md p-1 whitespace-nowrap">$ cd /path/to/refinery</span>
                         </li>
                         <li>Run the update script - 
-                            <span class="bg-gray-200 text-red-700 rounded-md p-1">$ 
+                            <span class="bg-gray-200 text-red-700 rounded-md p-1 whitespace-nowrap">$ 
                                 <span class="cursor-pointer tooltip tooltip-top" data-tip="Click to copy" (click)="copyToClipboard('./update')">./update</span>
                             </span>
                         </li>
@@ -363,22 +361,18 @@
                     <ol class="font-dmMono">
                         <li>Open a Terminal</li>
                         <li>Change to refinery directory 
-                            <ol class="list-letters">
+                            <ol class="list-letters px-8">
                                 <li>Linux/Mac - 
-                                    <span class="bg-gray-200 text-red-700 rounded-md p-1">$ 
-                                        <span class="cursor-pointer tooltip tooltip-top" data-tip="Click to copy" (click)="copyToClipboard('cd path/to/refinery')">cd path/to/refinery</span>
-                                    </span>
+                                    <span class="bg-gray-200 text-red-700 rounded-md p-1 whitespace-nowrap">$ cd path/to/refinery</span>
                                 </li>
                                 <li>Windows -
-                                    <span class="bg-gray-200 text-red-700 rounded-md p-1">$ 
-                                        <span class="cursor-pointer tooltip tooltip-top" data-tip="Click to copy" (click)="copyToClipboard('cd path\to\refinery')">cd path\to\refinery</span>
-                                    </span>
+                                    <span class="bg-gray-200 text-red-700 rounded-md p-1 whitespace-nowrap">cd path\to\refinery</span>
                                 </li>
                             </ol>
                         </li>
                         <li>
                             Run the CLI update command
-                            <span class="bg-gray-200 text-red-700 rounded-md p-1">$ 
+                            <span class="bg-gray-200 text-red-700 rounded-md p-1 whitespace-nowrap">$ 
                                 <span class="cursor-pointer tooltip tooltip-top" data-tip="Click to copy" (click)="copyToClipboard('refinery update')">refinery update</span>
                             </span>
                         </li>
@@ -388,12 +382,10 @@
                     <ol class="font-dmMono">
                         <li>Open a Terminal</li>
                         <li>Change to refinery directory
-                            <span class="bg-gray-200 text-red-700 rounded-md p-1">$ 
-                                <span class="cursor-pointer tooltip tooltip-top" data-tip="Click to copy" (click)="copyToClipboard('cd path\to\refinery')">cd path\to\refinery</span>
-                            </span>
+                            <span class="bg-gray-200 text-red-700 rounded-md p-1 whitespace-nowrap">cd path\to\refinery</span>
                         </li>
                         <li>Run the update script - 
-                            <span class="bg-gray-200 text-red-700 rounded-md p-1">$ 
+                            <span class="bg-gray-200 text-red-700 rounded-md p-1 whitespace-nowrap">
                                 <span class="cursor-pointer tooltip tooltip-top" data-tip="Click to copy" (click)="copyToClipboard('update.bat')">update.bat</span>
                             </span>
                         </li>
@@ -404,7 +396,7 @@
                         <li>Open the File Explorer</li>
                         <li>Navigate to the refinery directory</li>
                         <li>Launch the update script by double-clicking 
-                            <span class="bg-gray-200 text-red-700 rounded-md p-1">$ 
+                            <span class="bg-gray-200 text-red-700 rounded-md p-1 whitespace-nowrap"> 
                                 <span class="cursor-pointer tooltip tooltip-top" data-tip="Click to copy" (click)="copyToClipboard('update.bat')">update.bat</span>
                             </span>
                         </li>
diff --git a/src/app/base/components/sidebar-pm/sidebar-pm.component.scss b/src/app/base/components/sidebar-pm/sidebar-pm.component.scss
index 7237ca7b..7cd6cb5f 100644
--- a/src/app/base/components/sidebar-pm/sidebar-pm.component.scss
+++ b/src/app/base/components/sidebar-pm/sidebar-pm.component.scss
@@ -15,4 +15,9 @@ ol {
 
 ol.list-letters {
   list-style-type: lower-alpha !important;
-}
\ No newline at end of file
+}
+
+.scrollable-size {
+  max-height: calc(100vh - 230px);
+  overflow-y: auto;
+}
diff --git a/src/app/base/components/sidebar-pm/sidebar-pm.component.ts b/src/app/base/components/sidebar-pm/sidebar-pm.component.ts
index d0e0bdcc..3b942651 100644
--- a/src/app/base/components/sidebar-pm/sidebar-pm.component.ts
+++ b/src/app/base/components/sidebar-pm/sidebar-pm.component.ts
@@ -115,6 +115,7 @@ export class SidebarPmComponent implements OnInit {
       this.versionOverview.forEach((version)=> {
         version.parseDate = this.parseUTC(version.lastChecked);
       });
+      this.versionOverview.sort((a, b) => a.service.localeCompare(b.service));
     });
   }
 

From 43c4fc6c5e48abc4c27a8732f88f0e37897180ac Mon Sep 17 00:00:00 2001
From: Lina <lina.lumburovska@kern.ai>
Date: Tue, 6 Sep 2022 17:34:24 +0200
Subject: [PATCH 07/15] Added tooltips for tabs on how to update

---
 .../components/sidebar-pm/sidebar-pm.component.html  | 12 ++++++------
 .../components/sidebar-pm/sidebar-pm.component.scss  |  4 ++++
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/app/base/components/sidebar-pm/sidebar-pm.component.html b/src/app/base/components/sidebar-pm/sidebar-pm.component.html
index b3d9ffd6..c4eeaaa8 100644
--- a/src/app/base/components/sidebar-pm/sidebar-pm.component.html
+++ b/src/app/base/components/sidebar-pm/sidebar-pm.component.html
@@ -295,7 +295,7 @@
         <kern-loading *ngIf="versionOverview == null" color="yellow" class="mt-3"></kern-loading>
 
         <div class="modal-action">
-            <label (click)="howToUpdate()"
+            <label (click)="howToUpdate()" *ngIf="!isManaged"
                 class="mr-2 bg-green-100 text-green-700 border border-green-400 text-xs font-semibold px-4 py-2 rounded-md cursor-pointer hover:bg-green-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">How to update</label>
             <label for="version-overview"
                 class="bg-white text-gray-700 text-xs font-semibold mr-4 px-4 py-2 rounded border border-gray-300 cursor-pointer hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 inline-block">Close</label>
@@ -319,26 +319,26 @@
             </div>
         </div>
 
-        <div class="flex border-b-2 border-b-gray-200 max-w-full overflow-x-auto text-center">
+        <div class="flex border-b-2 border-b-gray-200 max-w-full overflow-x-auto text-center pt-3">
             <div (click)="toggleTabs(0)"
                 [ngClass]="openTab == 0 ? 'text-indigo-700 border-bottom' : 'text-gray-500' "
                 class="text-sm leading-5 font-medium mr-10 cursor-pointer py-5">
-                Bash Users (Linux/Mac)
+                <span class="tooltip tooltip-top tooltip-margin" data-tip="Linux/Mac">Bash users</span>
             </div>
             <div (click)="toggleTabs(1)"
                 [ngClass]="openTab == 1 ? 'text-indigo-700 border-bottom' : 'text-gray-500' "
                 class="text-sm leading-5 font-medium mr-10 cursor-pointer py-5">
-                CLI Users (installed refinery with pip)
+                <span class="tooltip tooltip-top" data-tip="Installed refinery with pip">CLI users</span>
             </div>
             <div (click)="toggleTabs(2)"
                 [ngClass]="openTab == 2 ? 'text-indigo-700 border-bottom' : 'text-gray-500' "
                 class="text-sm leading-5 font-medium mr-10 cursor-pointer py-5">
-                cmd (Windows terminal)
+                <span class="tooltip tooltip-top" data-tip="Windows terminal">cmd</span> 
             </div>
             <div (click)="toggleTabs(3)"
                 [ngClass]="openTab == 3 ? 'text-indigo-700 border-bottom' : 'text-gray-500' "
                 class="text-sm leading-5 font-medium mr-10 cursor-pointer py-5">
-                Executing from explorer (Windows from File Explorer)
+                <span class="tooltip tooltip-top" data-tip="Windows from File Explorer">Executing from explorer</span> 
             </div>
         </div>
 
diff --git a/src/app/base/components/sidebar-pm/sidebar-pm.component.scss b/src/app/base/components/sidebar-pm/sidebar-pm.component.scss
index 7cd6cb5f..8e83cdc5 100644
--- a/src/app/base/components/sidebar-pm/sidebar-pm.component.scss
+++ b/src/app/base/components/sidebar-pm/sidebar-pm.component.scss
@@ -21,3 +21,7 @@ ol.list-letters {
   max-height: calc(100vh - 230px);
   overflow-y: auto;
 }
+
+.tooltip-margin::before {
+  margin-left: 8px;
+}

From 5d2d2f254b513f679b2ec8250c7cf794206573ea Mon Sep 17 00:00:00 2001
From: Lina <lina.lumburovska@kern.ai>
Date: Tue, 6 Sep 2022 18:00:14 +0200
Subject: [PATCH 08/15] Request called only once

---
 src/app/app.component.ts                                 | 1 +
 .../base/components/sidebar-pm/sidebar-pm.component.ts   | 2 +-
 src/app/base/services/config-service.ts                  | 9 +++++++++
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 54ef1892..979b135e 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -53,6 +53,7 @@ export class AppComponent implements OnDestroy, OnInit {
     this.configService.isDemo().pipe(first()).subscribe((v) => ConfigManager.setIsDemo(v));
     this.configService.isAdmin().pipe(first()).subscribe((v) => ConfigManager.setIsAdmin(v));
     this.configService.getBlackWhiteDemo().pipe(first()).subscribe((v) => ConfigManager.setBlackWhiteListDemo(v));
+    this.configService.getVersionOverview().pipe(first()).subscribe((v) => ConfigManager.setVersionOverview(v));
   }
 
 
diff --git a/src/app/base/components/sidebar-pm/sidebar-pm.component.ts b/src/app/base/components/sidebar-pm/sidebar-pm.component.ts
index 3b942651..46675997 100644
--- a/src/app/base/components/sidebar-pm/sidebar-pm.component.ts
+++ b/src/app/base/components/sidebar-pm/sidebar-pm.component.ts
@@ -100,7 +100,6 @@ export class SidebarPmComponent implements OnInit {
       )
       .subscribe());
 
-    this.requestVersionOverview();
     this.checkIfManagedVersion();
     this.hasUpdates$ = this.configService.hasUpdates();
   }
@@ -219,5 +218,6 @@ export class SidebarPmComponent implements OnInit {
       return;
     }
     this.isManaged = ConfigManager.getIsManaged();
+    this.versionOverview = ConfigManager.getVersionOverview();
   }
 }
diff --git a/src/app/base/services/config-service.ts b/src/app/base/services/config-service.ts
index b53bed4d..20ef6ccc 100644
--- a/src/app/base/services/config-service.ts
+++ b/src/app/base/services/config-service.ts
@@ -14,6 +14,7 @@ export class ConfigManager {
     private static blackWhiteListDemo: any;
     private static registedUpdateListeners: Map<Object, () => void> = new Map<Object, () => void>();
     private static justUpdated = false;
+    private static versionOverride: any = [];
 
     //needs to be called once from app (because of the http injection)
     public static initConfigManager(httpClient: HttpClient, configApolloService: ConfigApolloService, isManaged: boolean) {
@@ -118,5 +119,13 @@ export class ConfigManager {
             return false;
         }
     }
+
+    public static setVersionOverview(setVersionOverview: any) {
+        ConfigManager.versionOverride = setVersionOverview;
+    }
+
+    public static getVersionOverview(): any {
+        return ConfigManager.versionOverride;
+    }
 }
 

From c8fffcb0bf10cad54071a87d938e14795b6edaa2 Mon Sep 17 00:00:00 2001
From: Lina <lina.lumburovska@kern.ai>
Date: Wed, 7 Sep 2022 12:23:21 +0200
Subject: [PATCH 09/15] Improvements on query for has updates and tooltip green
 on steps

---
 .../sidebar-pm/sidebar-pm.component.html      | 35 ++++++++-----------
 .../sidebar-pm/sidebar-pm.component.scss      |  4 +++
 .../sidebar-pm/sidebar-pm.component.ts        |  7 ++--
 3 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/app/base/components/sidebar-pm/sidebar-pm.component.html b/src/app/base/components/sidebar-pm/sidebar-pm.component.html
index c4eeaaa8..a14cc557 100644
--- a/src/app/base/components/sidebar-pm/sidebar-pm.component.html
+++ b/src/app/base/components/sidebar-pm/sidebar-pm.component.html
@@ -194,7 +194,7 @@
                 <div class="flex-shrink-0 flex py-6 justify-center">
                     <label data-tip="Changelog" for="version-overview" (click)="requestVersionOverview()"
                       class="z-50 tooltip tooltip-right cursor-pointer select-none text-white ml-1">v1.1.1
-                        <span *ngIf="(hasUpdates$ | async)" class="tooltip tooltip-right" data-tip="Newer version available">
+                        <span *ngIf="hasUpdates" class="tooltip tooltip-right" data-tip="Newer version available">
                             <svg xmlns="http://www.w3.org/2000/svg" 
                                 class="icon icon-tabler icon-tabler-alert-circle inline-block text-yellow-700" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
@@ -306,39 +306,30 @@
 <input #stepsUpdate type="checkbox" id="steps-update" class="modal-toggle">
 <div class="modal">
     <div class="modal-box text-black bg-white justify-center modal-configuration">
-        <div class="text-center">
-            <button class="text-green-800 text-base font-medium mr-3" (click)="back()">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block" fill="none"
-                    viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M7 16l-4-4m0 0l4-4m-4 4h18" />
-                </svg>
-                <span class="leading-5">Go back</span>
-            </button> 
-            <div class="inline-block justify-center text-lg leading-6 text-gray-900 font-medium">
-                How to update
-            </div>
+        <div class="text-center justify-center text-lg leading-6 text-gray-900 font-medium">
+            How to update
         </div>
 
-        <div class="flex border-b-2 border-b-gray-200 max-w-full overflow-x-auto text-center pt-3">
+        <div class="flex border-b-2 border-b-gray-200 max-w-full text-center overflow-visible">
             <div (click)="toggleTabs(0)"
                 [ngClass]="openTab == 0 ? 'text-indigo-700 border-bottom' : 'text-gray-500' "
-                class="text-sm leading-5 font-medium mr-10 cursor-pointer py-5">
-                <span class="tooltip tooltip-top tooltip-margin" data-tip="Linux/Mac">Bash users</span>
+                class="text-sm leading-5 font-medium mr-10 cursor-help py-3">
+                <span class="tooltip tooltip-bottom tooltip-margin border-dotted" data-tip="Linux/Mac">Bash users</span>
             </div>
             <div (click)="toggleTabs(1)"
                 [ngClass]="openTab == 1 ? 'text-indigo-700 border-bottom' : 'text-gray-500' "
-                class="text-sm leading-5 font-medium mr-10 cursor-pointer py-5">
-                <span class="tooltip tooltip-top" data-tip="Installed refinery with pip">CLI users</span>
+                class="text-sm leading-5 font-medium mr-10 cursor-help py-3">
+                <span class="tooltip tooltip-bottom border-dotted" data-tip="Installed refinery with pip">CLI users</span>
             </div>
             <div (click)="toggleTabs(2)"
                 [ngClass]="openTab == 2 ? 'text-indigo-700 border-bottom' : 'text-gray-500' "
-                class="text-sm leading-5 font-medium mr-10 cursor-pointer py-5">
-                <span class="tooltip tooltip-top" data-tip="Windows terminal">cmd</span> 
+                class="text-sm leading-5 font-medium mr-10 cursor-help py-3">
+                <span class="tooltip tooltip-bottom border-dotted" data-tip="Windows terminal">cmd</span> 
             </div>
             <div (click)="toggleTabs(3)"
                 [ngClass]="openTab == 3 ? 'text-indigo-700 border-bottom' : 'text-gray-500' "
-                class="text-sm leading-5 font-medium mr-10 cursor-pointer py-5">
-                <span class="tooltip tooltip-top" data-tip="Windows from File Explorer">Executing from explorer</span> 
+                class="text-sm leading-5 font-medium mr-10 cursor-help py-3">
+                <span class="tooltip tooltip-bottom border-dotted" data-tip="Windows from File Explorer">Executing from explorer</span> 
             </div>
         </div>
 
@@ -406,6 +397,8 @@
         </div>
 
         <div class="modal-action">
+            <label (click)="back()"
+                class="bg-white text-gray-700 text-xs font-semibold mr-2 px-4 py-2 rounded border border-gray-300 cursor-pointer hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 inline-block">Go back</label>
             <label for="steps-update"
                 class="bg-white text-gray-700 text-xs font-semibold mr-4 px-4 py-2 rounded border border-gray-300 cursor-pointer hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 inline-block">Close</label>
         </div>
diff --git a/src/app/base/components/sidebar-pm/sidebar-pm.component.scss b/src/app/base/components/sidebar-pm/sidebar-pm.component.scss
index 8e83cdc5..9a9e2ab3 100644
--- a/src/app/base/components/sidebar-pm/sidebar-pm.component.scss
+++ b/src/app/base/components/sidebar-pm/sidebar-pm.component.scss
@@ -25,3 +25,7 @@ ol.list-letters {
 .tooltip-margin::before {
   margin-left: 8px;
 }
+
+.border-dotted {
+  border-bottom: 2px dotted #22c55e;
+}
diff --git a/src/app/base/components/sidebar-pm/sidebar-pm.component.ts b/src/app/base/components/sidebar-pm/sidebar-pm.component.ts
index 46675997..029641b5 100644
--- a/src/app/base/components/sidebar-pm/sidebar-pm.component.ts
+++ b/src/app/base/components/sidebar-pm/sidebar-pm.component.ts
@@ -68,7 +68,7 @@ export class SidebarPmComponent implements OnInit {
   @ViewChild('stepsUpdate', { read: ElementRef }) stepsUpdate: ElementRef;
   openTab: number = 0;
   isManaged: boolean = true;
-  hasUpdates$: Observable<boolean>;
+  hasUpdates: boolean;
 
   constructor(
     private organizationService: OrganizationApolloService,
@@ -101,7 +101,6 @@ export class SidebarPmComponent implements OnInit {
       .subscribe());
 
     this.checkIfManagedVersion();
-    this.hasUpdates$ = this.configService.hasUpdates();
   }
 
   requestVersionOverview() {
@@ -115,6 +114,10 @@ export class SidebarPmComponent implements OnInit {
         version.parseDate = this.parseUTC(version.lastChecked);
       });
       this.versionOverview.sort((a, b) => a.service.localeCompare(b.service));
+      this.configService
+        .hasUpdates()
+        .pipe(first())
+        .subscribe((hasUpdates) => this.hasUpdates = hasUpdates);
     });
   }
 

From 2be90f5b259c9331a773c5cb3b64c6fa506ab1b6 Mon Sep 17 00:00:00 2001
From: Lina <lina.lumburovska@kern.ai>
Date: Wed, 7 Sep 2022 14:35:24 +0200
Subject: [PATCH 10/15] Added statis variable for calling function only once

---
 src/app/app.component.ts                              |  1 -
 .../components/sidebar-pm/sidebar-pm.component.ts     | 11 +++++++++--
 src/app/base/services/config-service.ts               |  9 ---------
 3 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 979b135e..54ef1892 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -53,7 +53,6 @@ export class AppComponent implements OnDestroy, OnInit {
     this.configService.isDemo().pipe(first()).subscribe((v) => ConfigManager.setIsDemo(v));
     this.configService.isAdmin().pipe(first()).subscribe((v) => ConfigManager.setIsAdmin(v));
     this.configService.getBlackWhiteDemo().pipe(first()).subscribe((v) => ConfigManager.setBlackWhiteListDemo(v));
-    this.configService.getVersionOverview().pipe(first()).subscribe((v) => ConfigManager.setVersionOverview(v));
   }
 
 
diff --git a/src/app/base/components/sidebar-pm/sidebar-pm.component.ts b/src/app/base/components/sidebar-pm/sidebar-pm.component.ts
index 029641b5..516bc113 100644
--- a/src/app/base/components/sidebar-pm/sidebar-pm.component.ts
+++ b/src/app/base/components/sidebar-pm/sidebar-pm.component.ts
@@ -17,6 +17,7 @@ import { ProjectApolloService } from '../../services/project/project-apollo.serv
 import { ConfigApolloService } from '../../services/config/config-apollo.service';
 import { dateAsUTCDate } from 'src/app/util/helper-functions';
 import { ConfigManager } from '../../services/config-service';
+import { ConfigService } from 'aws-sdk';
 
 
 @Component({
@@ -69,6 +70,7 @@ export class SidebarPmComponent implements OnInit {
   openTab: number = 0;
   isManaged: boolean = true;
   hasUpdates: boolean;
+  private static initialConfigRequest: boolean = false;
 
   constructor(
     private organizationService: OrganizationApolloService,
@@ -99,7 +101,11 @@ export class SidebarPmComponent implements OnInit {
         })
       )
       .subscribe());
-
+    
+    if(!SidebarPmComponent.initialConfigRequest) {
+      this.requestVersionOverview();
+      SidebarPmComponent.initialConfigRequest = true;
+    }
     this.checkIfManagedVersion();
   }
 
@@ -118,6 +124,8 @@ export class SidebarPmComponent implements OnInit {
         .hasUpdates()
         .pipe(first())
         .subscribe((hasUpdates) => this.hasUpdates = hasUpdates);
+      
+      // ConfigManager.setVersionOverview(versionOverview);
     });
   }
 
@@ -221,6 +229,5 @@ export class SidebarPmComponent implements OnInit {
       return;
     }
     this.isManaged = ConfigManager.getIsManaged();
-    this.versionOverview = ConfigManager.getVersionOverview();
   }
 }
diff --git a/src/app/base/services/config-service.ts b/src/app/base/services/config-service.ts
index 20ef6ccc..b53bed4d 100644
--- a/src/app/base/services/config-service.ts
+++ b/src/app/base/services/config-service.ts
@@ -14,7 +14,6 @@ export class ConfigManager {
     private static blackWhiteListDemo: any;
     private static registedUpdateListeners: Map<Object, () => void> = new Map<Object, () => void>();
     private static justUpdated = false;
-    private static versionOverride: any = [];
 
     //needs to be called once from app (because of the http injection)
     public static initConfigManager(httpClient: HttpClient, configApolloService: ConfigApolloService, isManaged: boolean) {
@@ -119,13 +118,5 @@ export class ConfigManager {
             return false;
         }
     }
-
-    public static setVersionOverview(setVersionOverview: any) {
-        ConfigManager.versionOverride = setVersionOverview;
-    }
-
-    public static getVersionOverview(): any {
-        return ConfigManager.versionOverride;
-    }
 }
 

From 879f2cef0bd0d1a733978f1b528328bceb66eb73 Mon Sep 17 00:00:00 2001
From: Lina <lina.lumburovska@kern.ai>
Date: Wed, 7 Sep 2022 15:16:14 +0200
Subject: [PATCH 11/15] Modal sizes fixed

---
 .../components/sidebar-pm/sidebar-pm.component.html    |  4 ++--
 .../components/sidebar-pm/sidebar-pm.component.scss    | 10 ++++++++++
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/app/base/components/sidebar-pm/sidebar-pm.component.html b/src/app/base/components/sidebar-pm/sidebar-pm.component.html
index a14cc557..aca3363e 100644
--- a/src/app/base/components/sidebar-pm/sidebar-pm.component.html
+++ b/src/app/base/components/sidebar-pm/sidebar-pm.component.html
@@ -305,7 +305,7 @@
 
 <input #stepsUpdate type="checkbox" id="steps-update" class="modal-toggle">
 <div class="modal">
-    <div class="modal-box text-black bg-white justify-center modal-configuration">
+    <div class="modal-box text-black bg-white justify-center modal-sizes">
         <div class="text-center justify-center text-lg leading-6 text-gray-900 font-medium">
             How to update
         </div>
@@ -333,7 +333,7 @@
             </div>
         </div>
 
-        <div class="mt-3 px-5">
+        <div class="mt-3 px-5 h-40">
             <ng-container [ngSwitch]="openTab">
                 <ng-template [ngSwitchCase]="0">
                     <ol class="font-dmMono">
diff --git a/src/app/base/components/sidebar-pm/sidebar-pm.component.scss b/src/app/base/components/sidebar-pm/sidebar-pm.component.scss
index 9a9e2ab3..c7f45024 100644
--- a/src/app/base/components/sidebar-pm/sidebar-pm.component.scss
+++ b/src/app/base/components/sidebar-pm/sidebar-pm.component.scss
@@ -29,3 +29,13 @@ ol.list-letters {
 .border-dotted {
   border-bottom: 2px dotted #22c55e;
 }
+
+.modal-sizes {
+  min-width: 750px;
+}
+
+@media (max-width: 1024px) {
+  .modal-sizes {
+    min-width: 400px;
+  }
+}

From a81662c06809e560cfd2f16539d0479461c8ded0 Mon Sep 17 00:00:00 2001
From: Lina <lina.lumburovska@kern.ai>
Date: Wed, 7 Sep 2022 16:28:07 +0200
Subject: [PATCH 12/15] Icons alignment and data-tip changed to Version
 overview

---
 .../sidebar-pm/sidebar-pm.component.html      | 33 +++++++++----------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/src/app/base/components/sidebar-pm/sidebar-pm.component.html b/src/app/base/components/sidebar-pm/sidebar-pm.component.html
index aca3363e..7e8c7772 100644
--- a/src/app/base/components/sidebar-pm/sidebar-pm.component.html
+++ b/src/app/base/components/sidebar-pm/sidebar-pm.component.html
@@ -192,17 +192,15 @@
                     </button>
                 </div>
                 <div class="flex-shrink-0 flex py-6 justify-center">
-                    <label data-tip="Changelog" for="version-overview" (click)="requestVersionOverview()"
-                      class="z-50 tooltip tooltip-right cursor-pointer select-none text-white ml-1">v1.1.1
-                        <span *ngIf="hasUpdates" class="tooltip tooltip-right" data-tip="Newer version available">
-                            <svg xmlns="http://www.w3.org/2000/svg" 
-                                class="icon icon-tabler icon-tabler-alert-circle inline-block text-yellow-700" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <label data-tip="Version overview" for="version-overview" (click)="requestVersionOverview()"
+                      class="z-50 tooltip tooltip-right cursor-pointer select-none text-white flex items-center">v1.1.1
+                        <svg  *ngIf="hasUpdates" xmlns="http://www.w3.org/2000/svg"  data-tip="Newer version available"
+                                class="icon icon-tabler icon-tabler-alert-circle inline-block text-yellow-700 tooltip tooltip-right align-top ml-1 mt-px" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                 <circle cx="12" cy="12" r="9"></circle>
                                 <line x1="12" y1="8" x2="12" y2="12"></line>
                                 <line x1="12" y1="16" x2="12.01" y2="16"></line>
-                            </svg>
-                        </span>
+                        </svg>
                     </label>
                 </div>
             </div>
@@ -264,16 +262,17 @@
                                 {{service.installedVersion}}
                             </td>
                             <td class="text-center px-3 py-2 text-sm text-gray-500">
-                                <span class="inline-block mr-2">{{service.remoteVersion}}</span>
-                                <span *ngIf="service.remoteHasNewer" class="tooltip tooltip-right" data-tip="Newer version available">
-                                    <svg xmlns="http://www.w3.org/2000/svg" 
-                                        class="icon icon-tabler icon-tabler-alert-circle inline-block text-yellow-700" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                                        <circle cx="12" cy="12" r="9"></circle>
-                                        <line x1="12" y1="8" x2="12" y2="12"></line>
-                                        <line x1="12" y1="16" x2="12.01" y2="16"></line>
-                                    </svg>
-                                </span>
+                                <div class="flex flex-row items-center justify-center">
+                                    <div class="mr-2">{{service.remoteVersion}}</div>
+                                    <div *ngIf="service.remoteHasNewer">
+                                        <svg xmlns="http://www.w3.org/2000/svg" 
+                                            class="icon icon-tabler icon-tabler-alert-circle inline-block text-yellow-700 align-top" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                                            <circle cx="12" cy="12" r="9"></circle>
+                                            <line x1="12" y1="8" x2="12" y2="12"></line>
+                                            <line x1="12" y1="16" x2="12.01" y2="16"></line>
+                                        </svg></div>
+                                </div>
                             </td>
                             <td class="text-center px-3 py-2 text-sm text-gray-500">
                                 {{service.parseDate}}

From 01016ecf439aa73cf1b275c348a39ed993cbac31 Mon Sep 17 00:00:00 2001
From: Lina <lina.lumburovska@kern.ai>
Date: Wed, 7 Sep 2022 16:32:57 +0200
Subject: [PATCH 13/15] Returned untentionally removed tooltip

---
 src/app/base/components/sidebar-pm/sidebar-pm.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/base/components/sidebar-pm/sidebar-pm.component.html b/src/app/base/components/sidebar-pm/sidebar-pm.component.html
index 7e8c7772..6210800f 100644
--- a/src/app/base/components/sidebar-pm/sidebar-pm.component.html
+++ b/src/app/base/components/sidebar-pm/sidebar-pm.component.html
@@ -264,7 +264,7 @@
                             <td class="text-center px-3 py-2 text-sm text-gray-500">
                                 <div class="flex flex-row items-center justify-center">
                                     <div class="mr-2">{{service.remoteVersion}}</div>
-                                    <div *ngIf="service.remoteHasNewer">
+                                    <div *ngIf="service.remoteHasNewer" class="tooltip tooltip-right" data-tip="Newer version available">
                                         <svg xmlns="http://www.w3.org/2000/svg" 
                                             class="icon icon-tabler icon-tabler-alert-circle inline-block text-yellow-700 align-top" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                             <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>

From 8c3a494b78ace2f3a6d59ac1a52618b658180561 Mon Sep 17 00:00:00 2001
From: Lina <lina.lumburovska@kern.ai>
Date: Wed, 7 Sep 2022 16:47:33 +0200
Subject: [PATCH 14/15] Removed commented code

---
 src/app/base/components/sidebar-pm/sidebar-pm.component.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/app/base/components/sidebar-pm/sidebar-pm.component.ts b/src/app/base/components/sidebar-pm/sidebar-pm.component.ts
index 516bc113..c51ee2d0 100644
--- a/src/app/base/components/sidebar-pm/sidebar-pm.component.ts
+++ b/src/app/base/components/sidebar-pm/sidebar-pm.component.ts
@@ -124,8 +124,6 @@ export class SidebarPmComponent implements OnInit {
         .hasUpdates()
         .pipe(first())
         .subscribe((hasUpdates) => this.hasUpdates = hasUpdates);
-      
-      // ConfigManager.setVersionOverview(versionOverview);
     });
   }
 

From fe5a6996921167d0735b3b6094dd484db7c153ef Mon Sep 17 00:00:00 2001
From: Lina <lina.lumburovska@kern.ai>
Date: Thu, 8 Sep 2022 12:00:22 +0200
Subject: [PATCH 15/15] Dropdown for models on smaller sizes

---
 .../model-download-component.component.html                   | 2 +-
 .../model-download-component.component.scss                   | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/app/model-download/components/model-download-component/model-download-component.component.html b/src/app/model-download/components/model-download-component/model-download-component.component.html
index cb6f7458..bee654bd 100644
--- a/src/app/model-download/components/model-download-component/model-download-component.component.html
+++ b/src/app/model-download/components/model-download-component/model-download-component.component.html
@@ -162,7 +162,7 @@
                                             (input)="checkEmbeddingHandles($event.target)">
                                     </div>
                                     <ul tabindex="0"
-                                        class="p-2 w-full menu dropdown-content bg-base-100 shadow max-h-80 overflow-y-auto">
+                                        class="p-2 w-full menu dropdown-content bg-base-100 shadow height-dropdown overflow-y-auto">
                                         <li #me *ngFor="let modelHandle of suggestions; let k = index"
                                             [ngClass]="modelHandle.hidden || modelHandle.forceHidden?'hidden':null"
                                             (mouseenter)="setCurrentEmbeddingHandle(modelHandle,hoverBox,me)"
diff --git a/src/app/model-download/components/model-download-component/model-download-component.component.scss b/src/app/model-download/components/model-download-component/model-download-component.component.scss
index e5e567c7..51cc90a0 100644
--- a/src/app/model-download/components/model-download-component/model-download-component.component.scss
+++ b/src/app/model-download/components/model-download-component/model-download-component.component.scss
@@ -1,3 +1,7 @@
 .line-separator {
     border-bottom: 1px gray dashed;
+}
+
+.height-dropdown {
+    max-height: calc(100vh - 400px);
 }
\ No newline at end of file