feat: introduced cloud state in sketchbook view

Closes #1879

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

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-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/style/cloud-sketchbook.css

@@ -15,18 +15,18 @@
 
 .p-TabBar-tabIcon.cloud-sketchbook-tree-icon {
     background-color: var(--theia-foreground);
-    -webkit-mask: url(./cloud-sketchbook-tree-icon.svg);
+    -webkit-mask: url(../icons/cloud.svg);
     -webkit-mask-position: center;
     -webkit-mask-repeat: no-repeat;
-    width: var(--theia-icon-size);
+    width: 19px !important;
     height: var(--theia-icon-size);
     -webkit-mask-size: 100%;
 }
 
 .p-mod-current
 .cloud-sketchbook-tree-icon {
     background-color: var(--theia-foreground);
-    -webkit-mask: url(./cloud-sketchbook-tree-icon-filled.svg);
+    -webkit-mask: url(../icons/cloud-filled.svg);
     -webkit-mask-position: center;
     -webkit-mask-repeat: no-repeat;
     -webkit-mask-size: 100%;
@@ -118,7 +118,6 @@
 }
 
 .account-icon {
-    background: url("./account-icon.svg") center center no-repeat;
     width: var(--theia-private-sidebar-icon-size);
     height: var(--theia-private-sidebar-icon-size);
     border-radius: 50%;
@@ -199,3 +198,39 @@
 .arduino-share-sketch-dialog .sketch-link-embed textarea {
     width: 100%;
 }
+
+.theia-file-icons-js.file-icon > .sketch-folder-icon {
+    -webkit-mask-position: center;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-size: 100%;
+    width: var(--theia-icon-size);
+    height: var(--theia-icon-size);
+    background-color: var(--theia-foreground);
+}
+
+.theia-file-icons-js.file-icon > .sketch-folder-icon.cloud {
+    -webkit-mask: url('../icons/cloud.svg');
+}
+
+.theia-file-icons-js.file-icon > .sketch-folder-icon.cloud.offline {
+    -webkit-mask: url('../icons/cloud-offline.svg');
+    background-color: var(--theia-activityBar-inactiveForeground);
+}
+
+.theia-file-icons-js.file-icon > .sketch-folder-icon.cloud.synced {
+    -webkit-mask: url('../icons/cloud-filled.svg');
+}
+
+.theia-TreeNodeContent > .theia-file-icons-js.file-icon > .sketch-folder-icon.cloud.synced.offline {
+    -webkit-mask: url('../icons/cloud-filled-offline.svg');
+}
+
+.sketch-folder-icon.cloud.offline.action {
+    -webkit-mask: url('../icons/cloud-offline.svg');
+    -webkit-mask-position: center;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-size: 100%;
+    width: var(--theia-icon-size);
+    height: var(--theia-icon-size);
+    background-color: var(--theia-foreground);
+}

arduino-ide-extension/src/browser/style/sketchbook.css

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