feat: introduced cloud state in sketchbook view

Closes #1879

Signed-off-by: Akos Kitta <[email protected]>

Author: Akos Kitta

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",

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 {

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);
 });

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(),
     });
   }
 

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,

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%;
+}