Browse Source

feat(admin-ui): Display description tooltip for configurable args

Michael Bromley 3 years ago
parent
commit
837e1f2019

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

@@ -8858,7 +8858,7 @@ export type ConfigurableOperationDefFragment = (
   & Pick<ConfigurableOperationDefinition, 'code' | 'description'>
   & Pick<ConfigurableOperationDefinition, 'code' | 'description'>
   & { args: Array<(
   & { args: Array<(
     { __typename?: 'ConfigArgDefinition' }
     { __typename?: 'ConfigArgDefinition' }
-    & Pick<ConfigArgDefinition, 'name' | 'type' | 'required' | 'defaultValue' | 'list' | 'ui' | 'label'>
+    & Pick<ConfigArgDefinition, 'name' | 'type' | 'required' | 'defaultValue' | 'list' | 'ui' | 'label' | 'description'>
   )> }
   )> }
 );
 );
 
 

+ 1 - 0
packages/admin-ui/src/lib/core/src/data/definitions/shared-definitions.ts

@@ -20,6 +20,7 @@ export const CONFIGURABLE_OPERATION_DEF_FRAGMENT = gql`
             list
             list
             ui
             ui
             label
             label
+            description
         }
         }
         code
         code
         description
         description

+ 6 - 2
packages/admin-ui/src/lib/core/src/shared/components/configurable-input/configurable-input.component.html

@@ -3,8 +3,12 @@
     <div class="card-block" *ngIf="operation.args?.length">
     <div class="card-block" *ngIf="operation.args?.length">
         <form [formGroup]="form" *ngIf="operation" class="operation-inputs">
         <form [formGroup]="form" *ngIf="operation" class="operation-inputs">
             <div *ngFor="let arg of operation.args; trackBy: trackByName" class="arg-row">
             <div *ngFor="let arg of operation.args; trackBy: trackByName" class="arg-row">
-                <ng-container *ngIf="form.get(arg.name)">
-                    <label>{{ getArgDef(arg)?.label || (arg.name | sentenceCase) }}</label>
+                <ng-container *ngIf="form.get(arg.name) && getArgDef(arg) as argDef">
+                    <label>{{ argDef.label || (arg.name | sentenceCase) }}</label>
+                    <vdr-help-tooltip
+                        *ngIf="argDef.description"
+                        [content]="argDef.description"
+                    ></vdr-help-tooltip>
                     <vdr-dynamic-form-input
                     <vdr-dynamic-form-input
                         [def]="getArgDef(arg)"
                         [def]="getArgDef(arg)"
                         [readonly]="readonly"
                         [readonly]="readonly"