feat(web-organizations): add organization detail editing and isolate detail view state from global navigation

ts_web/elements/sg-app-shell.ts

@@ -152,7 +152,7 @@ export class SgAppShell extends DeesElement {
     this.fetchAuthProviders();
 
     // Resolve async view tab imports
-    const allTabs = await Promise.all(
+    this.allResolvedViewTabs = await Promise.all(
       this.viewTabs.map(async (tab) => ({
         name: tab.name,
         iconName: tab.iconName,
@@ -162,8 +162,8 @@ export class SgAppShell extends DeesElement {
 
     // Filter admin tab based on user role
     this.resolvedViewTabs = this.loginState.identity?.isSystemAdmin
-      ? allTabs
-      : allTabs.filter((t) => t.name !== 'Admin');
+      ? this.allResolvedViewTabs
+      : this.allResolvedViewTabs.filter((t) => t.name !== 'Admin');
 
     this.requestUpdate();
     await this.updateComplete;

ts_web/elements/sg-view-organizations.ts

@@ -1,5 +1,6 @@
 import * as appstate from '../appstate.js';
 import * as shared from './shared/index.js';
+import { appRouter } from '../router.js';
 import {
   css,
   cssManager,
@@ -23,6 +24,9 @@ export class SgViewOrganizations extends DeesElement {
   @state()
   accessor uiState: appstate.IUiState = { activeView: 'organizations' };
 
+  @state()
+  accessor detailOrgId: string | null = null;
+
   constructor() {
     super();
     const orgSub = appstate.organizationsStatePart
@@ -48,9 +52,10 @@ export class SgViewOrganizations extends DeesElement {
   async connectedCallback() {
     super.connectedCallback();
     await appstate.organizationsStatePart.dispatchAction(appstate.fetchOrganizationsAction, null);
-    // If there's an entity ID, load the detail
+    // If there's an entity ID from the URL, copy it to internal state
     if (this.uiState.activeEntityId) {
-      await this.loadOrgDetail(this.uiState.activeEntityId);
+      this.detailOrgId = this.uiState.activeEntityId;
+      await this.loadOrgDetail(this.detailOrgId);
     }
   }
 
@@ -70,7 +75,7 @@ export class SgViewOrganizations extends DeesElement {
   }
 
   public render(): TemplateResult {
-    if (this.uiState.activeEntityId && this.organizationsState.currentOrg) {
+    if (this.detailOrgId && this.organizationsState.currentOrg) {
       return html`
         <sg-organization-detail-view
           .organization="${this.organizationsState.currentOrg}"
@@ -79,6 +84,8 @@ export class SgViewOrganizations extends DeesElement {
           @back="${() => this.goBack()}"
           @select-repo="${(e: CustomEvent) => this.selectRepo(e.detail.repositoryId)}"
           @create-repo="${() => {/* TODO: create repo modal */}}"
+          @edit="${(e: CustomEvent) => this.handleEditOrg(e.detail)}"
+          @delete="${(e: CustomEvent) => this.handleDeleteOrg(e.detail.organizationId)}"
         ></sg-organization-detail-view>
       `;
     }
@@ -93,10 +100,7 @@ export class SgViewOrganizations extends DeesElement {
   }
 
   private selectOrg(orgId: string) {
-    appstate.uiStatePart.setState({
-      ...appstate.uiStatePart.getState(),
-      activeEntityId: orgId,
-    });
+    this.detailOrgId = orgId;
     this.loadOrgDetail(orgId);
   }
 
@@ -106,10 +110,7 @@ export class SgViewOrganizations extends DeesElement {
   }
 
   private goBack() {
-    appstate.uiStatePart.setState({
-      ...appstate.uiStatePart.getState(),
-      activeEntityId: undefined,
-    });
+    this.detailOrgId = null;
     appstate.organizationsStatePart.setState({
       ...appstate.organizationsStatePart.getState(),
       currentOrg: null,
@@ -118,6 +119,31 @@ export class SgViewOrganizations extends DeesElement {
     });
   }
 
+  private async handleEditOrg(data: {
+    organizationId: string;
+    displayName?: string;
+    description?: string;
+    website?: string;
+    isPublic?: boolean;
+  }) {
+    await appstate.organizationsStatePart.dispatchAction(
+      appstate.updateOrganizationAction,
+      data,
+    );
+    // Re-load detail to reflect changes
+    if (this.detailOrgId) {
+      await this.loadOrgDetail(this.detailOrgId);
+    }
+  }
+
+  private async handleDeleteOrg(organizationId: string) {
+    await appstate.organizationsStatePart.dispatchAction(
+      appstate.deleteOrganizationAction,
+      { organizationId },
+    );
+    this.goBack();
+  }
+
   private async createOrg(data: { name: string; displayName?: string; description?: string }) {
     await appstate.organizationsStatePart.dispatchAction(
       appstate.createOrganizationAction,

ts_web/elements/sg-view-packages.ts

@@ -1,5 +1,6 @@
 import * as appstate from '../appstate.js';
 import * as shared from './shared/index.js';
+import { appRouter } from '../router.js';
 import {
   css,
   cssManager,
@@ -25,6 +26,9 @@ export class SgViewPackages extends DeesElement {
   @state()
   accessor uiState: appstate.IUiState = { activeView: 'packages' };
 
+  @state()
+  accessor detailPackageId: string | null = null;
+
   constructor() {
     super();
     const pkgSub = appstate.packagesStatePart
@@ -49,8 +53,10 @@ export class SgViewPackages extends DeesElement {
 
   async connectedCallback() {
     super.connectedCallback();
+    // If there's an entity ID from the URL, copy it to internal state
     if (this.uiState.activeEntityId) {
-      await this.loadPackageDetail(this.uiState.activeEntityId);
+      this.detailPackageId = this.uiState.activeEntityId;
+      await this.loadPackageDetail(this.detailPackageId);
     } else {
       await appstate.packagesStatePart.dispatchAction(
         appstate.searchPackagesAction,
@@ -71,7 +77,7 @@ export class SgViewPackages extends DeesElement {
   }
 
   public render(): TemplateResult {
-    if (this.uiState.activeEntityId && this.packagesState.currentPackage) {
+    if (this.detailPackageId && this.packagesState.currentPackage) {
       return html`
         <sg-package-detail-view
           .package="${this.packagesState.currentPackage}"
@@ -98,18 +104,12 @@ export class SgViewPackages extends DeesElement {
   }
 
   private selectPackage(packageId: string) {
-    appstate.uiStatePart.setState({
-      ...appstate.uiStatePart.getState(),
-      activeEntityId: packageId,
-    });
+    this.detailPackageId = packageId;
     this.loadPackageDetail(packageId);
   }
 
   private goBack() {
-    appstate.uiStatePart.setState({
-      ...appstate.uiStatePart.getState(),
-      activeEntityId: undefined,
-    });
+    this.detailPackageId = null;
     appstate.packagesStatePart.setState({
       ...appstate.packagesStatePart.getState(),
       currentPackage: null,