feat: introduced cloud state in sketchbook view

Closes #1879

Signed-off-by: Akos Kitta <a.kitta@arduino.cc>

Author: Akos Kitta

Diff for: arduino-ide-extension/package.json

@@ -77,6 +77,7 @@
     "glob": "^7.1.6",
     "google-protobuf": "^3.20.1",
     "hash.js": "^1.1.7",
+    "is-online": "^9.0.1",
     "js-yaml": "^3.13.1",
     "just-diff": "^5.1.1",
     "jwt-decode": "^3.1.2",

Diff for: arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx

@@ -1,9 +1,5 @@
 import * as remote from '@theia/core/electron-shared/@electron/remote';
-import {
-  inject,
-  injectable,
-  postConstruct,
-} from '@theia/core/shared/inversify';
+import { inject, injectable } from '@theia/core/shared/inversify';
 import * as React from '@theia/core/shared/react';
 import {
   MAIN_MENU_BAR,
@@ -23,7 +19,6 @@ import {
   CommandContribution,
   CommandRegistry,
 } from '@theia/core/lib/common/command';
-import { MessageService } from '@theia/core/lib/common/message-service';
 import { EditorCommands, EditorMainMenu } from '@theia/editor/lib/browser';
 import { MonacoMenus } from '@theia/monaco/lib/browser/monaco-menu';
 import { FileNavigatorCommands } from '@theia/navigator/lib/browser/navigator-contribution';
@@ -46,9 +41,6 @@ export class ArduinoFrontendContribution
     MenuContribution,
     ColorContribution
 {
-  @inject(MessageService)
-  private readonly messageService: MessageService;
-
   @inject(BoardsServiceProvider)
   private readonly boardsServiceProvider: BoardsServiceProvider;
 
@@ -61,19 +53,6 @@ export class ArduinoFrontendContribution
   @inject(FrontendApplicationStateService)
   private readonly appStateService: FrontendApplicationStateService;
 
-  @postConstruct()
-  protected async init(): Promise<void> {
-    if (!window.navigator.onLine) {
-      // tslint:disable-next-line:max-line-length
-      this.messageService.warn(
-        nls.localize(
-          'arduino/common/offlineIndicator',
-          'You appear to be offline. Without an Internet connection, the Arduino CLI might not be able to download the required resources and could cause malfunction. Please connect to the Internet and restart the application.'
-        )
-      );
-    }
-  }
-
   onStart(): void {
     this.electronWindowPreferences.onPreferenceChanged((event) => {
       if (event.newValue !== event.oldValue) {
@@ -87,14 +66,14 @@ export class ArduinoFrontendContribution
         }
       }
     });
-    this.appStateService.reachedState('ready').then(() =>
+    this.appStateService.reachedState('ready').then(() => {
       this.electronWindowPreferences.ready.then(() => {
         const webContents = remote.getCurrentWebContents();
         const zoomLevel =
           this.electronWindowPreferences.get('window.zoomLevel');
         webContents.setZoomLevel(zoomLevel);
-      })
-    );
+      });
+    });
   }
 
   registerToolbarItems(registry: TabBarToolbarRegistry): void {

Diff for: arduino-ide-extension/src/browser/arduino-ide-frontend-module.ts

@@ -90,6 +90,8 @@ import { EditorCommandContribution as TheiaEditorCommandContribution } from '@th
 import {
   FrontendConnectionStatusService,
   ApplicationConnectionStatusContribution,
+  DaemonPort,
+  IsOnline,
 } from './theia/core/connection-status-service';
 import {
   FrontendConnectionStatusService as TheiaFrontendConnectionStatusService,
@@ -1021,4 +1023,8 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
 
   bind(SidebarBottomMenuWidget).toSelf();
   rebind(TheiaSidebarBottomMenuWidget).toService(SidebarBottomMenuWidget);
+  bind(DaemonPort).toSelf().inSingletonScope();
+  bind(FrontendApplicationContribution).toService(DaemonPort);
+  bind(IsOnline).toSelf().inSingletonScope();
+  bind(FrontendApplicationContribution).toService(IsOnline);
 });

Diff for: arduino-ide-extension/src/browser/contributions/account.ts

@@ -8,6 +8,7 @@ import { inject, injectable } from '@theia/core/shared/inversify';
 import { CloudUserCommands, LEARN_MORE_URL } from '../auth/cloud-user-commands';
 import { CreateFeatures } from '../create/create-features';
 import { ArduinoMenus } from '../menu/arduino-menus';
+import { ApplicationConnectionStatusContribution } from '../theia/core/connection-status-service';
 import {
   Command,
   CommandRegistry,
@@ -29,6 +30,8 @@ export class Account extends Contribution {
   private readonly windowService: WindowService;
   @inject(CreateFeatures)
   private readonly createFeatures: CreateFeatures;
+  @inject(ApplicationConnectionStatusContribution)
+  private readonly connectionStatus: ApplicationConnectionStatusContribution;
 
   private readonly toDispose = new DisposableCollection();
   private app: FrontendApplication;
@@ -50,21 +53,28 @@ export class Account extends Contribution {
   override registerCommands(registry: CommandRegistry): void {
     const openExternal = (url: string) =>
       this.windowService.openNewWindow(url, { external: true });
+    const loggedIn = () => Boolean(this.createFeatures.session);
+    const loggedInWithInternetConnection = () =>
+      loggedIn() && this.connectionStatus.offlineStatus !== 'internet';
     registry.registerCommand(Account.Commands.LEARN_MORE, {
       execute: () => openExternal(LEARN_MORE_URL),
-      isEnabled: () => !Boolean(this.createFeatures.session),
+      isEnabled: () => !loggedIn(),
+      isVisible: () => !loggedIn(),
     });
     registry.registerCommand(Account.Commands.GO_TO_PROFILE, {
       execute: () => openExternal('https://id.arduino.cc/'),
-      isEnabled: () => Boolean(this.createFeatures.session),
+      isEnabled: () => loggedInWithInternetConnection(),
+      isVisible: () => loggedIn(),
     });
     registry.registerCommand(Account.Commands.GO_TO_CLOUD_EDITOR, {
       execute: () => openExternal('https://create.arduino.cc/editor'),
-      isEnabled: () => Boolean(this.createFeatures.session),
+      isEnabled: () => loggedInWithInternetConnection(),
+      isVisible: () => loggedIn(),
     });
     registry.registerCommand(Account.Commands.GO_TO_IOT_CLOUD, {
       execute: () => openExternal('https://create.arduino.cc/iot/'),
-      isEnabled: () => Boolean(this.createFeatures.session),
+      isEnabled: () => loggedInWithInternetConnection(),
+      isVisible: () => loggedIn(),
     });
   }
 

Diff for: arduino-ide-extension/src/browser/contributions/contribution.ts

@@ -14,7 +14,6 @@ import { EditorManager } from '@theia/editor/lib/browser/editor-manager';
 import { MessageService } from '@theia/core/lib/common/message-service';
 import { EnvVariablesServer } from '@theia/core/lib/common/env-variables';
 import { open, OpenerService } from '@theia/core/lib/browser/opener-service';
-
 import {
   MenuModelRegistry,
   MenuContribution,
@@ -58,7 +57,7 @@ import { ClipboardService } from '@theia/core/lib/browser/clipboard-service';
 import { ExecuteWithProgress } from '../../common/protocol/progressible';
 import { BoardsServiceProvider } from '../boards/boards-service-provider';
 import { BoardsDataStore } from '../boards/boards-data-store';
-import { NotificationManager } from '../theia/messages/notifications-manager';
+import { NotificationManager } from '@theia/messages/lib/browser/notifications-manager';
 import { MessageType } from '@theia/core/lib/common/message-service-protocol';
 import { WorkspaceService } from '../theia/workspace/workspace-service';
 import { MainMenuManager } from '../../common/main-menu-manager';
@@ -295,7 +294,7 @@ export abstract class CoreServiceContribution extends SketchContribution {
   }
 
   private notificationId(message: string, ...actions: string[]): string {
-    return this.notificationManager.getMessageId({
+    return this.notificationManager['getMessageId']({
       text: message,
       actions,
       type: MessageType.Error,

Diff for: arduino-ide-extension/src/browser/icons/cloud-filled-offline.svg

@@ -199,3 +199,43 @@
 .arduino-share-sketch-dialog .sketch-link-embed textarea {
     width: 100%;
 }
+
+.cloud-sketch-folder-icon {
+    -webkit-mask: url('../icons/cloud.svg');
+    background-color: var(--theia-foreground);
+    -webkit-mask-position: center;
+    -webkit-mask-repeat: no-repeat;
+    width: var(--theia-icon-size);
+    height: var(--theia-icon-size);
+    -webkit-mask-size: 100%;
+}
+
+.cloud-sketch-folder-icon.offline {
+    -webkit-mask: url('../icons/cloud-offline.svg');
+    background-color: var(--theia-activityBar-inactiveForeground);
+    -webkit-mask-position: center;
+    -webkit-mask-repeat: no-repeat;
+    width: var(--theia-icon-size);
+    height: var(--theia-icon-size);
+    -webkit-mask-size: 100%;
+}
+
+.cloud-sketch-folder-icon.synced {
+    -webkit-mask: url('../icons/cloud-filled.svg');
+    background-color: var(--theia-foreground);
+    -webkit-mask-position: center;
+    -webkit-mask-repeat: no-repeat;
+    width: var(--theia-icon-size);
+    height: var(--theia-icon-size);
+    -webkit-mask-size: 100%;
+}
+
+.cloud-sketch-folder-icon.synced.offline {
+    -webkit-mask: url('../icons/cloud-filled-offline.svg');
+    background-color: var(--theia-foreground);
+    -webkit-mask-position: center;
+    -webkit-mask-repeat: no-repeat;
+    width: var(--theia-icon-size);
+    height: var(--theia-icon-size);
+    -webkit-mask-size: 100%;
+}

Diff for: arduino-ide-extension/src/browser/icons/cloud-filled.svg

@@ -3,13 +3,6 @@
   mask: url('./sketchbook.svg');
 }
 
-.sketch-folder-icon {
-  background: url('./sketch-folder-icon.svg') center center no-repeat;
-  background-position-x: 1px;
-  width: var(--theia-icon-size);
-  height: var(--theia-icon-size);
-}
-
 .p-TabBar-tabIcon.sketchbook-tree-icon {
   background-color: var(--theia-foreground);
   -webkit-mask: url(./sketchbook-tree-icon.svg);