Fix widget tests (#5816)

* Fix widget tests

* Fix superchat goal

* Fix custom fields jank

* Fix reactivity

* Fix existing goal styling

* Fix goal mutation

* Add error handling

* Fix duration

* Comment out color inputs for now

---------

Co-authored-by: gettinToasty <sbeyer@logitech.com>

Author: gettinToasty

app/components-react/widgets/GenericGoal.m.less

@@ -0,0 +1,13 @@
+@import '../../styles/index';
+
+.goal-row {
+  .padding();
+
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--border);
+
+  &:last-of-type {
+    .margin-bottom();
+  }
+}

app/components-react/widgets/GenericGoal.tsx

@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import { Button, Menu } from 'antd';
+import React, { useEffect, useRef, useState } from 'react';
+import { Button, Menu, message } from 'antd';
 import { $t } from 'services/i18n';
 import { IWidgetCommonState, useWidget, WidgetModule, WidgetParams } from './common/useWidget';
 import { WidgetLayout } from './common/WidgetLayout';
@@ -9,6 +9,8 @@ import { metadata } from '../shared/inputs/metadata';
 import { WidgetType } from 'services/widgets';
 import { authorizedHeaders, jfetch } from 'util/requests';
 import { Services } from 'components-react/service-provider';
+import styles from './GenericGoal.m.less';
+import { assertIsDefined } from 'util/properties-type-guards';
 
 interface IGoalState extends IWidgetCommonState {
   data: {
@@ -53,6 +55,7 @@ export function GenericGoal() {
     setSelectedTab,
     selectedTab,
     saveGoal,
+    resetGoal,
     type,
   } = useGenericGoal();
 
@@ -67,6 +70,10 @@ export function GenericGoal() {
     ends_at: '',
   });
 
+  useEffect(() => {
+    message.config({ top: 270 });
+  }, []);
+
   function updateGoalCreate(key: string) {
     return (val: TInputValue) => {
       setGoalCreateValues({ ...goalCreateValues, [key]: val });
@@ -87,12 +94,18 @@ export function GenericGoal() {
               values={goalCreateValues}
               onChange={updateGoalCreate}
             />
-            <Button className="button button--action" onClick={() => saveGoal(goalCreateValues)}>
-              {$t('Save Goal')}
+            <Button
+              className="button button--action"
+              onClick={() => saveGoal(goalCreateValues)}
+              style={{ marginBottom: 16 }}
+            >
+              {$t('Start Goal')}
             </Button>
           </>
         )}
-        {!isLoading && selectedTab === 'goal' && hasGoal && <DisplayGoal goal={goalSettings} />}
+        {!isLoading && selectedTab === 'goal' && hasGoal && (
+          <DisplayGoal goal={goalSettings} resetGoal={resetGoal} />
+        )}
         {!isLoading && selectedTab === 'general' && (
           <FormFactory
             metadata={visualMeta}
@@ -106,29 +119,31 @@ export function GenericGoal() {
   );
 }
 
-function DisplayGoal(p: { goal: IGoalState['data']['goal'] }) {
-  const { resetGoal } = useGenericGoal();
-
+function DisplayGoal(p: { goal: IGoalState['data']['goal']; resetGoal: () => void }) {
   if (!p.goal) return <></>;
   return (
     <div className="section__body">
-      <div className="goal-row">
+      <div className={styles.goalRow}>
         <span>{$t('Title')}</span>
         <span>{p.goal.title}</span>
       </div>
-      <div className="goal-row">
+      <div className={styles.goalRow}>
         <span>{$t('Goal Amount')}</span>
         <span>{p.goal.goal_amount}</span>
       </div>
-      <div className="goal-row">
+      <div className={styles.goalRow}>
         <span>{$t('Current Amount')}</span>
         <span>{p.goal.current_amount}</span>
       </div>
-      <div className="goal-row">
+      <div className={styles.goalRow}>
         <span>{$t('Days Remaining')}</span>
         <span>{p.goal.to_go}</span>
       </div>
-      <Button className="button button--soft-warning" onClick={resetGoal}>
+      <Button
+        className="button button--soft-warning"
+        onClick={p.resetGoal}
+        style={{ marginBottom: 16 }}
+      >
         {$t('End Goal')}
       </Button>
     </div>
@@ -211,18 +226,31 @@ export class GenericGoalModule extends WidgetModule<IGoalState> {
     const url = this.config.goalUrl;
     if (!url) return;
     jfetch(new Request(url, { method: 'DELETE', headers: this.headers }));
+    this.setGoalData(null);
   }
 
-  saveGoal(options: Dictionary<TInputValue>) {
+  async saveGoal(options: Dictionary<TInputValue>) {
     const url = this.config.goalUrl;
     if (!url) return;
-    jfetch(
-      new Request(url, {
-        method: 'POST',
-        headers: this.headers,
-        body: JSON.stringify(options),
-      }),
-    );
+    try {
+      const resp: IGoalState['data'] = await jfetch(
+        new Request(url, {
+          method: 'POST',
+          headers: this.headers,
+          body: JSON.stringify(options),
+        }),
+      );
+      this.setGoalData(resp.goal);
+    } catch (e: unknown) {
+      message.error({ content: (e as any).result.message, duration: 2 });
+    }
+  }
+
+  private setGoalData(goal: IGoalState['data']['goal']) {
+    assertIsDefined(this.state.widgetData.data);
+    this.state.mutate(state => {
+      state.widgetData.data.goal = goal;
+    });
   }
 
   patchAfterFetch(data: IGoalState['data']): IGoalState['data'] {

app/components-react/widgets/common/WidgetLayout.m.less

@@ -1,10 +1,9 @@
-@import "../../../styles/index.less";
+@import '../../../styles/index.less';
 
 // TODO: This is also used by the new filters window
 // We should probably make these menu styles global
 // across the entire app.
 .widget-layout {
-
   height: 100%;
 
   // collapse
@@ -19,7 +18,7 @@
   }
 
   :global(.ant-collapse-content),
-  :global(.ant-collapse-item){
+  :global(.ant-collapse-item) {
     background-color: var(--section-alt);
   }
 
@@ -33,6 +32,7 @@
     width: 270px;
     border-right: 1px solid var(--border);
     background-color: var(--section);
+    height: 100%;
   }
 
   :global(.ant-collapse-content-box .ant-menu-root) {
@@ -55,7 +55,7 @@
   :global(.ant-menu-item .anticon-question-circle) {
     visibility: hidden;
   }
-  :global(.ant-menu-item-selected .anticon-question-circle){
+  :global(.ant-menu-item-selected .anticon-question-circle) {
     visibility: visible;
   }
 
@@ -108,4 +108,8 @@
     height: 100%;
     overflow: auto;
   }
+
+  :global(.ant-row) {
+    flex-flow: nowrap;
+  }
 }

app/components-react/widgets/common/WidgetLayout.tsx

@@ -24,7 +24,11 @@ const PREVIEW_HEIGHT = 250;
  * If "basic" layout selected then display 1 column or 2 columns depending
  * on how many children have been provided to props
  */
-export function WidgetLayout(p: { layout?: TWidgetLayoutType; children: TLayoutChildren; showDisplay?: boolean }) {
+export function WidgetLayout(p: {
+  layout?: TWidgetLayoutType;
+  children: TLayoutChildren;
+  showDisplay?: boolean;
+}) {
   const layout = p.layout || 'basic';
   switch (layout) {
     case 'basic':
@@ -173,4 +177,4 @@ function getLayoutPanels(layoutChildren: TLayoutChildren) {
     [MenuPanel, ContentPanel] = [null, layoutChildren];
   }
   return { MenuPanel, ContentPanel };
-}
+}

app/components-react/widgets/common/WidgetWindow.tsx

@@ -37,6 +37,7 @@ export const components = {
   StarsGoal: [GenericGoal, GenericGoalModule],
   SubGoal: [GenericGoal, GenericGoalModule],
   SubscriberGoal: [GenericGoal, GenericGoalModule],
+  SuperchatGoal: [GenericGoal, GenericGoalModule],
   ChatBox: [ChatBox, ChatBoxModule],
   // ChatHighlight
   // Credits

app/components-react/widgets/common/useWidget.tsx

@@ -37,6 +37,7 @@ export interface IWidgetCommonState {
 export interface IWidgetState {
   data: {
     settings: any;
+    goal?: any;
   };
 }
 

app/services/sources/sources.ts

@@ -816,6 +816,7 @@ export class SourcesService extends StatefulService<ISourcesState> {
       'StarsGoal',
       'SubGoal',
       'SubscriberGoal',
+      'SuperchatGoal',
       'ChatBox',
       // TODO:
       // 'ChatHighlight',

app/styles/antd/antd.less

@@ -13,11 +13,12 @@ body {
   margin: 0;
   padding: 0;
   background-color: var(--background);
+  position: relative;
 }
 
 #mainWrapper .react {
   // justify all inputs of form to the right in the modal footer
-  .ant-modal-footer  .ant-form-inline {
+  .ant-modal-footer .ant-form-inline {
     justify-content: flex-end;
   }
 
@@ -76,7 +77,7 @@ body {
 
   // disable unnecessary animation in checkboxes
   .ant-checkbox-inner,
-  .ant-checkbox-inner::after, {
+  .ant-checkbox-inner::after {
     transition: none;
   }
   .ant-checkbox-checked::after {
@@ -97,11 +98,10 @@ body {
 }
 
 // set a "text-style" cursor for file inputs instead of "disabled"
-.ant-input.ant-input-disabled[data-type="file"] {
+.ant-input.ant-input-disabled[data-type='file'] {
   cursor: text;
 }
 
-
 // fix list input label wrapping with long names
 .ant-select-selection-item {
   .ant-row {

test/helpers/modules/forms/color.ts

@@ -0,0 +1,3 @@
+import { TextInputController } from './text';
+
+export class ColorInputController extends TextInputController {}

test/helpers/modules/forms/inputs.ts

@@ -9,3 +9,4 @@ export { BoolButtonInputController } from './bool-button';
 export { SliderInputController } from './slider';
 export { FileInputController } from './file';
 export { RadioInputController } from './radio';
+export { ColorInputController } from './color';