(#85) More work on VSCode ext UI

typescript/vscode-extension/src/common/SuibaseJson.ts

@@ -134,38 +134,33 @@ export class SuibaseJsonVersions extends SuibaseJson {
 }
 
 export class SuibaseJsonWorkdirStatus extends SuibaseJson {
-  private _status: string;
-  private _suiClientVersion: string;
-  private _isLoaded;
+  public status: string;
+  public suiClientVersion: string;
+  public suiClientVersionShort: string;
+  public isLoaded;
 
   constructor() {
     super();
-    this._status = "";
-    this._suiClientVersion = "";
-    this._isLoaded = false;
+    this.status = "";
+    this.suiClientVersion = "";
+    this.suiClientVersionShort = "";
+    this.isLoaded = false;
   }
   protected deltaDetected() {
     super.deltaDetected();
     try {
-      this._status = this.getJson().status;
-      this._suiClientVersion = this.getJson().clientVersion;
-      this._isLoaded = true;
+      this.status = this.getJson().status;
+      this.suiClientVersion = this.getJson().clientVersion;
+      if (typeof this.suiClientVersion === "string" && this.suiClientVersion.length > 0) {
+        this.suiClientVersionShort = this.suiClientVersion.split("-")[0];
+      } else {
+        this.suiClientVersionShort = "";
+      }
+      this.isLoaded = true;
     } catch (error) {
       console.error(`Problem with SuibaseJsonWorkdirStatus loading: ${error}`);
     }
   }
-
-  public get status(): string {
-    return this._status;
-  }
-
-  public get suiClientVersion(): string {
-    return this._suiClientVersion;
-  }
-
-  public get isLoaded(): boolean {
-    return this._isLoaded;
-  }
 }
 
 // This is to be used internally by SuibaseJSONStorage only.

typescript/vscode-extension/webview-ui/package.json

@@ -15,21 +15,24 @@
     "@estruyf/vscode": "^1.1.0",
     "@fontsource/roboto": "^5.0.13",
     "@mui/material": "^5.15.15",
+    "@mui/x-tree-view": "^7.3.1",
+    "@textea/json-viewer": "^3.4.1",
     "@vscode/codicons": "^0.0.33",
     "@vscode/webview-ui-toolkit": "^1.4.0",
     "async-mutex": "^0.5.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.3.1",
+    "react-accessible-treeview": "^2.9.0",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@types/react": "^18.2.79",
-    "@types/react-dom": "^18.2.25",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
     "@types/vscode-webview": "^1.57.5",
-    "@typescript-eslint/eslint-plugin": "^7.7.0",
-    "@typescript-eslint/parser": "^7.7.0",
+    "@typescript-eslint/eslint-plugin": "^7.7.1",
+    "@typescript-eslint/parser": "^7.7.1",
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.57.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.6",
     "typescript": "^5.4.5",
     "vite": "^5.2.10"

typescript/vscode-extension/webview-ui/src/components/AntSwitch.tsx

@@ -0,0 +1,43 @@
+import { styled } from '@mui/material/styles';
+import Switch from '@mui/material/Switch';
+
+export const AntSwitch = styled(Switch)(({ theme }) => ({
+  width: 28,
+  height: 16,
+  padding: 0,
+  display: 'flex',
+  '&:active': {
+    '& .MuiSwitch-thumb': {
+      width: 15,
+    },
+    '& .MuiSwitch-switchBase.Mui-checked': {
+      transform: 'translateX(9px)',
+    },
+  },
+  '& .MuiSwitch-switchBase': {
+    padding: 2,
+    '&.Mui-checked': {
+      transform: 'translateX(12px)',
+      color: '#fff',
+      '& + .MuiSwitch-track': {
+        opacity: 1,
+        backgroundColor: theme.palette.mode === 'dark' ? '#177ddc' : '#1890ff',
+      },
+    },
+  },
+  '& .MuiSwitch-thumb': {
+    boxShadow: '0 2px 4px 0 rgb(0 35 11 / 20%)',
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+    transition: theme.transitions.create(['width'], {
+      duration: 200,
+    }),
+  },
+  '& .MuiSwitch-track': {
+    borderRadius: 16 / 2,
+    opacity: 1,
+    backgroundColor: 'rgba(255,255,255,.35)',
+    boxSizing: 'border-box',
+  },
+}));

typescript/vscode-extension/webview-ui/src/components/CommonController.tsx

@@ -9,66 +9,20 @@ import { WORKDIRS_KEYS } from "../common/Consts";
 import { VSCode } from '../lib/VSCode';
 import { InitView, RequestWorkdirStatus } from '../common/ViewMessages';
 
-export class ViewWorkdirData {
-    private _label: string;
-    private _workdir: string;
-    private _workdirIdx: number;
-    private _suiClientVersionShort: string;
-    private _versions: SuibaseJsonVersions; // Backend JSON of getVersions for this Workdir.
-    private _workdirStatus: SuibaseJsonWorkdirStatus; // Backend JSON of getWorkdirStatus for this Workdir.
+export class ViewWorkdirStates {
+    public label: string;
+    public workdir: string;
+    public workdirIdx: number;
+    public versions: SuibaseJsonVersions; // Backend JSON of getVersions for this Workdir.
+    public workdirStatus: SuibaseJsonWorkdirStatus; // Backend JSON of getWorkdirStatus for this Workdir.
 
     constructor(workdir: string, workdirIdx: number) {
-      this._label = workdir.charAt(0).toUpperCase() + workdir.slice(1);      
-      this._workdir = workdir;
-      this._workdirIdx = workdirIdx;
-      this._suiClientVersionShort = "";
-      this._versions = new SuibaseJsonVersions();
-      this._workdirStatus = new SuibaseJsonWorkdirStatus();
-    }
-
-    public get label() {
-      return this._label;
-    }
-
-    public get workdir() {
-      return this._workdir;
-    }
-
-    public get workdirIdx() {
-      return this._workdirIdx;
-    }
-
-    public get status() {
-      return this._workdirStatus.status;
-    }
-
-    public get suiClientVersion() {
-      return this._workdirStatus.suiClientVersion;
-    }
-
-    public get suiClientVersionShort() {
-      return this._suiClientVersionShort;
-    }
-
-    public get versions() {
-      return this._versions;
-    }
-
-    public get workdirStatus() {
-      return this._workdirStatus;
-    }
-
-    public get isStatusLoaded() {
-      return this._workdirStatus.isLoaded;
-    }
-
-    public updateCalculatedFields() {
-      if (typeof this._workdirStatus.suiClientVersion === 'string' && this._workdirStatus.suiClientVersion.length > 0) {
-        this._suiClientVersionShort = this._workdirStatus.suiClientVersion.split("-")[0];
-      } else {
-        this._suiClientVersionShort = "";
-      }      
-    }
+      this.label = workdir.charAt(0).toUpperCase() + workdir.slice(1);      
+      this.workdir = workdir;
+      this.workdirIdx = workdirIdx;
+      this.versions = new SuibaseJsonVersions();
+      this.workdirStatus = new SuibaseJsonWorkdirStatus();
+    }    
   }
 
 export class ViewCommonData {
@@ -77,7 +31,7 @@ export class ViewCommonData {
     private _activeLoaded: boolean;
 
     constructor() {
-      this._activeWorkdir = "localnet";
+      this._activeWorkdir = "";
       this._activeWorkdirIdx = 0;
       this._activeLoaded = false;
     }
@@ -118,21 +72,77 @@ export class ViewCommonData {
     }
 }
 
+export class ViewObject {
+  public name: string;
+  public id: string;
+  constructor() {
+    this.name = "";
+    this.id = "";
+  }
+}
+
+export class ViewAddress {
+  public id: string;  
+  public ownedObjects: ViewObject[];
+  public watchObjects: ViewObject[];
+  constructor() {
+    this.id = "";
+    this.ownedObjects = [];
+    this.watchObjects = [];
+  }
+}
+
+export class ViewPackageData {
+  public name: string;
+  public id: string;
+  public initObjects: ViewObject[];
+  public watchObjects: ViewObject[];
+  constructor() {
+    this.name = "";
+    this.id = "";
+    this.initObjects = [];
+    this.watchObjects = [];
+  }
+}
+
+export class ViewExplorerData {
+  // Packages/Objects/Addresses relevant to the recent publish.
+  mostRecents: ViewPackageData[];
+  archives: ViewPackageData[];
+  constructor() {
+    this.mostRecents = [];
+    this.archives = [];
+  }
+}
+
 export const useCommonController = () => {
   const { message } = useMessage();
   const common = useRef(new ViewCommonData());
-  const workdirs = useRef(WORKDIRS_KEYS.map((key, index) => new ViewWorkdirData(key, index)));
-  const [, setUpdateTrigger] = useState(false);
+  const [ workdirs ] = useState<ViewWorkdirStates[]>(WORKDIRS_KEYS.map((key, index) => new ViewWorkdirStates(key, index)));
+  /*
+  const updateWorkdirs = (index: number, updates: Partial<ViewWorkdirStates>) => {
+    setWorkdirs(currentStates =>
+      currentStates.map((item, idx) =>
+        idx === index ? { ...item, ...updates } : item
+      )
+    );
+  };*/
+
+  // A trick to force a re-render of the component using useCommonController.
+  // This simplify greatly the handling of changes of workdirs array elements.
+  const [commonTrigger, setUpdateTrigger] = useState(false);
 
   useEffect(() => {  
-    // Called when this component is mounted, which is surprisingly often (e.g. every time user switch tabs in VSCode).
+    // This is also called when this component is mounted, which is 
+    // surprisingly often (e.g. every time user switch tabs in VSCode).
 
-    // Call InitView if any of the backend data is missing, otherwise use the latest cached in ref.
+    // Call InitView if any of the backend data is missing.
+    // TODO Use persistence to cache the data when the view is unmounted.
     let missingData = common.current.activeLoaded === false;
     if (!missingData) {
       // Check workdirs data.
-      for (let i = 0; i < workdirs.current.length; i++) {
-        const workdirTracking = workdirs.current[i];
+      for (let i = 0; i < workdirs.length; i++) {
+        const workdirTracking = workdirs[i];
         if (!workdirTracking.versions.getJson()) {
           missingData = true;
           break;
@@ -142,15 +152,15 @@ export const useCommonController = () => {
     if (missingData) {
       VSCode.postMessage(new InitView());
     }
-  }, []);
+  }, [workdirs]);
 
   useEffect(() => {
     try {
       if (message && message.name) {
         let do_render = false;
         switch (message.name) {
           case 'UpdateVersions': {
-            const workdirTracking = workdirs.current[message.workdirIdx];
+            const workdirTracking = workdirs[message.workdirIdx];
             const hasChanged = workdirTracking.versions.update(message.json);            
             if (hasChanged) {
               do_render = true;
@@ -162,27 +172,19 @@ export const useCommonController = () => {
                 VSCode.postMessage( new RequestWorkdirStatus(message.workdirIdx, methodUuid, dataUuid) );
               }
             }
-            // Update activeWorkdirIdx (as needed).
+            // As needed, update activeWorkdir (and indirectly activeWorkdirIdx ).
+            //console.log(`common.current.activeWorkdir: ${common.current.activeWorkdir}, message.json.asuiSelection: ${message.json.asuiSelection}`);
             if (common.current.activeWorkdir !== message.json.asuiSelection) {
-                const idx = WORKDIRS_KEYS.indexOf(message.json.asuiSelection);
-                if (idx >= 0) {
-                    common.current.activeWorkdir = message.json.asuiSelection;
-                    common.current.activeWorkdirIdx = idx;
-                    //console.log(`Active workdir changed to ${common.current.activeWorkdir}`);
-                    do_render = true;
-                } else {
-                    console.error(`Invalid active workdir: ${message.json.asuiSelection}`);
-                }
+              common.current.activeWorkdir = message.json.asuiSelection;                
+              do_render = true;
             }
-
-
             break;
           }
           case 'UpdateWorkdirStatus': {
-            const workdirTracking = workdirs.current[message.workdirIdx];
+            const workdirTracking = workdirs[message.workdirIdx];
             const hasChanged = workdirTracking.workdirStatus.update(message.json);
             if (hasChanged) {
-              workdirTracking.updateCalculatedFields();
+              //workdirTracking.updateCalculatedFields();
               do_render = true;
             }
             break;
@@ -197,7 +199,7 @@ export const useCommonController = () => {
     } catch (error) {
       console.error("An error occurred in useCommonController:", error);
     }
-  }, [message]);
+  }, [message,workdirs]);
 
-  return {common, workdirs};
-};
+  return {commonTrigger, common, workdirs};
+};