Remove shared classes

hashicorp-forge · Oct 2, 2023 · b849467 · b849467
1 parent 7012a4c
commit b849467
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 21 deletions.
diff --git a/web/app/components/custom-editable-field.hbs b/web/app/components/custom-editable-field.hbs
@@ -6,7 +6,6 @@
       @onChange={{@onChange}}
       @isSaving={{@isSaving}}
       @disabled={{@disabled}}
-      @class="text-body-200 p-[5px]"
     >
       <:default as |F|>
         {{#if F.value}}
@@ -26,7 +25,6 @@
         @onChange={{@onChange}}
         @isSaving={{@isSaving}}
         @disabled={{@disabled}}
-        @class="p-[5px]"
       >
         <:default>
           {{#if h.users.length}}

diff --git a/web/app/components/document/sidebar.hbs b/web/app/components/document/sidebar.hbs
@@ -99,7 +99,7 @@
             </X::DropdownList>
           {{/if}}
         </div>
-        <div class="editable-field-container mb-8 -mt-[5px]">
+        <div class="editable-field-container document-title mb-8 -mt-[5px]">
           <EditableField
             data-test-document-title
             data-test-editable={{this.isOwner}}
@@ -109,7 +109,6 @@
             @disabled={{not this.isOwner}}
             @isRequired={{true}}
             @name="title"
-            @class="text-display-300 p-[5px] font-semibold foreground-strong"
             class="mb-1.5"
             @tag="h1"
           />
@@ -127,9 +126,8 @@
             data-test-editable={{this.isOwner}}
             @value={{this.summary}}
             @onChange={{perform this.updateSummary}}
-            @loading={{this.saveIsRunning}}
+            @isSaving={{this.saveIsRunning}}
             @disabled={{not this.isOwner}}
-            @class="text-body-200 font-regular"
             @name="summary"
             @placeholder="Enter a summary"
           />
@@ -189,7 +187,6 @@
               @onChange={{perform this.save "contributors"}}
               @isSaving={{this.saveIsRunning}}
               @disabled={{not this.isOwner}}
-              @class="p-[5px]"
             >
               <:default>
                 {{#if h.users.length}}
@@ -235,7 +232,6 @@
               @onChange={{perform this.save "approvers"}}
               @isSaving={{this.saveIsRunning}}
               @disabled={{not this.isOwner}}
-              @class="p-[5px]"
             >
               <:default>
                 {{#if h.users.length}}

diff --git a/web/app/components/editable-field.hbs b/web/app/components/editable-field.hbs
@@ -1,9 +1,9 @@
 <div
   class="editable-field
-    {{if (and this.editingIsEnabled (not @loading)) 'z-10'}}"
+    {{if (and this.editingIsEnabled (not @isSaving)) 'z-10'}}"
   ...attributes
 >
-  {{#if (and this.editingIsEnabled (not @loading))}}
+  {{#if (and this.editingIsEnabled (not @isSaving))}}
 
     {{on-document "keydown" this.handleKeydown}}
 
@@ -79,7 +79,7 @@
     {{/if}}
     <Action
       {{did-insert this.registerToggleButton}}
-      class="field-toggle group {{if @isSaving 'saving'}} {{@class}}"
+      class="field-toggle group {{if @isSaving 'saving'}}"
       disabled={{or @disabled @isSaving}}
       {{on "click" this.enableEditing}}
     >

diff --git a/web/app/components/editable-field.ts b/web/app/components/editable-field.ts
@@ -3,8 +3,6 @@ import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
 import { next, schedule, scheduleOnce } from "@ember/runloop";
 import { assert } from "@ember/debug";
-import { modifier } from "ember-modifier";
-import { ModifierLike } from "@glint/template";
 import { guidFor } from "@ember/object/internals";
 
 export const FOCUSABLE =
@@ -19,7 +17,6 @@ interface EditableFieldComponentSignature {
     isSaving?: boolean;
     disabled?: boolean;
     isRequired?: boolean;
-    class?: string;
     tag?: "h1";
     buttonPlacement?: "center";
     buttonOverlayColor?: "white";
@@ -88,11 +85,6 @@ export default class EditableFieldComponent extends Component<EditableFieldCompo
   @action protected registerInput(element: HTMLElement) {
     this.inputElement = element as HTMLInputElement | HTMLTextAreaElement;
 
-    if (this.args.class) {
-      const classes = this.args.class.split(" ");
-      this.inputElement.classList.add(...classes);
-    }
-
     this.applyPeopleSelectClasses(this.inputElement, false);
     this.inputElement.focus();
   }
@@ -213,7 +205,10 @@ export default class EditableFieldComponent extends Component<EditableFieldCompo
 
     // Stringified values work for both arrays and strings.
     if (JSON.stringify(newValue) !== JSON.stringify(this.cachedValue)) {
-      if (newValue === "") {
+      if (
+        newValue === "" ||
+        (newValue instanceof Array && newValue.length === 0)
+      ) {
         if (this.args.isRequired) {
           this.emptyValueErrorIsShown = true;
           return;
@@ -225,6 +220,11 @@ export default class EditableFieldComponent extends Component<EditableFieldCompo
         }
       }
 
+      // Trim whitespace from the beginning and end of the string.
+      if (typeof newValue === "string") {
+        newValue = newValue.trim();
+      }
+
       this.cachedValue = this.value = newValue;
       this.args.onChange?.(this.value);
     }

diff --git a/web/app/styles/components/editable-field.scss b/web/app/styles/components/editable-field.scss
@@ -26,6 +26,7 @@
   textarea,
   .field-toggle {
     @apply px-[5px] py-[7px];
+    @apply text-body-200 font-regular;
   }
 
   .field-toggle {

diff --git a/web/app/styles/components/sidebar.scss b/web/app/styles/components/sidebar.scss
@@ -43,7 +43,8 @@
     }
 
     &.out {
-      animation: fadeOut 50ms ease-out 200ms forwards,
+      animation:
+        fadeOut 50ms ease-out 200ms forwards,
         slideDownAndRotateLeft 250ms ease-out forwards;
     }
   }
@@ -98,6 +99,13 @@
     scrollbar-color: var(--token-color-palette-neutral-300) transparent;
   }
 
+  .document-title {
+    .field-toggle,
+    textarea {
+      @apply text-display-300 font-semibold text-color-foreground-strong;
+    }
+  }
+
   .sidebar-section-header-container {
     @apply flex w-full items-center justify-between;
   }

diff --git a/web/tests/integration/components/editable-field-test.ts b/web/tests/integration/components/editable-field-test.ts
@@ -331,4 +331,26 @@ module("Integration | Component | editable-field", function (hooks) {
 
     assert.dom("textarea").hasValue("foo");
   });
+
+  test("it trims a string value before evaluating it", async function (this: EditableFieldComponentTestContext, assert) {
+    await render<EditableFieldComponentTestContext>(hbs`
+      <EditableField @value="bar" @onChange={{this.onChange}} />
+    `);
+
+    assert.dom(EDITABLE_FIELD_SELECTOR).hasText("bar");
+
+    await click(FIELD_TOGGLE_SELECTOR);
+
+    assert.dom("textarea").hasValue("bar");
+
+    await fillIn("textarea", " bar ");
+
+    await triggerKeyEvent("textarea", "keydown", "Enter");
+
+    assert.dom(EDITABLE_FIELD_SELECTOR).hasText("bar");
+
+    await click(FIELD_TOGGLE_SELECTOR);
+
+    assert.dom("textarea").hasValue("bar");
+  });
 });