feat(admin-ui): Restrict Asset input based on permitted file types

Relates to #421

packages/admin-ui/src/lib/core/src/common/generated-types.ts

@@ -42,7 +42,13 @@ export type Address = Node & {
   phoneNumber?: Maybe<Scalars['String']>;
   defaultShippingAddress?: Maybe<Scalars['Boolean']>;
   defaultBillingAddress?: Maybe<Scalars['Boolean']>;
-  customFields?: Maybe<Scalars['JSON']>;
+  customFields?: Maybe<AddressCustomFields>;
+};
+
+export type AddressCustomFields = {
+   __typename?: 'AddressCustomFields';
+  instructions?: Maybe<Scalars['String']>;
+  verified?: Maybe<Scalars['Boolean']>;
 };
 
 export type Adjustment = {
@@ -417,6 +423,11 @@ export type CountryTranslationInput = {
   name?: Maybe<Scalars['String']>;
 };
 
+export type CreateAddressCustomFieldsInput = {
+  instructions?: Maybe<Scalars['String']>;
+  verified?: Maybe<Scalars['Boolean']>;
+};
+
 export type CreateAddressInput = {
   fullName?: Maybe<Scalars['String']>;
   company?: Maybe<Scalars['String']>;
@@ -429,7 +440,7 @@ export type CreateAddressInput = {
   phoneNumber?: Maybe<Scalars['String']>;
   defaultShippingAddress?: Maybe<Scalars['Boolean']>;
   defaultBillingAddress?: Maybe<Scalars['Boolean']>;
-  customFields?: Maybe<Scalars['JSON']>;
+  customFields?: Maybe<CreateAddressCustomFieldsInput>;
 };
 
 export type CreateAdministratorInput = {
@@ -2507,6 +2518,7 @@ export type OrderAddress = {
   country?: Maybe<Scalars['String']>;
   countryCode?: Maybe<Scalars['String']>;
   phoneNumber?: Maybe<Scalars['String']>;
+  customFields?: Maybe<AddressCustomFields>;
 };
 
 export type OrderFilterParameter = {
@@ -3392,6 +3404,7 @@ export type SearchResultSortParameter = {
 export type ServerConfig = {
    __typename?: 'ServerConfig';
   orderProcess: Array<OrderProcessState>;
+  permittedAssetTypes: Array<Scalars['String']>;
   customFieldConfig: CustomFields;
 };
 
@@ -3610,6 +3623,11 @@ export type UiState = {
   language: LanguageCode;
 };
 
+export type UpdateAddressCustomFieldsInput = {
+  instructions?: Maybe<Scalars['String']>;
+  verified?: Maybe<Scalars['Boolean']>;
+};
+
 export type UpdateAddressInput = {
   id: Scalars['ID'];
   fullName?: Maybe<Scalars['String']>;
@@ -3623,7 +3641,7 @@ export type UpdateAddressInput = {
   phoneNumber?: Maybe<Scalars['String']>;
   defaultShippingAddress?: Maybe<Scalars['Boolean']>;
   defaultBillingAddress?: Maybe<Scalars['Boolean']>;
-  customFields?: Maybe<Scalars['JSON']>;
+  customFields?: Maybe<UpdateAddressCustomFieldsInput>;
 };
 
 export type UpdateAdministratorInput = {
@@ -6341,6 +6359,7 @@ export type GetServerConfigQuery = (
     { __typename?: 'GlobalSettings' }
     & { serverConfig: (
       { __typename?: 'ServerConfig' }
+      & Pick<ServerConfig, 'permittedAssetTypes'>
       & { orderProcess: Array<(
         { __typename?: 'OrderProcessState' }
         & Pick<OrderProcessState, 'name' | 'to'>

packages/admin-ui/src/lib/core/src/data/definitions/settings-definitions.ts

@@ -541,6 +541,7 @@ export const GET_SERVER_CONFIG = gql`
                     name
                     to
                 }
+                permittedAssetTypes
                 customFieldConfig {
                     Address {
                         ...CustomFields

packages/admin-ui/src/lib/core/src/data/server-config.ts

@@ -47,10 +47,10 @@ export class ServerConfigService {
             .query<GetServerConfig.Query>(GET_SERVER_CONFIG)
             .single$.toPromise()
             .then(
-                (result) => {
+                result => {
                     this._serverConfig = result.globalSettings.serverConfig;
                 },
-                (err) => {
+                err => {
                     // Let the error fall through to be caught by the http interceptor.
                 },
             );
@@ -59,11 +59,11 @@ export class ServerConfigService {
     getAvailableLanguages() {
         return this.baseDataService
             .query<GetGlobalSettings.Query>(GET_GLOBAL_SETTINGS, {}, 'cache-first')
-            .mapSingle((res) => res.globalSettings.availableLanguages);
+            .mapSingle(res => res.globalSettings.availableLanguages);
     }
 
     /**
-     * When any of the GLobalSettings are modified, this method should be called to update the Apollo cache.
+     * When any of the GlobalSettings are modified, this method should be called to update the Apollo cache.
      */
     refreshGlobalSettings() {
         return this.baseDataService.query<GetGlobalSettings.Query>(GET_GLOBAL_SETTINGS, {}, 'network-only')

packages/admin-ui/src/lib/core/src/shared/components/asset-file-input/asset-file-input.component.html

@@ -1,12 +1,12 @@
-<input type="file" class="file-input" #fileInput (change)="select($event)" multiple />
+<input type="file" class="file-input" #fileInput (change)="select($event)" multiple [accept]="accept" />
 <button class="btn btn-primary" (click)="fileInput.click()" [disabled]="uploading">
-    <ng-container *ngIf="uploading; else selectable" >
+    <ng-container *ngIf="uploading; else selectable">
         <clr-spinner clrInline></clr-spinner>
         {{ 'asset.uploading' | translate }}
     </ng-container>
     <ng-template #selectable>
-    <clr-icon shape="upload-cloud"></clr-icon>
-    {{ 'asset.upload-assets' | translate }}
+        <clr-icon shape="upload-cloud"></clr-icon>
+        {{ 'asset.upload-assets' | translate }}
     </ng-template>
 </button>
 <div

packages/admin-ui/src/lib/core/src/shared/components/asset-file-input/asset-file-input.component.ts

@@ -9,6 +9,8 @@ import {
 } from '@angular/core';
 import { notNullOrUndefined } from '@vendure/common/lib/shared-utils';
 
+import { ServerConfigService } from '../../../data/server-config';
+
 /**
  * A component for selecting files to upload as new Assets.
  */
@@ -34,8 +36,12 @@ export class AssetFileInputComponent implements OnInit {
         'top.px': 0,
         'left.px': 0,
     };
+    accept: string;
+
+    constructor(private serverConfig: ServerConfigService) {}
 
     ngOnInit() {
+        this.accept = this.serverConfig.serverConfig.permittedAssetTypes.join(',');
         this.fitDropZoneToTarget();
     }
 
@@ -65,7 +71,7 @@ export class AssetFileInputComponent implements OnInit {
         this.dragging = false;
         this.overDropZone = false;
         const files = Array.from(event.dataTransfer ? event.dataTransfer.items : [])
-            .map((i) => i.getAsFile())
+            .map(i => i.getAsFile())
             .filter(notNullOrUndefined);
         this.selectFiles.emit(files);
     }

packages/admin-ui/src/lib/order/src/public_api.ts

@@ -13,6 +13,7 @@ export * from './components/order-process-graph/constants';
 export * from './components/order-process-graph/order-process-edge.component';
 export * from './components/order-process-graph/order-process-graph.component';
 export * from './components/order-process-graph/order-process-node.component';
+export * from './components/order-process-graph/types';
 export * from './components/order-process-graph-dialog/order-process-graph-dialog.component';
 export * from './components/payment-detail/payment-detail.component';
 export * from './components/payment-state-label/payment-state-label.component';