(core) updates from grist-core

app/client/lib/MultiUserManager.ts

@@ -0,0 +1,176 @@
+import {computed, Computed, dom, DomElementArg, IDisposableOwner, Observable, styled} from "grainjs";
+import {cssModalBody, cssModalButtons, cssModalTitle, IModalControl, modal, cssAnimatedModal} from 'app/client/ui2018/modals';
+import {bigBasicButton, bigPrimaryButton} from 'app/client/ui2018/buttons';
+import {mediaXSmall, testId, theme, vars} from 'app/client/ui2018/cssVars';
+import {UserManagerModel, IOrgMemberSelectOption} from 'app/client/models/UserManagerModel';
+import {icon} from 'app/client/ui2018/icons';
+import {textarea} from "app/client/ui/inputs";
+import {BasicRole, VIEWER, NonGuestRole, isBasicRole} from "app/common/roles";
+import {menu, menuItem} from 'app/client/ui2018/menus';
+
+function parseEmailList(emailListRaw: string): Array<string> {
+  return emailListRaw
+    .split('\n')
+    .map(email => email.trim().toLowerCase())
+    .filter(email => email !== "");
+}
+
+function validateEmail(email: string): boolean {
+  const mailformat = /\S+@\S+\.\S+/;
+  return mailformat.test(email);
+}
+
+export function buildMultiUserManagerModal(
+  owner: IDisposableOwner,
+  model: UserManagerModel,
+  onAdd: (email: string, role: NonGuestRole) => void,
+) {
+  const emailListObs = Observable.create(owner, "");
+  const rolesObs = Observable.create<BasicRole>(owner, VIEWER);
+  const isValidObs = Observable.create(owner, true);
+
+  const enableAdd: Computed<boolean> = computed((use) => Boolean(use(emailListObs) && use(rolesObs) && use(isValidObs)));
+
+  const save = (ctl: IModalControl) => {
+    const emailList = parseEmailList(emailListObs.get());
+    const role = rolesObs.get();
+    if (emailList.some(email => !validateEmail(email))) {
+      isValidObs.set(false);
+    } else {
+      emailList.forEach(email => onAdd(email, role));
+      ctl.close();
+    }
+  }
+
+  return modal(ctl => [
+    { style: 'padding: 0;' },
+    dom.cls(cssAnimatedModal.className),
+    cssTitle(
+      'Invite Users',
+      testId('um-header'),
+    ),
+    cssModalBody(
+      cssUserManagerBody(
+        buildEmailsTextarea(emailListObs, isValidObs),
+        dom.maybe(use => !use(isValidObs), () => cssErrorMessage('At least one email is invalid')),
+        cssInheritRoles(
+          dom('span', 'Access: '),
+          buildRolesSelect(rolesObs, model)
+        )
+      ),
+    ),
+    cssModalButtons(
+      { style: 'margin: 32px 64px; display: flex;' },
+      bigPrimaryButton('Confirm',
+        dom.boolAttr('disabled', (use) => !use(enableAdd)),
+        dom.on('click', () => {save(ctl)}),
+        testId('um-confirm')
+      ),
+      bigBasicButton(
+        'Cancel',
+        dom.on('click', () => ctl.close()),
+        testId('um-cancel')
+      ),
+    )
+  ]);
+}
+
+function buildRolesSelect(
+  roleSelectedObs: Observable<BasicRole>,
+  model: UserManagerModel,
+) {
+  const allRoles = (model.isOrg ? model.orgUserSelectOptions : model.userSelectOptions)
+    .filter((x): x is {value: BasicRole, label: string} => isBasicRole(x.value));
+  return cssOptionBtn(
+    menu(() => [
+      dom.forEach(allRoles, (_role) =>
+        menuItem(() => roleSelectedObs.set(_role.value), _role.label,
+          testId(`um-role-option`)
+        )
+      )
+    ]),
+    dom.text((use) => {
+      // Get the label of the active role.
+      const activeRole = allRoles.find((_role: IOrgMemberSelectOption) => use(roleSelectedObs) === _role.value);
+      return activeRole ? activeRole.label : "";
+    }),
+    cssCollapseIcon('Collapse'),
+    testId('um-role-select')
+  );
+}
+
+
+function buildEmailsTextarea(
+  emailListObs: Observable<string>,
+  isValidObs: Observable<boolean>,
+  ...args: DomElementArg[]
+) {
+  return cssTextarea(emailListObs,
+    {onInput: true, isValid: isValidObs},
+    {placeholder: "Enter one email address per line"},
+    dom.on('change', (_ev) => isValidObs.set(true)),
+     ...args,
+  );
+}
+
+
+const cssTitle = styled(cssModalTitle, `
+  margin: 40px 64px 0 64px;
+
+  @media ${mediaXSmall} {
+    & {
+      margin: 16px;
+    }
+  }
+`);
+
+const cssInheritRoles = styled('span', `
+  margin: 13px 63px 42px;
+`);
+
+const cssErrorMessage = styled('span', `
+  margin: 0 63px;
+  color: ${theme.errorText};
+`);
+
+const cssOptionBtn = styled('span', `
+  display: inline-flex;
+  font-size: ${vars.mediumFontSize};
+  color: ${theme.controlFg};
+  cursor: pointer;
+`);
+
+const cssCollapseIcon = styled(icon, `
+  margin-top: 1px;
+  background-color: ${theme.controlFg};
+`);
+
+const cssAccessDetailsBody = styled('div', `
+  display: flex;
+  flex-direction: column;
+  width: 600px;
+  font-size: ${vars.mediumFontSize};
+`);
+
+const cssUserManagerBody = styled(cssAccessDetailsBody, `
+  height: 374px;
+  border-bottom: 1px solid ${theme.modalBorderDark};
+`);
+
+const cssTextarea = styled(textarea, `
+  margin: 16px 63px;
+  padding: 12px 10px;
+  border-radius: 3px;
+  resize: none;
+  border: 1px solid ${theme.inputBorder};
+  color: ${theme.inputFg};
+  background-color: ${theme.inputBg};
+  flex: 1 1 0;
+  font-size: ${vars.mediumFontSize};
+  font-family: ${vars.fontFamily};
+  outline: none;
+
+  &::placeholder {
+    color: ${theme.inputPlaceholderFg};
+  }
+`);