(core) Forms Improvements

Summary:
 - Forms now have a reset button.
 - Choice and Reference fields in forms now have an improved select menu.
 - Formula and attachments column types are no longer mappable or visible in forms.
 - Fields in a form widget are now removed if their column is deleted.
 - The preview button in a published form widget has been replaced with a view button. It now opens the published form in a new tab.
 - A new share menu for published form widgets, with options to copy a link or embed code.
 - Forms can now have multiple sections.
 - Form widgets now indicate when publishing is unavailable (e.g. in forks or unsaved documents).
 - General improvements to form styling.

Test Plan: Browser tests.

Reviewers: jarek

Reviewed By: jarek

Subscribers: paulfitz

Differential Revision: https://phab.getgrist.com/D4203

app/client/ui2018/IconList.ts

@@ -76,6 +76,7 @@ export type IconName = "ChartArea" |
   "FontItalic" |
   "FontStrikethrough" |
   "FontUnderline" |
+  "FormConfig" |
   "FunctionResult" |
   "GreenArrow" |
   "Grow" |
@@ -232,6 +233,7 @@ export const IconList: IconName[] = ["ChartArea",
   "FontItalic",
   "FontStrikethrough",
   "FontUnderline",
+  "FormConfig",
   "FunctionResult",
   "GreenArrow",
   "Grow",

app/client/ui2018/cssVars.ts

@@ -983,6 +983,22 @@ export function isNarrowScreenObs(): Observable<boolean> {
   return _isNarrowScreenObs;
 }
 
+export function isXSmallScreen() {
+  return window.innerWidth < smallScreenWidth;
+}
+
+let _isXSmallScreenObs: Observable<boolean>|undefined;
+
+// Returns a singleton observable for whether the screen is an extra small one.
+export function isXSmallScreenObs(): Observable<boolean> {
+  if (!_isXSmallScreenObs) {
+    const obs = Observable.create<boolean>(null, isXSmallScreen());
+    window.addEventListener('resize', () => obs.set(isXSmallScreen()));
+    _isXSmallScreenObs = obs;
+  }
+  return _isXSmallScreenObs;
+}
+
 export const cssHideForNarrowScreen = styled('div', `
   @media ${mediaSmall} {
     & {

app/client/ui2018/modals.ts

@@ -9,6 +9,7 @@ import {mediaSmall, testId, theme, vars} from 'app/client/ui2018/cssVars';
 import {loadingSpinner} from 'app/client/ui2018/loaders';
 import {cssMenuElem} from 'app/client/ui2018/menus';
 import {waitGrainObs} from 'app/common/gutil';
+import {MaybePromise} from 'app/plugin/gutil';
 import {Computed, Disposable, dom, DomContents, DomElementArg, input, keyframes,
   MultiHolder, Observable, styled} from 'grainjs';
 import {IOpenController, IPopupOptions, PopupControl, popupOpen} from 'popweasel';
@@ -356,7 +357,7 @@ export interface ConfirmModalOptions {
 export function confirmModal(
   title: DomElementArg,
   btnText: DomElementArg,
-  onConfirm: (dontShowAgain?: boolean) => Promise<void>,
+  onConfirm: (dontShowAgain?: boolean) => MaybePromise<void>,
   options: ConfirmModalOptions = {},
 ): void {
   const {
@@ -383,7 +384,7 @@ export function confirmModal(
         ),
       ],
       saveLabel: btnText,
-      saveFunc: () => onConfirm(hideDontShowAgain ? undefined : dontShowAgain.get()),
+      saveFunc: async () => onConfirm(hideDontShowAgain ? undefined : dontShowAgain.get()),
       hideCancel,
       width: width ?? 'normal',
       extraButtons,