feat(admin-ui): Display available UI extension points

Relates to #415
vendure-ecommerce · Nov 29, 2021 · 0963745 · 0963745
1 parent a9c740e
commit 0963745
Show file tree

Hide file tree

Showing 20 changed files with 305 additions and 45 deletions.
diff --git a/packages/admin-ui/src/app/app.module.ts b/packages/admin-ui/src/app/app.module.ts
@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { AppComponent, AppComponentModule } from '@vendure/admin-ui/core';
+import { addActionBarItem, AppComponent, AppComponentModule } from '@vendure/admin-ui/core';
 
 import { routes } from './app.routes';
 
@@ -10,7 +10,14 @@ import { routes } from './app.routes';
         AppComponentModule,
         RouterModule.forRoot(routes, { useHash: false, relativeLinkResolution: 'legacy' }),
     ],
-    providers: [],
+    providers: [
+        addActionBarItem({
+            id: 'test',
+            locationId: 'product-detail',
+            buttonStyle: 'link',
+            label: 'Test Button',
+        }),
+    ],
     bootstrap: [AppComponent],
 })
 export class AppModule {}
diff --git a/packages/admin-ui/src/lib/core/src/app.component.ts b/packages/admin-ui/src/lib/core/src/app.component.ts
@@ -1,5 +1,5 @@
 import { DOCUMENT } from '@angular/common';
-import { Component, Inject, OnInit } from '@angular/core';
+import { Component, HostListener, Inject, isDevMode, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 import { filter, map, switchMap } from 'rxjs/operators';
 
@@ -62,5 +62,32 @@ export class AppComponent implements OnInit {
                     }
                 },
             });
+
+        if (isDevMode()) {
+            // tslint:disable-next-line:no-console
+            console.log(
+                `%cVendure Admin UI: Press "ctrl/cmd + u" to view UI extension points`,
+                `color: #17C1FF; font-weight: bold;`,
+            );
+        }
+    }
+
+    @HostListener('window:keydown', ['$event'])
+    handleGlobalHotkeys(event: KeyboardEvent) {
+        if (event.ctrlKey === true && event.key === 'u') {
+            event.preventDefault();
+            if (isDevMode()) {
+                this.dataService.client
+                    .uiState()
+                    .single$.pipe(
+                        switchMap(({ uiState }) =>
+                            this.dataService.client.setDisplayUiExtensionPoints(
+                                !uiState.displayUiExtensionPoints,
+                            ),
+                        ),
+                    )
+                    .subscribe();
+            }
+        }
     }
 }
diff --git a/packages/admin-ui/src/lib/core/src/common/generated-types.ts b/packages/admin-ui/src/lib/core/src/common/generated-types.ts
@@ -2390,6 +2390,7 @@ export type Mutation = {
   setAsLoggedIn: UserStatus;
   setAsLoggedOut: UserStatus;
   setContentLanguage: LanguageCode;
+  setDisplayUiExtensionPoints: Scalars['Boolean'];
   setOrderCustomFields?: Maybe<Order>;
   setUiLanguage: LanguageCode;
   setUiTheme: Scalars['String'];
@@ -2846,6 +2847,11 @@ export type MutationSetContentLanguageArgs = {
 };
 
 
+export type MutationSetDisplayUiExtensionPointsArgs = {
+  display: Scalars['Boolean'];
+};
+
+
 export type MutationSetOrderCustomFieldsArgs = {
   input: UpdateOrderInput;
 };
@@ -4924,6 +4930,7 @@ export type UiState = {
   language: LanguageCode;
   contentLanguage: LanguageCode;
   theme: Scalars['String'];
+  displayUiExtensionPoints: Scalars['Boolean'];
 };
 
 export type UpdateActiveAdministratorInput = {
@@ -5481,6 +5488,13 @@ export type SetUiLanguageMutationVariables = Exact<{
 
 export type SetUiLanguageMutation = Pick<Mutation, 'setUiLanguage'>;
 
+export type SetDisplayUiExtensionPointsMutationVariables = Exact<{
+  display: Scalars['Boolean'];
+}>;
+
+
+export type SetDisplayUiExtensionPointsMutation = Pick<Mutation, 'setDisplayUiExtensionPoints'>;
+
 export type SetContentLanguageMutationVariables = Exact<{
   languageCode: LanguageCode;
 }>;
@@ -5516,7 +5530,7 @@ export type GetUiStateQueryVariables = Exact<{ [key: string]: never; }>;
 
 export type GetUiStateQuery = { uiState: (
     { __typename?: 'UiState' }
-    & Pick<UiState, 'language' | 'contentLanguage' | 'theme'>
+    & Pick<UiState, 'language' | 'contentLanguage' | 'theme' | 'displayUiExtensionPoints'>
   ) };
 
 export type GetClientStateQueryVariables = Exact<{ [key: string]: never; }>;
@@ -9068,6 +9082,11 @@ export namespace SetUiLanguage {
   export type Mutation = SetUiLanguageMutation;
 }
 
+export namespace SetDisplayUiExtensionPoints {
+  export type Variables = SetDisplayUiExtensionPointsMutationVariables;
+  export type Mutation = SetDisplayUiExtensionPointsMutation;
+}
+
 export namespace SetContentLanguage {
   export type Variables = SetContentLanguageMutationVariables;
   export type Mutation = SetContentLanguageMutation;

diff --git a/packages/admin-ui/src/lib/core/src/common/ui-extension-types.ts b/packages/admin-ui/src/lib/core/src/common/ui-extension-types.ts
@@ -0,0 +1,38 @@
+export type ActionBarLocationId =
+    | 'administrator-detail'
+    | 'administrator-list'
+    | 'asset-detail'
+    | 'asset-list'
+    | 'channel-detail'
+    | 'channel-list'
+    | 'collection-detail'
+    | 'collection-list'
+    | 'country-detail'
+    | 'country-list'
+    | 'customer-detail'
+    | 'customer-list'
+    | 'customer-group-list'
+    | 'facet-detail'
+    | 'facet-list'
+    | 'global-setting-detail'
+    | 'system-status'
+    | 'job-list'
+    | 'order-detail'
+    | 'order-list'
+    | 'payment-method-detail'
+    | 'payment-method-list'
+    | 'product-detail'
+    | 'product-list'
+    | 'promotion-detail'
+    | 'promotion-list'
+    | 'role-detail'
+    | 'role-list'
+    | 'shipping-method-detail'
+    | 'shipping-method-list'
+    | 'tax-category-detail'
+    | 'tax-category-list'
+    | 'tax-rate-detail'
+    | 'tax-rate-list'
+    | 'zone-list';
+
+export type UIExtensionLocationId = ActionBarLocationId;
diff --git a/packages/admin-ui/src/lib/core/src/components/main-nav/main-nav.component.html b/packages/admin-ui/src/lib/core/src/components/main-nav/main-nav.component.html
@@ -7,29 +7,37 @@
                 [class.collapsible]="section.collapsible"
                 *ngIf="shouldDisplayLink(section)"
             >
-                <ng-container *ngIf="navBuilderService.sectionBadges[section.id] | async as sectionBadge">
-                    <vdr-status-badge *ngIf="sectionBadge !== 'none'" [type]="sectionBadge"></vdr-status-badge>
-                </ng-container>
-                <input [id]="section.id" type="checkbox" [checked]="section.collapsedByDefault" />
-                <label [for]="section.id">{{ section.label | translate }}</label>
-                <ul class="nav-list">
-                    <ng-container *ngFor="let item of section.items">
-                        <li *ngIf="shouldDisplayLink(item)">
-                            <a
-                                class="nav-link"
-                                [attr.data-item-id]="section.id"
-                                [routerLink]="getRouterLink(item)"
-                                routerLinkActive="active"
-                            >
-                                <ng-container *ngIf="item.statusBadge | async as itemBadge">
-                                    <vdr-status-badge *ngIf="itemBadge.type !== 'none'" [type]="itemBadge.type"></vdr-status-badge>
-                                </ng-container>
-                                <clr-icon [attr.shape]="item.icon || 'block'" size="20"></clr-icon>
-                                {{ item.label | translate }}
-                            </a>
-                        </li>
+                <vdr-ui-extension-point [locationId]="section.id" api="navMenu" [topPx]="-6" [leftPx]="8">
+                    <ng-container *ngIf="navBuilderService.sectionBadges[section.id] | async as sectionBadge">
+                        <vdr-status-badge
+                            *ngIf="sectionBadge !== 'none'"
+                            [type]="sectionBadge"
+                        ></vdr-status-badge>
                     </ng-container>
-                </ul>
+                    <input [id]="section.id" type="checkbox" [checked]="section.collapsedByDefault" />
+                    <label [for]="section.id">{{ section.label | translate }}</label>
+                    <ul class="nav-list">
+                        <ng-container *ngFor="let item of section.items">
+                            <li *ngIf="shouldDisplayLink(item)">
+                                <a
+                                    class="nav-link"
+                                    [attr.data-item-id]="section.id"
+                                    [routerLink]="getRouterLink(item)"
+                                    routerLinkActive="active"
+                                >
+                                    <ng-container *ngIf="item.statusBadge | async as itemBadge">
+                                        <vdr-status-badge
+                                            *ngIf="itemBadge.type !== 'none'"
+                                            [type]="itemBadge.type"
+                                        ></vdr-status-badge>
+                                    </ng-container>
+                                    <clr-icon [attr.shape]="item.icon || 'block'" size="20"></clr-icon>
+                                    {{ item.label | translate }}
+                                </a>
+                            </li>
+                        </ng-container>
+                    </ul>
+                </vdr-ui-extension-point>
             </section>
         </ng-container>
     </section>

diff --git a/packages/admin-ui/src/lib/core/src/data/client-state/client-defaults.ts b/packages/admin-ui/src/lib/core/src/data/client-state/client-defaults.ts
@@ -25,6 +25,7 @@ export function getClientDefaults(localStorageService: LocalStorageService) {
             language: currentLanguage,
             contentLanguage: currentContentLanguage,
             theme: activeTheme,
+            displayUiExtensionPoints: false,
             __typename: 'UiState',
         } as GetUiState.UiState,
     };

diff --git a/packages/admin-ui/src/lib/core/src/data/client-state/client-resolvers.ts b/packages/admin-ui/src/lib/core/src/data/client-state/client-resolvers.ts
@@ -8,6 +8,7 @@ import {
     SetActiveChannel,
     SetAsLoggedIn,
     SetContentLanguage,
+    SetDisplayUiExtensionPoints,
     SetUiLanguage,
     SetUiTheme,
     UpdateUserChannels,
@@ -79,6 +80,7 @@ export const clientResolvers: ResolverDefinition = {
                     language: args.languageCode,
                     contentLanguage: previous.uiState.contentLanguage,
                     theme: previous.uiState.theme,
+                    displayUiExtensionPoints: previous.uiState.displayUiExtensionPoints,
                 },
             };
             cache.writeQuery({ query: GET_UI_STATE, data });
@@ -93,6 +95,7 @@ export const clientResolvers: ResolverDefinition = {
                     language: previous.uiState.language,
                     contentLanguage: args.languageCode,
                     theme: previous.uiState.theme,
+                    displayUiExtensionPoints: previous.uiState.displayUiExtensionPoints,
                 },
             };
             cache.writeQuery({ query: GET_UI_STATE, data });
@@ -107,11 +110,27 @@ export const clientResolvers: ResolverDefinition = {
                     language: previous.uiState.language,
                     contentLanguage: previous.uiState.contentLanguage,
                     theme: args.theme,
+                    displayUiExtensionPoints: previous.uiState.displayUiExtensionPoints,
                 },
             };
             cache.writeQuery({ query: GET_UI_STATE, data });
             return args.theme;
         },
+        setDisplayUiExtensionPoints: (_, args: SetDisplayUiExtensionPoints.Variables, { cache }): boolean => {
+            // tslint:disable-next-line:no-non-null-assertion
+            const previous = cache.readQuery<GetUiState.Query>({ query: GET_UI_STATE })!;
+            const data: GetUiState.Query = {
+                uiState: {
+                    __typename: 'UiState',
+                    language: previous.uiState.language,
+                    contentLanguage: previous.uiState.contentLanguage,
+                    displayUiExtensionPoints: args.display,
+                    theme: previous.uiState.theme,
+                },
+            };
+            cache.writeQuery({ query: GET_UI_STATE, data });
+            return args.display;
+        },
         setActiveChannel: (_, args: SetActiveChannel.Variables, { cache }): UserStatus => {
             // tslint:disable-next-line:no-non-null-assertion
             const previous = cache.readQuery<GetUserStatus.Query>({ query: GET_USER_STATUS })!;

diff --git a/packages/admin-ui/src/lib/core/src/data/client-state/client-types.graphql b/packages/admin-ui/src/lib/core/src/data/client-state/client-types.graphql
@@ -13,6 +13,7 @@ type Mutation {
     setContentLanguage(languageCode: LanguageCode!): LanguageCode!
     setUiTheme(theme: String!): String!
     setActiveChannel(channelId: ID!): UserStatus!
+    setDisplayUiExtensionPoints(display: Boolean!): Boolean!
     updateUserChannels(channels: [CurrentUserChannelInput!]!): UserStatus!
 }
 
@@ -33,6 +34,7 @@ type UiState {
     language: LanguageCode!
     contentLanguage: LanguageCode!
     theme: String!
+    displayUiExtensionPoints: Boolean!
 }
 
 input CurrentUserChannelInput {

diff --git a/packages/admin-ui/src/lib/core/src/data/definitions/client-definitions.ts b/packages/admin-ui/src/lib/core/src/data/definitions/client-definitions.ts
@@ -52,6 +52,12 @@ export const SET_UI_LANGUAGE = gql`
     }
 `;
 
+export const SET_DISPLAY_UI_EXTENSION_POINTS = gql`
+    mutation SetDisplayUiExtensionPoints($display: Boolean!) {
+        setDisplayUiExtensionPoints(display: $display) @client
+    }
+`;
+
 export const SET_CONTENT_LANGUAGE = gql`
     mutation SetContentLanguage($languageCode: LanguageCode!) {
         setContentLanguage(languageCode: $languageCode) @client
@@ -87,6 +93,7 @@ export const GET_UI_STATE = gql`
             language
             contentLanguage
             theme
+            displayUiExtensionPoints
         }
     }
 `;
@@ -103,6 +110,7 @@ export const GET_CLIENT_STATE = gql`
             language
             contentLanguage
             theme
+            displayUiExtensionPoints
         }
     }
     ${USER_STATUS_FRAGMENT}

diff --git a/packages/admin-ui/src/lib/core/src/data/providers/client-data.service.ts b/packages/admin-ui/src/lib/core/src/data/providers/client-data.service.ts
@@ -10,6 +10,7 @@ import {
     SetActiveChannel,
     SetAsLoggedIn,
     SetContentLanguage,
+    SetDisplayUiExtensionPoints,
     SetUiLanguage,
     SetUiTheme,
     UpdateUserChannels,
@@ -24,6 +25,7 @@ import {
     SET_AS_LOGGED_IN,
     SET_AS_LOGGED_OUT,
     SET_CONTENT_LANGUAGE,
+    SET_DISPLAY_UI_EXTENSION_POINTS,
     SET_UI_LANGUAGE,
     SET_UI_THEME,
     UPDATE_USER_CHANNELS,
@@ -97,6 +99,15 @@ export class ClientDataService {
         });
     }
 
+    setDisplayUiExtensionPoints(display: boolean) {
+        return this.baseDataService.mutate<
+            SetDisplayUiExtensionPoints.Mutation,
+            SetDisplayUiExtensionPoints.Variables
+        >(SET_DISPLAY_UI_EXTENSION_POINTS, {
+            display,
+        });
+    }
+
     setActiveChannel(channelId: string) {
         return this.baseDataService.mutate<SetActiveChannel.Mutation, SetActiveChannel.Variables>(
             SET_ACTIVE_CHANNEL,