Chore/update docs and Multi-organization feature implementation plan

MULTI-ORG-IMPLEMENTATION.md

@@ -0,0 +1,169 @@
+# Multi-Organization Feature Implementation Plan
+
+## Overview
+
+This document outlines the implementation plan for adding multi-organization switching functionality to the Fliplet VS Code Extension. The feature will allow users to switch between different organizations they have access to, similar to how it works in Fliplet Studio.
+
+## Requirements
+
+- Allow users to view all organizations they have access to
+- Enable switching between organizations via Command Palette
+- Persist the selected organization
+- Refresh the extension view after switching
+- Follow similar implementation pattern as the Impersonation feature
+
+## Implementation Plan
+
+### 1. Add Command Registration
+
+Register a new command in the extension's `package.json`:
+
+```json
+{
+  "contributes": {
+    "commands": [
+      {
+        "command": "fliplet.switchOrganization",
+        "title": "Fliplet: Switch Organization"
+      }
+    ]
+  }
+}
+```
+
+### 2. Implement Organization Switching Logic
+
+Create a new module in `src/commands/switchOrganization.ts`:
+
+```typescript
+import * as vscode from 'vscode';
+import { auth } from '../services/auth';
+import { refreshWebviewContent } from '../webview';
+
+export async function switchOrganization() {
+  try {
+    // Get list of organizations the user has access to
+    const organizations = await auth.getUserOrganizations();
+
+    if (!organizations || !organizations.length) {
+      vscode.window.showInformationMessage('No organizations found.');
+      return;
+    }
+
+    // Display organizations in the Command Palette
+    const orgItems = organizations.map(org => ({
+      label: org.name,
+      description: `ID: ${org.id}`,
+      detail: org.region,
+      org
+    }));
+
+    const selectedOrg = await vscode.window.showQuickPick(orgItems, {
+      placeHolder: 'Select an organization to switch to',
+      matchOnDescription: true,
+      matchOnDetail: true
+    });
+
+    if (!selectedOrg) {
+      return; // User cancelled
+    }
+
+    // Switch the organization
+    await auth.changeCurrentOrganization({
+      newOrganizationId: selectedOrg.org.id,
+      region: selectedOrg.org.region
+    });
+
+    // Refresh the extension view
+    refreshWebviewContent();
+
+    vscode.window.showInformationMessage(`Switched to organization: ${selectedOrg.org.name}`);
+  } catch (error) {
+    vscode.window.showErrorMessage(`Failed to switch organization: ${error.message}`);
+  }
+}
+```
+
+### 3. Update Auth Service
+
+Add methods to `src/services/auth.ts` to support organization operations:
+
+```typescript
+// Add to auth service
+async getUserOrganizations() {
+  // API call to get user organizations
+  const response = await this.authenticatedRequest('/v1/user/organizations');
+  return response.organizations || [];
+}
+
+async changeCurrentOrganization({ newOrganizationId, region }) {
+  // Mimic the functionality in TopbarMenuOrganizationSwitcher.vue
+  const response = await this.authenticatedRequest('/v1/user/organization', {
+    method: 'PUT',
+    body: JSON.stringify({
+      id: newOrganizationId,
+      region
+    })
+  });
+
+  // Update and persist the selected organization
+  await this.updateAndPersistOrganization(response.organization);
+
+  return response.organization;
+}
+
+async updateAndPersistOrganization(organization) {
+  // Update the organization in memory
+  this.organization = organization;
+
+  // Persist to local storage
+  await this.storageService.set('currentOrganization', organization);
+
+  return organization;
+}
+```
+
+### 4. Update the Extension Activation
+
+Register the command in the extension's activation function in `src/extension.ts`:
+
+```typescript
+import { switchOrganization } from './commands/switchOrganization';
+
+export function activate(context: vscode.ExtensionContext) {
+  // Other initialization code...
+
+  // Register the command
+  context.subscriptions.push(
+    vscode.commands.registerCommand('fliplet.switchOrganization', switchOrganization)
+  );
+}
+```
+
+### 5. Add Interface for Organization Types
+
+Create or update types in `src/types.ts`:
+
+```typescript
+export interface Organization {
+  id: string;
+  name: string;
+  region: string;
+  // Other organization properties
+}
+```
+
+## Testing Plan
+
+1. Test with users that have access to multiple organizations
+2. Verify organization list is correctly displayed in Command Palette
+3. Test switching between organizations
+4. Verify app list is updated after organization switch
+5. Verify persistence of selected organization after VS Code restart
+
+## Future Enhancements
+
+- Add organization search functionality
+- Display current organization in the status bar
+- Add organization filtering options
+- Consider adding a UI component in the sidebar for organization switching 

README.md

@@ -4,7 +4,42 @@
 
 This extension adds a new sidebar icon where you can log in with your Fliplet Studio account and edit your apps.
 
----
+## Features
+
+- Browse your Fliplet apps directly within VS Code
+- Manage pages and components
+- Preview pages and components in real-time
+- Configure components
+- Manage Data Sources
+- Browse Fliplet libraries and dependencies
+- Support for impersonation (for admin users)
+
+## Installation
+
+### From VS Code Marketplace
+1. Open VS Code
+2. Go to Extensions (Ctrl+Shift+X or Cmd+Shift+X on Mac)
+3. Search for "Fliplet Developer Tools"
+4. Click Install
+
+### Manual Installation
+1. Build the project
+2. Open command pallete in VS Code
+3. type `>install` and select `Developer: Install extension from location`
+4. Select the repository directory
+
+## Usage
+
+1. After installation, click the Fliplet icon in the Activity Bar
+2. Sign in with your Fliplet Studio account
+3. Browse your apps, pages, and components
+4. Use the context menu options to preview, configure, or edit items
+
+## Development
+
+1. Clone the repository
+2. Run `npm install` to install dependencies
+3. Press F5 to run the extension in development mode
 
 ## Update the extension
 
@@ -13,7 +48,6 @@ This extension adds a new sidebar icon where you can log in with your Fliplet St
 3. Run `vsce publish` to package the version as a new vsix file
 4. Upload the version via the UI at https://marketplace.visualstudio.com/manage/publishers/fliplet
 
-
 ---
 
 ### Future support for web

vsc-extension-quickstart.md

@@ -1,42 +1,60 @@
-# Welcome to your VS Code Extension
+# Fliplet Developer Tools - VS Code Extension Development Guide
 
 ## What's in the folder
 
-* This folder contains all of the files necessary for your extension.
-* `package.json` - this is the manifest file in which you declare your extension and command.
-  * The sample plugin registers a command and defines its title and command name. With this information VS Code can show the command in the command palette. It doesn’t yet need to load the plugin.
-* `src/extension.ts` - this is the main file where you will provide the implementation of your command.
-  * The file exports one function, `activate`, which is called the very first time your extension is activated (in this case by executing the command). Inside the `activate` function we call `registerCommand`.
-  * We pass the function containing the implementation of the command as the second parameter to `registerCommand`.
+* This folder contains all of the files necessary for the Fliplet VSCode extension.
+* `package.json` - This is the manifest file that defines the extension metadata, commands, and required contribution points.
+* `src/extension.ts` - The main entry point of the extension where the activation function is defined.
+* `src/apps-provider.ts` - Implements the TreeDataProvider and FileSystemProvider for browsing Fliplet apps, pages, and components.
+* `src/dependencies.ts` - Implements the TreeDataProvider for browsing Fliplet libraries and dependencies.
+* `src/api.js` - Contains the API client for communicating with Fliplet's API.
+* `src/state.js` - Manages the global state of the extension.
 
-## Get up and running straight away
+## Development Setup
 
+* Clone the repository: `git clone https://github.com/Fliplet/fliplet-vscode-extension.git`
+* Run `npm install` to install dependencies
 * Press `F5` to open a new window with your extension loaded.
-* Run your command from the command palette by pressing (`Ctrl+Shift+P` or `Cmd+Shift+P` on Mac) and typing `Hello World`.
+* You can relaunch the extension from the debug toolbar after changing code in `src/extension.ts`.
+* You can also reload (`Ctrl+R` or `Cmd+R` on Mac) the VS Code window with your extension to load your changes.
+* Run `npm run watch` in a terminal to compile changes automatically.
+
+## Testing the Extension
+
 * Set breakpoints in your code inside `src/extension.ts` to debug your extension.
 * Find output from your extension in the debug console.
+* The extension should create a new sidebar icon with the Fliplet logo.
+* Login with your Fliplet Studio credentials to test the extension features.
 
-## Make changes
-
-* You can relaunch the extension from the debug toolbar after changing code in `src/extension.ts`.
-* You can also reload (`Ctrl+R` or `Cmd+R` on Mac) the VS Code window with your extension to load your changes.
+## Key Features to Test
 
+1. Authentication and login flow
+2. Browsing apps, pages, and components
+3. Previewing pages
+4. Configuring and editing components
+5. Managing data sources
+6. Browsing Fliplet libraries
 
-## Explore the API
+## Making Changes
 
-* You can open the full set of our API when you open the file `node_modules/@types/vscode/index.d.ts`.
+* The extension uses TypeScript for type safety.
+* When adding new features, follow the existing patterns in the codebase.
+* Avoid using jQuery in new code; use native DOM methods instead.
+* Use modern JavaScript syntax (async/await instead of promise chains).
+* Document your code with JSDoc comments.
 
-## Run tests
+## Packaging and Publishing
 
-* Open the debug viewlet (`Ctrl+Shift+D` or `Cmd+Shift+D` on Mac) and from the launch configuration dropdown pick `Extension Tests`.
-* Press `F5` to run the tests in a new window with your extension loaded.
-* See the output of the test result in the debug console.
-* Make changes to `src/test/suite/extension.test.ts` or create new test files inside the `test/suite` folder.
-  * The provided test runner will only consider files matching the name pattern `**.test.ts`.
-  * You can create folders inside the `test` folder to structure your tests any way you want.
+1. Install vsce: `npm install -g vsce`
+2. Increase the version number in `package.json`
+3. Package the extension: `vsce package`
+4. Publish the extension: `vsce publish`
+5. Or upload manually via the UI at https://marketplace.visualstudio.com/manage/publishers/fliplet
 
-## Go further
+## Additional Resources
 
- * Reduce the extension size and improve the startup time by [bundling your extension](https://code.visualstudio.com/api/working-with-extensions/bundling-extension).
- * [Publish your extension](https://code.visualstudio.com/api/working-with-extensions/publishing-extension) on the VSCode extension marketplace.
- * Automate builds by setting up [Continuous Integration](https://code.visualstudio.com/api/working-with-extensions/continuous-integration).
+* [VS Code Extension API](https://code.visualstudio.com/api)
+* [Fliplet Developer Documentation](https://developers.fliplet.com/)
+* [Bundling Extension](https://code.visualstudio.com/api/working-with-extensions/bundling-extension)
+* [Publishing Extension](https://code.visualstudio.com/api/working-with-extensions/publishing-extension)
+* [Continuous Integration](https://code.visualstudio.com/api/working-with-extensions/continuous-integration)