Restore help text icon for non AI inputs #3716

enonic · Sep 23, 2024 · 372ac64 · 372ac64
1 parent 49e7ead
commit 372ac64
Show file tree

Hide file tree

Showing 9 changed files with 90 additions and 75 deletions.
diff --git a/.gitignore b/.gitignore
@@ -25,3 +25,4 @@ src/main/resources/assets/spec/coverage/
 
 # Visual Studio Code
 /bin/
+.vscode/
diff --git a/src/main/resources/assets/admin/common/js/ai/AiHelper.ts b/src/main/resources/assets/admin/common/js/ai/AiHelper.ts
@@ -43,7 +43,7 @@ export class AiHelper {
 
         Store.instance().get(AI_HELPERS_KEY).push(this);
 
-        if (config.icon?.container) {
+        if (this.config.icon) {
             this.aiIcon = new AiActionButton();
             this.config.icon.container.appendChild(this.aiIcon);
         }

diff --git a/src/main/resources/assets/admin/common/js/form/InputView.ts b/src/main/resources/assets/admin/common/js/form/InputView.ts
@@ -1,31 +1,32 @@
 import * as Q from 'q';
+import {Property} from '../data/Property';
 import {PropertyArray} from '../data/PropertyArray';
 import {PropertySet} from '../data/PropertySet';
-import {Property} from '../data/Property';
-import {BaseInputTypeNotManagingAdd} from './inputtype/support/BaseInputTypeNotManagingAdd';
-import {i18n} from '../util/Messages';
-import {StringHelper} from '../util/StringHelper';
-import {FormItemView, FormItemViewConfig} from './FormItemView';
-import {InputTypeView} from './inputtype/InputTypeView';
 import {DivEl} from '../dom/DivEl';
+import {ObjectHelper} from '../ObjectHelper';
 import {Button} from '../ui/button/Button';
-import {OccurrenceRemovedEvent} from './OccurrenceRemovedEvent';
-import {InputValidityChangedEvent} from './inputtype/InputValidityChangedEvent';
-import {InputTypeName} from './InputTypeName';
-import {InputValidationRecording} from './inputtype/InputValidationRecording';
+import {TogglerButton} from '../ui/button/TogglerButton';
+import {assertNotNull} from '../util/Assert';
+import {i18n} from '../util/Messages';
+import {StringHelper} from '../util/StringHelper';
 import {FormContext} from './FormContext';
-import {Input} from './Input';
 import {FormItemOccurrenceView} from './FormItemOccurrenceView';
-import {ValidationRecording} from './ValidationRecording';
-import {RecordingValidityChangedEvent} from './RecordingValidityChangedEvent';
+import {FormItemView, FormItemViewConfig} from './FormItemView';
 import {HelpTextContainer} from './HelpTextContainer';
-import {assertNotNull} from '../util/Assert';
+import {Input} from './Input';
 import {InputLabel} from './InputLabel';
 import {InputTypeManager} from './inputtype/InputTypeManager';
-import {ValidationRecordingPath} from './ValidationRecordingPath';
-import {InputViewValidationViewer} from './InputViewValidationViewer';
-import {TogglerButton} from '../ui/button/TogglerButton';
+import {InputTypeView} from './inputtype/InputTypeView';
+import {InputValidationRecording} from './inputtype/InputValidationRecording';
+import {InputValidityChangedEvent} from './inputtype/InputValidityChangedEvent';
 import {BaseInputType} from './inputtype/support/BaseInputType';
+import {BaseInputTypeNotManagingAdd} from './inputtype/support/BaseInputTypeNotManagingAdd';
+import {InputTypeName} from './InputTypeName';
+import {InputViewValidationViewer} from './InputViewValidationViewer';
+import {OccurrenceRemovedEvent} from './OccurrenceRemovedEvent';
+import {RecordingValidityChangedEvent} from './RecordingValidityChangedEvent';
+import {ValidationRecording} from './ValidationRecording';
+import {ValidationRecordingPath} from './ValidationRecordingPath';
 
 export interface InputViewConfig {
 
@@ -44,7 +45,7 @@ export class InputView
     public static debug: boolean = false;
     private static ERROR_DETAILS_HIDDEN_CLS: string = 'error-details-hidden';
 
-    private input: Input;
+    private readonly input: Input;
     private parentPropertySet: PropertySet;
     private propertyArray: PropertyArray;
     private inputTypeView: InputTypeView;
@@ -82,22 +83,27 @@ export class InputView
             }
         }
 
-        if (this.input.getHelpText()) {
+        this.inputTypeView = this.createInputTypeView();
+        const isAiEditable = ObjectHelper.iFrameSafeInstanceOf(this.inputTypeView, BaseInputType) &&
+                             (this.inputTypeView as BaseInputType).isAiEditable();
+
+        this.toggleClass('ai-editable', isAiEditable);
+
+        if (this.input.getHelpText() && !isAiEditable) {
             this.helpText = new HelpTextContainer(this.input.getHelpText());
+            this.appendChild(this.helpText.getToggler());
         }
 
         if (this.input.isMaximizeUIInputWidth() === false) {
             this.addClass('label-inline');
         }
 
-        this.inputTypeView = this.createInputTypeView();
-
         this.propertyArray = this.getPropertyArray(this.parentPropertySet);
 
         return this.inputTypeView.layout(this.input, this.propertyArray).then(() => {
             this.appendChild(this.inputTypeView.getElement());
 
-            if (!!this.helpText) {
+            if (this.helpText) {
                 this.appendChild(this.helpText.getHelpText());
             }
 
@@ -279,9 +285,7 @@ export class InputView
     }
 
     toggleHelpText(show?: boolean) {
-        if (!!this.helpText) {
-            this.helpText.toggleHelpText(show);
-        }
+        this.helpText?.toggleHelpText(show);
     }
 
     hasHelpText(): boolean {

diff --git a/src/main/resources/assets/admin/common/js/form/inputtype/support/BaseInputType.ts b/src/main/resources/assets/admin/common/js/form/inputtype/support/BaseInputType.ts
@@ -1,16 +1,16 @@
-import {DivEl} from '../../../dom/DivEl';
-import {InputTypeView} from '../InputTypeView';
-import {Input} from '../../Input';
-import {InputValidityChangedEvent} from '../InputValidityChangedEvent';
-import {Element} from '../../../dom/Element';
-import {PropertyArray} from '../../../data/PropertyArray';
 import * as Q from 'q';
-import {Value} from '../../../data/Value';
 import {ClassHelper} from '../../../ClassHelper';
+import {PropertyArray} from '../../../data/PropertyArray';
+import {Value} from '../../../data/Value';
 import {ValueType} from '../../../data/ValueType';
+import {DivEl} from '../../../dom/DivEl';
+import {Element} from '../../../dom/Element';
+import {Input} from '../../Input';
+import {InputTypeView} from '../InputTypeView';
+import {InputTypeViewContext} from '../InputTypeViewContext';
 import {InputValidationRecording} from '../InputValidationRecording';
+import {InputValidityChangedEvent} from '../InputValidityChangedEvent';
 import {ValueChangedEvent} from '../ValueChangedEvent';
-import {InputTypeViewContext} from '../InputTypeViewContext';
 
 export abstract class BaseInputType extends DivEl
     implements InputTypeView {
@@ -124,4 +124,7 @@ export abstract class BaseInputType extends DivEl
     //
     }
 
+    isAiEditable(): boolean {
+        return false;
+    }
 }
diff --git a/...in/resources/assets/admin/common/js/form/inputtype/support/BaseInputTypeNotManagingAdd.ts b/...in/resources/assets/admin/common/js/form/inputtype/support/BaseInputTypeNotManagingAdd.ts
@@ -1,35 +1,34 @@
 import * as $ from 'jquery';
 import * as Q from 'q';
+import {ClassHelper} from '../../../ClassHelper';
 import {Property} from '../../../data/Property';
 import {PropertyArray} from '../../../data/PropertyArray';
 import {Value} from '../../../data/Value';
+import {Element} from '../../../dom/Element';
 import {FormInputEl} from '../../../dom/FormInputEl';
-import {InputTypeViewContext} from '../InputTypeViewContext';
+import {ObjectHelper} from '../../../ObjectHelper';
+import {assertNotNull} from '../../../util/Assert';
+import {i18n} from '../../../util/Messages';
+import {ValidationError} from '../../../ValidationError';
+import {AdditionalValidationRecord} from '../../AdditionalValidationRecord';
 import {Input} from '../../Input';
-import {InputValidityChangedEvent} from '../InputValidityChangedEvent';
-import {Element} from '../../../dom/Element';
-import {InputValidationRecording} from '../InputValidationRecording';
 import {OccurrenceAddedEvent} from '../../OccurrenceAddedEvent';
-import {OccurrenceRenderedEvent} from '../../OccurrenceRenderedEvent';
 import {OccurrenceRemovedEvent} from '../../OccurrenceRemovedEvent';
+import {OccurrenceRenderedEvent} from '../../OccurrenceRenderedEvent';
+import {InputTypeViewContext} from '../InputTypeViewContext';
+import {InputValidationRecording} from '../InputValidationRecording';
+import {InputValidityChangedEvent} from '../InputValidityChangedEvent';
 import {ValueChangedEvent} from '../ValueChangedEvent';
-import {ClassHelper} from '../../../ClassHelper';
-import {ObjectHelper} from '../../../ObjectHelper';
-import {InputOccurrenceView} from './InputOccurrenceView';
+import {BaseInputType} from './BaseInputType';
 import {InputOccurrences} from './InputOccurrences';
-import {assertNotNull} from '../../../util/Assert';
+import {InputOccurrenceView} from './InputOccurrenceView';
 import {OccurrenceValidationRecord} from './OccurrenceValidationRecord';
-import {BaseInputType} from './BaseInputType';
-import {ValidationError} from '../../../ValidationError';
-import {AdditionalValidationRecord} from '../../AdditionalValidationRecord';
-import {i18n} from '../../../util/Messages';
 
 export abstract class BaseInputTypeNotManagingAdd
     extends BaseInputType {
 
     public static debug: boolean = false;
     protected propertyArray: PropertyArray;
-    protected ignorePropertyChange: boolean;
     protected occurrenceValidationState: Map<string, OccurrenceValidationRecord> = new Map<string, OccurrenceValidationRecord>();
     private inputOccurrences: InputOccurrences;
     private occurrenceValueChangedListeners: ((occurrence: Element, value: Value) => void)[] = [];
@@ -397,8 +396,4 @@ export abstract class BaseInputTypeNotManagingAdd
             }
         });
     }
-
-    isEditableByAI(): boolean {
-        return false;
-    }
 }
diff --git a/src/main/resources/assets/admin/common/js/form/inputtype/support/InputOccurrenceView.ts b/src/main/resources/assets/admin/common/js/form/inputtype/support/InputOccurrenceView.ts
@@ -194,7 +194,7 @@ export class InputOccurrenceView
 
         this.property.onPropertyValueChanged(this.propertyValueChangedHandler);
 
-        if (this.inputTypeView.getContext()?.formContext?.isAiEditable() && this.inputTypeView.isEditableByAI()) {
+        if (this.inputTypeView.isAiEditable()) {
             new AiHelper({
                 dataPathElement: this.inputElement,
                 getPathFunc: () => this.getDataPath(),

diff --git a/src/main/resources/assets/admin/common/js/form/inputtype/text/TextInputType.ts b/src/main/resources/assets/admin/common/js/form/inputtype/text/TextInputType.ts
@@ -1,21 +1,21 @@
-import {NumberHelper} from '../../../util/NumberHelper';
-import {FormInputEl} from '../../../dom/FormInputEl';
-import {ValueTypes} from '../../../data/ValueTypes';
-import {i18n} from '../../../util/Messages';
-import {BaseInputTypeNotManagingAdd} from '../support/BaseInputTypeNotManagingAdd';
-import {InputTypeViewContext} from '../InputTypeViewContext';
-import {Property} from '../../../data/Property';
-import {AdditionalValidationRecord} from '../../AdditionalValidationRecord';
-import {InputValueLengthCounterEl} from './InputValueLengthCounterEl';
 import * as Q from 'q';
+import {Property} from '../../../data/Property';
 import {Value} from '../../../data/Value';
-import {StringHelper} from '../../../util/StringHelper';
-import {Element, LangDirection} from '../../../dom/Element';
-import {ValueTypeConverter} from '../../../data/ValueTypeConverter';
-import {ValueChangedEvent} from '../../../ValueChangedEvent';
 import {ValueType} from '../../../data/ValueType';
-import {TextInput} from '../../../ui/text/TextInput';
+import {ValueTypeConverter} from '../../../data/ValueTypeConverter';
+import {ValueTypes} from '../../../data/ValueTypes';
+import {Element, LangDirection} from '../../../dom/Element';
+import {FormInputEl} from '../../../dom/FormInputEl';
 import {Locale} from '../../../locale/Locale';
+import {TextInput} from '../../../ui/text/TextInput';
+import {i18n} from '../../../util/Messages';
+import {NumberHelper} from '../../../util/NumberHelper';
+import {StringHelper} from '../../../util/StringHelper';
+import {ValueChangedEvent} from '../../../ValueChangedEvent';
+import {AdditionalValidationRecord} from '../../AdditionalValidationRecord';
+import {InputTypeViewContext} from '../InputTypeViewContext';
+import {BaseInputTypeNotManagingAdd} from '../support/BaseInputTypeNotManagingAdd';
+import {InputValueLengthCounterEl} from './InputValueLengthCounterEl';
 
 export abstract class TextInputType
     extends BaseInputTypeNotManagingAdd {
@@ -162,7 +162,7 @@ export abstract class TextInputType
         });
     }
 
-    isEditableByAI(): boolean {
-        return true;
+    isAiEditable(): boolean {
+        return this.getContext().formContext?.isAiEditable() === true;
     }
 }
diff --git a/src/main/resources/assets/admin/common/js/form/set/FormSetHeader.ts b/src/main/resources/assets/admin/common/js/form/set/FormSetHeader.ts
@@ -1,7 +1,7 @@
-import {H5El} from '../../dom/H5El';
-import {HelpTextContainer} from '../HelpTextContainer';
 import {DivEl} from '../../dom/DivEl';
+import {H5El} from '../../dom/H5El';
 import {SpanEl} from '../../dom/SpanEl';
+import {HelpTextContainer} from '../HelpTextContainer';
 import {FormSet} from './FormSet';
 
 export class FormSetHeader
@@ -27,6 +27,7 @@ export class FormSetHeader
             this.appendChild(this.title);
             if (this.helpTextContainer) {
                 const helpTextDiv = this.helpTextContainer.getHelpText();
+                this.prependChild(this.helpTextContainer.getToggler());
                 if (helpTextDiv) {
                     this.appendChild(helpTextDiv);
                 }

diff --git a/src/main/resources/assets/admin/common/styles/api/input-common.less b/src/main/resources/assets/admin/common/styles/api/input-common.less
@@ -15,6 +15,21 @@
     .input-glow();
   }
 
+  &:not(.ai-editable) {
+    > .input-label,
+    > label {
+      display: inline-block;
+      max-width: calc(100% - 18px);
+      .ellipsis();
+    }
+  }
+
+  &.ai-editable {
+    .help-text-toggler {
+      display: none;
+    }
+  }
+
   > .input-label {
     .@{_COMMON_PREFIX}wrapper {
       display: flex;
@@ -45,10 +60,6 @@
   }
 
   > label {
-    display: inline-block;
-    max-width: calc(100% - 30px);
-    .ellipsis();
-
     &.required::after {
       content: '\00a0*';
       color: @input-red-text;