diff --git a/.github/workflows/docker_latest.yml b/.github/workflows/docker_latest.yml index 52d75de6..cb84e0df 100644 --- a/.github/workflows/docker_latest.yml +++ b/.github/workflows/docker_latest.yml @@ -46,6 +46,7 @@ jobs: push_to_registry: name: Push latest Docker image to Docker Hub runs-on: ubuntu-latest + if: ${{ vars.RUN_DAILY_BUILD }} strategy: matrix: python-version: [3.11] @@ -123,6 +124,9 @@ jobs: if: ${{ !inputs.disable_tests }} run: yarn run build:prod + - name: Install Google Chrome for Testing + run: ./test/test_env.sh node_modules/selenium-webdriver/bin/linux/selenium-manager + - name: Run tests if: ${{ !inputs.disable_tests }} run: TEST_IMAGE=${{ env.DOCKER_HUB_OWNER }}/${{ matrix.image.name }}:${{ env.TAG }} VERBOSE=1 DEBUG=1 MOCHA_WEBDRIVER_HEADLESS=1 yarn run test:docker diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 547e8599..ab83a5cc 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -69,9 +69,9 @@ jobs: - name: Build Node.js code run: yarn run build:prod - - name: Install chromedriver + - name: Install Google Chrome for Testing if: contains(matrix.tests, ':nbrowser-') || contains(matrix.tests, ':smoke:') || contains(matrix.tests, ':stubs:') - run: ./node_modules/selenium-webdriver/bin/linux/selenium-manager --driver chromedriver + run: ./test/test_env.sh ./node_modules/selenium-webdriver/bin/linux/selenium-manager - name: Run smoke test if: contains(matrix.tests, ':smoke:') diff --git a/.gitignore b/.gitignore index 95d698a2..307875b2 100644 --- a/.gitignore +++ b/.gitignore @@ -12,6 +12,11 @@ /sandbox_venv* /.vscode/ +# Files created by grist-desktop setup +/cpython.tar.gz +/python +/static_ext + # Build helper files. /.build* @@ -82,7 +87,8 @@ xunit.xml **/_build # ext directory can be overwritten -ext/** +/ext +/ext/** # Docker compose examples - persistent values and secrets /docker-compose-examples/*/persist diff --git a/README.md b/README.md index 401baf37..d2e0a9e4 100644 --- a/README.md +++ b/README.md @@ -312,6 +312,8 @@ Grist can be configured in many ways. Here are the main environment variables it | GRIST_UI_FEATURES | comma-separated list of UI features to enable. Allowed names of parts: `helpCenter,billing,templates,createSite,multiSite,multiAccounts,sendToDrive,tutorials,supportGrist`. If a part also exists in GRIST_HIDE_UI_ELEMENTS, it won't be enabled. | | GRIST_UNTRUSTED_PORT | if set, plugins will be served from the given port. This is an alternative to setting APP_UNTRUSTED_URL. | | GRIST_WIDGET_LIST_URL | a url pointing to a widget manifest, by default `https://github.com/gristlabs/grist-widget/releases/download/latest/manifest.json` is used | +| GRIST_LOG_HTTP | When set to `true`, log HTTP requests and responses information. Defaults to `false`. | +| GRIST_LOG_HTTP_BODY | When this variable and `GRIST_LOG_HTTP` are set to `true` , log the body along with the HTTP requests. :warning: Be aware it may leak confidential information in the logs.:warning: Defaults to `false`. | | COOKIE_MAX_AGE | session cookie max age, defaults to 90 days; can be set to "none" to make it a session cookie | | HOME_PORT | port number to listen on for REST API server; if set to "share", add API endpoints to regular grist port. | | PORT | port number to listen on for Grist server | diff --git a/app/client/components/DataTables.ts b/app/client/components/DataTables.ts index db13e0d3..bfcc4d4e 100644 --- a/app/client/components/DataTables.ts +++ b/app/client/components/DataTables.ts @@ -12,8 +12,9 @@ import {icon} from 'app/client/ui2018/icons'; import {loadingDots} from 'app/client/ui2018/loaders'; import {menu, menuDivider, menuIcon, menuItem, menuItemAsync, menuText} from 'app/client/ui2018/menus'; import {confirmModal} from 'app/client/ui2018/modals'; -import {Computed, Disposable, dom, fromKo, makeTestId, observable, Observable, styled} from 'grainjs'; +import {Computed, Disposable, dom, fromKo, observable, Observable, styled} from 'grainjs'; import {makeT} from 'app/client/lib/localization'; +import {makeTestId} from 'app/client/lib/domUtils'; import * as weasel from 'popweasel'; const testId = makeTestId('test-raw-data-'); @@ -109,6 +110,7 @@ export class DataTables extends Disposable { ), cssDotsButton( testId('table-menu'), + testId(use => `table-menu-${use(tableRec.tableId)}`), icon('Dots'), menu(() => this._menuItems(tableRec, isEditingName), {placement: 'bottom-start'}), dom.on('click', (ev) => { ev.stopPropagation(); ev.preventDefault(); }), diff --git a/app/client/components/DocumentUsage.ts b/app/client/components/DocumentUsage.ts index bb1023fc..e7edf5bd 100644 --- a/app/client/components/DocumentUsage.ts +++ b/app/client/components/DocumentUsage.ts @@ -7,7 +7,7 @@ import {withInfoTooltip} from 'app/client/ui/tooltips'; import {mediaXSmall, theme} from 'app/client/ui2018/cssVars'; import {icon} from 'app/client/ui2018/icons'; import {loadingDots, loadingSpinner} from 'app/client/ui2018/loaders'; -import {APPROACHING_LIMIT_RATIO, DataLimitStatus} from 'app/common/DocUsage'; +import {APPROACHING_LIMIT_RATIO, DataLimitInfo} from 'app/common/DocUsage'; import {Features, isFreePlan} from 'app/common/Features'; import {capitalizeFirstWord} from 'app/common/gutil'; import {canUpgradeOrg} from 'app/common/roles'; @@ -40,8 +40,8 @@ export class DocumentUsage extends Disposable { // TODO: Update this whenever the rest of the UI is internationalized. private readonly _rowCountFormatter = new Intl.NumberFormat('en-US'); - private readonly _dataLimitStatus = Computed.create(this, this._currentDocUsage, (_use, usage) => { - return usage?.dataLimitStatus ?? null; + private readonly _dataLimitInfo = Computed.create(this, this._currentDocUsage, (_use, usage) => { + return usage?.dataLimitInfo; }); private readonly _rowCount = Computed.create(this, this._currentDocUsage, (_use, usage) => { @@ -158,11 +158,11 @@ export class DocumentUsage extends Disposable { const org = use(this._currentOrg); const product = use(this._currentProduct); const features = use(this._currentFeatures); - const status = use(this._dataLimitStatus); - if (!org || !status) { return null; } + const usageInfo = use(this._dataLimitInfo); + if (!org || !usageInfo?.status) { return null; } return buildMessage([ - buildLimitStatusMessage(status, features, { + buildLimitStatusMessage(usageInfo, features, { disableRawDataLink: true }), (product && isFreePlan(product.name) @@ -196,13 +196,14 @@ export class DocumentUsage extends Disposable { } export function buildLimitStatusMessage( - status: NonNullable, + usageInfo: NonNullable, features?: Features|null, options: { disableRawDataLink?: boolean; } = {} ) { const {disableRawDataLink = false} = options; + const {status, daysRemaining} = usageInfo; switch (status) { case 'approachingLimit': { return [ @@ -224,7 +225,7 @@ export function buildLimitStatusMessage( return [ 'Document limits ', disableRawDataLink ? 'exceeded' : buildRawDataPageLink('exceeded'), - `. In ${gracePeriodDays} days, this document will be read-only.` + `. In ${daysRemaining} days, this document will be read-only.` ]; } case 'deleteOnly': { diff --git a/app/client/components/FormRenderer.ts b/app/client/components/FormRenderer.ts index b3b3c5d7..a3cbac4d 100644 --- a/app/client/components/FormRenderer.ts +++ b/app/client/components/FormRenderer.ts @@ -135,7 +135,9 @@ class ParagraphRenderer extends FormRenderer { return css.paragraph( css.paragraph.cls(`-alignment-${this.layoutNode.alignment || 'left'}`), el => { - el.innerHTML = sanitizeHTML(marked(this.layoutNode.text || '**Lorem** _ipsum_ dolor')); + el.innerHTML = sanitizeHTML(marked(this.layoutNode.text || '**Lorem** _ipsum_ dolor', { + async: false, + })); }, ); } diff --git a/app/client/components/Forms/styles.ts b/app/client/components/Forms/styles.ts index 935269d2..2bc6d76c 100644 --- a/app/client/components/Forms/styles.ts +++ b/app/client/components/Forms/styles.ts @@ -505,7 +505,7 @@ export const cssMarkdownRender = styled('div', ` export function markdown(obs: BindableValue, ...args: IDomArgs) { return cssMarkdownRender(el => { dom.autoDisposeElem(el, subscribeBindable(obs, val => { - el.innerHTML = sanitizeHTML(marked(val)); + el.innerHTML = sanitizeHTML(marked(val, {async: false})); })); }, ...args); } diff --git a/app/client/components/Printing.css b/app/client/components/Printing.css index 06c7e3a2..7d436fba 100644 --- a/app/client/components/Printing.css +++ b/app/client/components/Printing.css @@ -5,6 +5,10 @@ display: none; } + .print-force-hide { + display: none !important; + } + .print-parent { display: block !important; position: relative !important; @@ -51,6 +55,10 @@ .ui-resizable-handle { display: none !important; } + + .viewsection_content .filter_bar { + display: none !important; + } } /* @@ -68,4 +76,8 @@ .print-all-rows { display: none; } + + .screen-force-hide { + display: none !important; + } } diff --git a/app/client/declarations.d.ts b/app/client/declarations.d.ts index 7b9c9cdf..0fa0fe36 100644 --- a/app/client/declarations.d.ts +++ b/app/client/declarations.d.ts @@ -335,3 +335,7 @@ interface Location { // historical accident than an intentional choice. reload(forceGet?: boolean): void; } + +interface JQuery { + datepicker(options: unknown): JQuery; +} diff --git a/app/client/lib/markdown.ts b/app/client/lib/markdown.ts index ce9d1ab5..816a3703 100644 --- a/app/client/lib/markdown.ts +++ b/app/client/lib/markdown.ts @@ -25,5 +25,5 @@ export function markdown(markdownObs: BindableValue): DomElementMethod { } function setMarkdownValue(elem: Element, markdownValue: string): void { - elem.innerHTML = sanitizeHTML(marked(markdownValue)); + elem.innerHTML = sanitizeHTML(marked(markdownValue, {async: false})); } diff --git a/app/client/models/DataRowModel.ts b/app/client/models/DataRowModel.ts index 169415c4..0638d8db 100644 --- a/app/client/models/DataRowModel.ts +++ b/app/client/models/DataRowModel.ts @@ -21,6 +21,9 @@ export class DataRowModel extends BaseRowModel { public _validationFailures: ko.PureComputed>>; public _isAddRow: ko.Observable; + // Observable that's set whenever a change to a row model is likely to be real, and unset when a + // row model is being reassigned to a different row. If a widget uses CSS transitions for + // changes, those should only be enabled when _isRealChange is true. public _isRealChange: ko.Observable; public constructor(dataTableModel: DataTableModel, colNames: string[]) { diff --git a/app/client/ui/AccountWidget.ts b/app/client/ui/AccountWidget.ts index 3a968a56..7dccd2e9 100644 --- a/app/client/ui/AccountWidget.ts +++ b/app/client/ui/AccountWidget.ts @@ -196,13 +196,17 @@ export class AccountWidget extends Disposable { if (deploymentType !== 'saas') { return null; } const {currentValidUser, currentOrg, isTeamSite} = this._appModel; - const isBillingManager = Boolean(currentOrg && currentOrg.billingAccount && - (currentOrg.billingAccount.isManager || currentValidUser?.isSupport)); + const canViewBillingPage = Boolean( + currentOrg && // have accecc to org + currentOrg.billingAccount && // have access to billing account + (currentOrg.billingAccount.isManager // is billing manager + || currentValidUser?.isSupport // or support + || this._appModel.isInstallAdmin())); // or install admin return isTeamSite ? // For links, disabling with just a class is hard; easier to just not make it a link. // TODO weasel menus should support disabling menuItemLink. - (isBillingManager ? + (canViewBillingPage ? menuItemLink(urlState().setLinkUrl({billing: 'billing'}), t('Billing Account')) : menuItem(() => null, t('Billing Account'), dom.cls('disabled', true)) ) : diff --git a/app/client/ui/HomeImports.ts b/app/client/ui/CoreHomeImports.ts similarity index 61% rename from app/client/ui/HomeImports.ts rename to app/client/ui/CoreHomeImports.ts index 466e3e73..fe5ccf20 100644 --- a/app/client/ui/HomeImports.ts +++ b/app/client/ui/CoreHomeImports.ts @@ -1,13 +1,13 @@ +import {AppModel, reportError} from 'app/client/models/AppModel'; +import {AxiosProgressEvent} from 'axios'; import {PluginScreen} from 'app/client/components/PluginScreen'; import {guessTimezone} from 'app/client/lib/guessTimezone'; import {ImportSourceElement} from 'app/client/lib/ImportSourceElement'; -import {IMPORTABLE_EXTENSIONS, uploadFiles} from 'app/client/lib/uploads'; -import {AppModel, reportError} from 'app/client/models/AppModel'; -import {IProgress} from 'app/client/models/NotifyModel'; +import {ImportProgress} from 'app/client/ui/ImportProgress'; +import {IMPORTABLE_EXTENSIONS} from 'app/client/lib/uploads'; import {openFilePicker} from 'app/client/ui/FileDialog'; import {byteString} from 'app/common/gutil'; -import { AxiosProgressEvent } from 'axios'; -import {Disposable} from 'grainjs'; +import {uploadFiles} from 'app/client/lib/uploads'; /** * Imports a document and returns its docId, or null if no files were selected. @@ -66,62 +66,6 @@ export async function fileImport( progressUI.dispose(); } } - -export class ImportProgress extends Disposable { - // Import does upload first, then import. We show a single indicator, estimating which fraction - // of the time should be given to upload (whose progress we can report well), and which to the - // subsequent import (whose progress indicator is mostly faked). - private _uploadFraction: number; - private _estImportSeconds: number; - - private _importTimer: null | ReturnType = null; - private _importStart: number = 0; - - constructor(private _progressUI: IProgress, file: File) { - super(); - // We'll assume that for .grist files, the upload takes 90% of the total time, and for other - // files, 40%. - this._uploadFraction = file.name.endsWith(".grist") ? 0.9 : 0.4; - - // TODO: Import step should include a progress callback, to be combined with upload progress. - // Without it, we estimate import to take 2s per MB (non-scientific unreliable estimate), and - // use an asymptotic indicator which keeps moving without ever finishing. Not terribly useful, - // but does slow down for larger files, and is more comforting than a stuck indicator. - this._estImportSeconds = file.size / 1024 / 1024 * 2; - - this._progressUI.setProgress(0); - this.onDispose(() => this._importTimer && clearInterval(this._importTimer)); - } - - // Once this reaches 100, the import stage begins. - public setUploadProgress(percentage: number) { - this._progressUI.setProgress(percentage * this._uploadFraction); - if (percentage >= 100 && !this._importTimer) { - this._importStart = Date.now(); - this._importTimer = setInterval(() => this._onImportTimer(), 100); - } - } - - public finish() { - if (this._importTimer) { - clearInterval(this._importTimer); - } - this._progressUI.setProgress(100); - } - - /** - * Calls _progressUI.setProgress(percent) with percentage increasing from 0 and asymptotically - * approaching 100, reaching 50% after estSeconds. It's intended to look reasonable when the - * estimate is good, and to keep showing slowing progress even if it's not. - */ - private _onImportTimer() { - const elapsedSeconds = (Date.now() - this._importStart) / 1000; - const importProgress = elapsedSeconds / (elapsedSeconds + this._estImportSeconds); - const progress = this._uploadFraction + importProgress * (1 - this._uploadFraction); - this._progressUI.setProgress(100 * progress); - } -} - /** * Imports document through a plugin from a home/welcome screen. */ diff --git a/app/client/ui/CoreNewDocMethods.ts b/app/client/ui/CoreNewDocMethods.ts new file mode 100644 index 00000000..e84483f8 --- /dev/null +++ b/app/client/ui/CoreNewDocMethods.ts @@ -0,0 +1,47 @@ +import {homeImports} from 'app/client/ui/HomeImports'; +import {docUrl, urlState} from 'app/client/models/gristUrlState'; +import {HomeModel} from 'app/client/models/HomeModel'; +import {ImportSourceElement} from 'app/client/lib/ImportSourceElement'; +import {reportError} from 'app/client/models/AppModel'; + +export async function createDocAndOpen(home: HomeModel) { + const destWS = home.newDocWorkspace.get(); + if (!destWS) { return; } + try { + const docId = await home.createDoc("Untitled document", destWS === "unsaved" ? "unsaved" : destWS.id); + // Fetch doc information including urlId. + // TODO: consider changing API to return same response as a GET when creating an + // object, which is a semi-standard. + const doc = await home.app.api.getDoc(docId); + await urlState().pushUrl(docUrl(doc)); + } catch (err) { + reportError(err); + } +} + +export async function importDocAndOpen(home: HomeModel) { + const destWS = home.newDocWorkspace.get(); + if (!destWS) { return; } + const docId = await homeImports.docImport(home.app, destWS === "unsaved" ? "unsaved" : destWS.id); + if (docId) { + const doc = await home.app.api.getDoc(docId); + await urlState().pushUrl(docUrl(doc)); + } +} + +export async function importFromPluginAndOpen(home: HomeModel, source: ImportSourceElement) { + try { + const destWS = home.newDocWorkspace.get(); + if (!destWS) { return; } + const docId = await homeImports.importFromPlugin( + home.app, + destWS === "unsaved" ? "unsaved" : destWS.id, + source); + if (docId) { + const doc = await home.app.api.getDoc(docId); + await urlState().pushUrl(docUrl(doc)); + } + } catch (err) { + reportError(err); + } +} diff --git a/app/client/ui/DocTutorial.ts b/app/client/ui/DocTutorial.ts index 892e1937..2fd1c037 100644 --- a/app/client/ui/DocTutorial.ts +++ b/app/client/ui/DocTutorial.ts @@ -4,7 +4,7 @@ import {logTelemetryEvent} from 'app/client/lib/telemetry'; import {getWelcomeHomeUrl, urlState} from 'app/client/models/gristUrlState'; import {renderer} from 'app/client/ui/DocTutorialRenderer'; import {cssPopupBody, FLOATING_POPUP_TOOLTIP_KEY, FloatingPopup} from 'app/client/ui/FloatingPopup'; -import {sanitizeHTML} from 'app/client/ui/sanitizeHTML'; +import {sanitizeTutorialHTML} from 'app/client/ui/sanitizeHTML'; import {hoverTooltip, setHoverTooltip} from 'app/client/ui/tooltips'; import {basicButton, primaryButton, textButton} from 'app/client/ui2018/buttons'; import {mediaXSmall, theme, vars} from 'app/client/ui2018/cssVars'; @@ -13,7 +13,7 @@ import {loadingSpinner} from 'app/client/ui2018/loaders'; import {confirmModal, modal} from 'app/client/ui2018/modals'; import {parseUrlId} from 'app/common/gristUrls'; import {dom, makeTestId, Observable, styled} from 'grainjs'; -import {marked} from 'marked'; +import {marked, Token} from 'marked'; import debounce = require('lodash/debounce'); import range = require('lodash/range'); import sortBy = require('lodash/sortBy'); @@ -219,7 +219,7 @@ export class DocTutorial extends FloatingPopup { return value ? String(value) : undefined; }; - const walkTokens = (token: marked.Token) => { + const walkTokens = (token: Token) => { if (token.type === 'image') { imageUrls.push(token.href); } @@ -231,13 +231,13 @@ export class DocTutorial extends FloatingPopup { let slideContent = getValue('slide_content'); if (!slideContent) { return null; } - slideContent = sanitizeHTML(await marked.parse(slideContent, { + slideContent = sanitizeTutorialHTML(await marked.parse(slideContent, { async: true, renderer, walkTokens })); let boxContent = getValue('box_content'); if (boxContent) { - boxContent = sanitizeHTML(await marked.parse(boxContent, { + boxContent = sanitizeTutorialHTML(await marked.parse(boxContent, { async: true, renderer, walkTokens })); } diff --git a/app/client/ui/DocTutorialRenderer.ts b/app/client/ui/DocTutorialRenderer.ts index 0cecc08f..56d87755 100644 --- a/app/client/ui/DocTutorialRenderer.ts +++ b/app/client/ui/DocTutorialRenderer.ts @@ -2,7 +2,7 @@ import {marked} from 'marked'; export const renderer = new marked.Renderer(); -renderer.image = (href: string | null, title: string | null, _text: string) => { +renderer.image = ({href, title}) => { let classes = 'doc-tutorial-popup-thumbnail'; const hash = href?.split('#')?.[1]; if (hash) { @@ -17,6 +17,6 @@ renderer.image = (href: string | null, title: string | null, _text: string) => { `; }; -renderer.link = (href: string | null, _title: string | null, text: string) => { +renderer.link = ({href, text}) => { return `${text}`; }; diff --git a/app/client/ui/HomeIntro.ts b/app/client/ui/HomeIntro.ts index 23ea1cd1..32ceeba1 100644 --- a/app/client/ui/HomeIntro.ts +++ b/app/client/ui/HomeIntro.ts @@ -3,7 +3,7 @@ import {getLoginOrSignupUrl, getLoginUrl, getSignupUrl, urlState} from 'app/clie import {HomeModel} from 'app/client/models/HomeModel'; import {productPill} from 'app/client/ui/AppHeader'; import * as css from 'app/client/ui/DocMenuCss'; -import {createDocAndOpen, importDocAndOpen} from 'app/client/ui/HomeLeftPane'; +import {newDocMethods} from 'app/client/ui/NewDocMethods'; import {manageTeamUsersApp} from 'app/client/ui/OpenUserManager'; import {bigBasicButton, cssButton} from 'app/client/ui2018/buttons'; import {testId, theme, vars} from 'app/client/ui2018/cssVars'; @@ -177,11 +177,11 @@ function buildButtons(homeModel: HomeModel, options: { ), !options.import ? null : cssBtn(cssBtnIcon('Import'), t("Import Document"), testId('intro-import-doc'), - dom.on('click', () => importDocAndOpen(homeModel)), + dom.on('click', () => newDocMethods.importDocAndOpen(homeModel)), ), !options.empty ? null : cssBtn(cssBtnIcon('Page'), t("Create Empty Document"), testId('intro-create-doc'), - dom.on('click', () => createDocAndOpen(homeModel)), + dom.on('click', () => newDocMethods.createDocAndOpen(homeModel)), ), ); } diff --git a/app/client/ui/HomeLeftPane.ts b/app/client/ui/HomeLeftPane.ts index 1489b6ab..054745d3 100644 --- a/app/client/ui/HomeLeftPane.ts +++ b/app/client/ui/HomeLeftPane.ts @@ -1,29 +1,27 @@ import {makeT} from 'app/client/lib/localization'; import {loadUserManager} from 'app/client/lib/imports'; -import {ImportSourceElement} from 'app/client/lib/ImportSourceElement'; -import {reportError} from 'app/client/models/AppModel'; -import {docUrl, urlState} from 'app/client/models/gristUrlState'; +import {urlState} from 'app/client/models/gristUrlState'; import {HomeModel} from 'app/client/models/HomeModel'; import {getWorkspaceInfo, workspaceName} from 'app/client/models/WorkspaceInfo'; import {getAdminPanelName} from 'app/client/ui/AdminPanelName'; +import * as roles from 'app/common/roles'; import {addNewButton, cssAddNewButton} from 'app/client/ui/AddNewButton'; -import {docImport, importFromPlugin} from 'app/client/ui/HomeImports'; +import {commonUrls, isFeatureEnabled} from 'app/common/gristUrls'; +import {computed, dom, domComputed, DomElementArg, observable, Observable, styled} from 'grainjs'; +import {newDocMethods} from 'app/client/ui/NewDocMethods'; +import {createHelpTools, cssLeftPanel, cssScrollPane, + cssSectionHeader, cssTools} from 'app/client/ui/LeftPanelCommon'; import { cssLinkText, cssMenuTrigger, cssPageEntry, cssPageIcon, cssPageLink, cssSpacer } from 'app/client/ui/LeftPanelCommon'; -import {createVideoTourToolsButton} from 'app/client/ui/OpenVideoTour'; -import {transientInput} from 'app/client/ui/transientInput'; -import {testId, theme} from 'app/client/ui2018/cssVars'; -import {icon} from 'app/client/ui2018/icons'; import {menu, menuIcon, menuItem, upgradableMenuItem, upgradeText} from 'app/client/ui2018/menus'; +import {testId, theme} from 'app/client/ui2018/cssVars'; import {confirmModal} from 'app/client/ui2018/modals'; -import {commonUrls, isFeatureEnabled} from 'app/common/gristUrls'; -import * as roles from 'app/common/roles'; +import {createVideoTourToolsButton} from 'app/client/ui/OpenVideoTour'; import {getGristConfig} from 'app/common/urlUtils'; +import {icon} from 'app/client/ui2018/icons'; +import {transientInput} from 'app/client/ui/transientInput'; import {Workspace} from 'app/common/UserAPI'; -import {computed, dom, domComputed, DomElementArg, observable, Observable, styled} from 'grainjs'; -import {createHelpTools, cssLeftPanel, cssScrollPane, - cssSectionHeader, cssTools} from 'app/client/ui/LeftPanelCommon'; const t = makeT('HomeLeftPane'); @@ -160,65 +158,23 @@ export function createHomeLeftPane(leftPanelOpen: Observable, home: Hom ); } -export async function createDocAndOpen(home: HomeModel) { - const destWS = home.newDocWorkspace.get(); - if (!destWS) { return; } - try { - const docId = await home.createDoc("Untitled document", destWS === "unsaved" ? "unsaved" : destWS.id); - // Fetch doc information including urlId. - // TODO: consider changing API to return same response as a GET when creating an - // object, which is a semi-standard. - const doc = await home.app.api.getDoc(docId); - await urlState().pushUrl(docUrl(doc)); - } catch (err) { - reportError(err); - } -} - -export async function importDocAndOpen(home: HomeModel) { - const destWS = home.newDocWorkspace.get(); - if (!destWS) { return; } - const docId = await docImport(home.app, destWS === "unsaved" ? "unsaved" : destWS.id); - if (docId) { - const doc = await home.app.api.getDoc(docId); - await urlState().pushUrl(docUrl(doc)); - } -} - -export async function importFromPluginAndOpen(home: HomeModel, source: ImportSourceElement) { - try { - const destWS = home.newDocWorkspace.get(); - if (!destWS) { return; } - const docId = await importFromPlugin( - home.app, - destWS === "unsaved" ? "unsaved" : destWS.id, - source); - if (docId) { - const doc = await home.app.api.getDoc(docId); - await urlState().pushUrl(docUrl(doc)); - } - } catch (err) { - reportError(err); - } -} - function addMenu(home: HomeModel, creating: Observable): DomElementArg[] { const org = home.app.currentOrg; const orgAccess: roles.Role|null = org ? org.access : null; const needUpgrade = home.app.currentFeatures?.maxWorkspacesPerOrg === 1; return [ - menuItem(() => createDocAndOpen(home), menuIcon('Page'), t("Create Empty Document"), + menuItem(() => newDocMethods.createDocAndOpen(home), menuIcon('Page'), t("Create Empty Document"), dom.cls('disabled', !home.newDocWorkspace.get()), testId("dm-new-doc") ), - menuItem(() => importDocAndOpen(home), menuIcon('Import'), t("Import Document"), + menuItem(() => newDocMethods.importDocAndOpen(home), menuIcon('Import'), t("Import Document"), dom.cls('disabled', !home.newDocWorkspace.get()), testId("dm-import") ), domComputed(home.importSources, importSources => ([ ...importSources.map((source, i) => - menuItem(() => importFromPluginAndOpen(home, source), + menuItem(() => newDocMethods.importFromPluginAndOpen(home, source), menuIcon('Import'), source.importSource.label, dom.cls('disabled', !home.newDocWorkspace.get()), diff --git a/app/client/ui/ImportProgress.ts b/app/client/ui/ImportProgress.ts new file mode 100644 index 00000000..ce6d52a2 --- /dev/null +++ b/app/client/ui/ImportProgress.ts @@ -0,0 +1,58 @@ +import {IProgress} from 'app/client/models/NotifyModel'; +import {Disposable} from 'grainjs'; + +export class ImportProgress extends Disposable { + // Import does upload first, then import. We show a single indicator, estimating which fraction + // of the time should be given to upload (whose progress we can report well), and which to the + // subsequent import (whose progress indicator is mostly faked). + private _uploadFraction: number; + private _estImportSeconds: number; + + private _importTimer: null | ReturnType = null; + private _importStart: number = 0; + + constructor(private _progressUI: IProgress, file: File) { + super(); + // We'll assume that for .grist files, the upload takes 90% of the total time, and for other + // files, 40%. + this._uploadFraction = file.name.endsWith(".grist") ? 0.9 : 0.4; + + // TODO: Import step should include a progress callback, to be combined with upload progress. + // Without it, we estimate import to take 2s per MB (non-scientific unreliable estimate), and + // use an asymptotic indicator which keeps moving without ever finishing. Not terribly useful, + // but does slow down for larger files, and is more comforting than a stuck indicator. + this._estImportSeconds = file.size / 1024 / 1024 * 2; + + this._progressUI.setProgress(0); + this.onDispose(() => this._importTimer && clearInterval(this._importTimer)); + } + + // Once this reaches 100, the import stage begins. + public setUploadProgress(percentage: number) { + this._progressUI.setProgress(percentage * this._uploadFraction); + if (percentage >= 100 && !this._importTimer) { + this._importStart = Date.now(); + this._importTimer = setInterval(() => this._onImportTimer(), 100); + } + } + + public finish() { + if (this._importTimer) { + clearInterval(this._importTimer); + } + this._progressUI.setProgress(100); + } + + /** + * Calls _progressUI.setProgress(percent) with percentage increasing from 0 and asymptotically + * approaching 100, reaching 50% after estSeconds. It's intended to look reasonable when the + * estimate is good, and to keep showing slowing progress even if it's not. + */ + private _onImportTimer() { + const elapsedSeconds = (Date.now() - this._importStart) / 1000; + const importProgress = elapsedSeconds / (elapsedSeconds + this._estImportSeconds); + const progress = this._uploadFraction + importProgress * (1 - this._uploadFraction); + this._progressUI.setProgress(100 * progress); + } +} + diff --git a/app/client/ui/MarkdownCellRenderer.ts b/app/client/ui/MarkdownCellRenderer.ts new file mode 100644 index 00000000..036572ff --- /dev/null +++ b/app/client/ui/MarkdownCellRenderer.ts @@ -0,0 +1,12 @@ +import {gristIconLink} from 'app/client/ui2018/links'; +import escape from 'lodash/escape'; +import {marked} from 'marked'; + +export const renderer = new marked.Renderer(); + +renderer.link = ({href, text}) => gristIconLink(href, text).outerHTML; + +// Disable Markdown features that we aren't ready to support yet. +renderer.hr = ({raw}) => raw; +renderer.html = ({raw}) => escape(raw); +renderer.image = ({raw}) => raw; diff --git a/app/client/ui/PageWidgetPicker.ts b/app/client/ui/PageWidgetPicker.ts index e61757f7..dbd7cf84 100644 --- a/app/client/ui/PageWidgetPicker.ts +++ b/app/client/ui/PageWidgetPicker.ts @@ -1,5 +1,6 @@ import {BehavioralPromptsManager} from 'app/client/components/BehavioralPromptsManager'; import {GristDoc} from 'app/client/components/GristDoc'; +import {FocusLayer} from 'app/client/lib/FocusLayer'; import {makeT} from 'app/client/lib/localization'; import {reportError} from 'app/client/models/AppModel'; import {ColumnRec, TableRec, ViewSectionRec} from 'app/client/models/DocModel'; @@ -260,8 +261,7 @@ export function buildPageWidgetPicker( dom.create(PageWidgetSelect, value, tables, columns, onSaveCB, behavioralPromptsManager, options), - // gives focus and binds keydown events - (elem: any) => { setTimeout(() => elem.focus(), 0); }, + elem => { FocusLayer.create(ctl, {defaultFocusElem: elem, pauseMousetrap: true}); }, onKeyDown({ Escape: () => ctl.close(), Enter: () => isValid() && onSaveCB() @@ -328,6 +328,8 @@ export class PageWidgetSelect extends Disposable { private _isNewTableDisabled = Computed.create(this, this._value.type, (use, type) => !isValidSelection( 'New Table', type, {isNewPage: this._options.isNewPage, summarize: use(this._value.summarize)})); + private _isSummaryDisabled = Computed.create(this, this._value.type, (_use, type) => !isSummaryCompatible(type)); + constructor( private _value: IWidgetValueObs, private _tables: Observable, @@ -389,8 +391,9 @@ export class PageWidgetSelect extends Disposable { cssEntry.cls('-selected', (use) => use(this._value.summarize) && use(this._value.table) === table.id() ), - cssEntry.cls('-disabled', (use) => !isSummaryCompatible(use(this._value.type))), - dom.on('click', (ev, el) => this._selectPivot(table.id(), el as HTMLElement)), + cssEntry.cls('-disabled', this._isSummaryDisabled), + dom.on('click', (_ev, el) => + !this._isSummaryDisabled.get() && this._selectPivot(table.id(), el as HTMLElement)), testId('pivot'), ), testId('table'), @@ -572,7 +575,6 @@ const cssEntry = styled('div', ` &-disabled { color: ${theme.widgetPickerItemDisabledBg}; cursor: default; - pointer-events: none; } &-disabled&-selected { background-color: inherit; diff --git a/app/client/ui/UserImage.ts b/app/client/ui/UserImage.ts index ecf775a5..167de8c6 100644 --- a/app/client/ui/UserImage.ts +++ b/app/client/ui/UserImage.ts @@ -1,5 +1,5 @@ import {colors, theme} from 'app/client/ui2018/cssVars'; -import {FullUser} from 'app/common/LoginSessionAPI'; +import {UserProfile} from 'app/common/LoginSessionAPI'; import {dom, DomElementArg, styled} from 'grainjs'; import {icon} from 'app/client/ui2018/icons'; @@ -9,7 +9,9 @@ export type Size = 'small' | 'medium' | 'large'; * Returns a DOM element showing a circular icon with a user's picture, or the user's initials if * picture is missing. Also varies the color of the circle when using initials. */ -export function createUserImage(user: FullUser|'exampleUser'|null, size: Size, ...args: DomElementArg[]): HTMLElement { +export function createUserImage( + user: UserProfile|'exampleUser'|null, size: Size, ...args: DomElementArg[] +): HTMLElement { let initials: string; return cssUserImage( cssUserImage.cls('-' + size), @@ -39,7 +41,7 @@ export function getInitials(user: {name?: string, email?: string}) { /** * Hashes the username to return a color. */ -function pickColor(user: FullUser): string { +function pickColor(user: UserProfile): string { let c = hashCode(user.name + ':' + user.email) % someColors.length; if (c < 0) { c += someColors.length; } return someColors[c]; diff --git a/app/client/ui/sanitizeHTML.ts b/app/client/ui/sanitizeHTML.ts index e793ca7f..e979959c 100644 --- a/app/client/ui/sanitizeHTML.ts +++ b/app/client/ui/sanitizeHTML.ts @@ -1,16 +1,30 @@ -import DOMPurify from 'dompurify'; +import createDOMPurifier from 'dompurify'; -const config = { - ADD_TAGS: ['iframe'], - ADD_ATTR: ['allowFullscreen'], -}; +export function sanitizeHTML(source: string | Node): string { + return defaultPurifier.sanitize(source); +} -DOMPurify.addHook('uponSanitizeAttribute', (node) => { +export function sanitizeTutorialHTML(source: string | Node): string { + return tutorialPurifier.sanitize(source, { + ADD_TAGS: ['iframe'], + ADD_ATTR: ['allowFullscreen'], + }); +} + +const defaultPurifier = createDOMPurifier(); +defaultPurifier.addHook('uponSanitizeAttribute', handleSanitizeAttribute); + +const tutorialPurifier = createDOMPurifier(); +tutorialPurifier.addHook('uponSanitizeAttribute', handleSanitizeAttribute); +tutorialPurifier.addHook('uponSanitizeElement', handleSanitizeTutorialElement); + +function handleSanitizeAttribute(node: Element) { if (!('target' in node)) { return; } node.setAttribute('target', '_blank'); -}); -DOMPurify.addHook('uponSanitizeElement', (node, data) => { +} + +function handleSanitizeTutorialElement(node: Element, data: createDOMPurifier.SanitizeElementHookEvent) { if (data.tagName !== 'iframe') { return; } const src = node.getAttribute('src'); @@ -18,9 +32,5 @@ DOMPurify.addHook('uponSanitizeElement', (node, data) => { return; } - return node.parentNode?.removeChild(node); -}); - -export function sanitizeHTML(source: string | Node): string { - return DOMPurify.sanitize(source, config); + node.parentNode?.removeChild(node); } diff --git a/app/client/ui2018/IconList.ts b/app/client/ui2018/IconList.ts index 39bbf15d..c9ab4e66 100644 --- a/app/client/ui2018/IconList.ts +++ b/app/client/ui2018/IconList.ts @@ -23,6 +23,7 @@ export type IconName = "ChartArea" | "FieldFunctionEqual" | "FieldInteger" | "FieldLink" | + "FieldMarkdown" | "FieldNumeric" | "FieldReference" | "FieldSpinner" | @@ -185,6 +186,7 @@ export const IconList: IconName[] = ["ChartArea", "FieldFunctionEqual", "FieldInteger", "FieldLink", + "FieldMarkdown", "FieldNumeric", "FieldReference", "FieldSpinner", diff --git a/app/client/ui2018/cssVars.ts b/app/client/ui2018/cssVars.ts index dcac5402..f88dc1bf 100644 --- a/app/client/ui2018/cssVars.ts +++ b/app/client/ui2018/cssVars.ts @@ -895,6 +895,13 @@ export const theme = { undefined, colors.slate), widgetGallerySecondaryHeaderBgHover: new CustomProp( 'theme-widget-gallery-secondary-header-bg-hover', undefined, '#7E7E85'), + + /* Markdown Cell */ + markdownCellLightBg: new CustomProp('theme-markdown-cell-light-bg', undefined, colors.lightGrey), + markdownCellLightBorder: new CustomProp('theme-markdown-cell-light-border', undefined, + colors.mediumGreyOpaque), + markdownCellMediumBorder: new CustomProp('theme-markdown-cell-medium-border', undefined, + colors.darkGrey), }; const cssColors = values(colors).map(v => v.decl()).join('\n'); diff --git a/app/client/ui2018/icons.ts b/app/client/ui2018/icons.ts index ee1e97d1..b0889223 100644 --- a/app/client/ui2018/icons.ts +++ b/app/client/ui2018/icons.ts @@ -56,7 +56,7 @@ import { IconName } from './IconList'; /** * Defaults for all icons. */ -const iconDiv = styled('div', ` +const iconStyles = ` position: relative; display: inline-block; vertical-align: middle; @@ -66,24 +66,35 @@ const iconDiv = styled('div', ` width: 16px; height: 16px; background-color: var(--icon-color, var(--grist-theme-text, black)); -`); +`; -export const cssIconBackground = styled(iconDiv, ` - background-color: var(--icon-background, inherit); - -webkit-mask: none; - & .${iconDiv.className} { - transition: inherit; - display: block; - } -`); +const cssIconDiv = styled('div', iconStyles); + +const cssIconSpan = styled('span', iconStyles); export function icon(name: IconName, ...domArgs: DomElementArg[]): HTMLElement { - return iconDiv( + return cssIconDiv( dom.style('-webkit-mask-image', `var(--icon-${name})`), ...domArgs ); } +export function iconSpan(name: IconName, ...domArgs: DomElementArg[]): HTMLElement { + return cssIconSpan( + dom.style('-webkit-mask-image', `var(--icon-${name})`), + ...domArgs + ); +} + +export const cssIconSpanBackground = styled(cssIconSpan, ` + background-color: var(--icon-background, inherit); + -webkit-mask: none; + & .${cssIconSpan.className} { + transition: inherit; + display: block; + } +`); + /** * Container box for an icon to serve as a button.. */ diff --git a/app/client/ui2018/links.ts b/app/client/ui2018/links.ts index e46bc21c..f460c3fe 100644 --- a/app/client/ui2018/links.ts +++ b/app/client/ui2018/links.ts @@ -1,9 +1,9 @@ import {findLinks} from 'app/client/lib/textUtils'; -import { sameDocumentUrlState, urlState } from 'app/client/models/gristUrlState'; -import { hideInPrintView, testId, theme } from 'app/client/ui2018/cssVars'; -import {cssIconBackground, icon} from 'app/client/ui2018/icons'; -import { CellValue } from 'app/plugin/GristData'; -import { dom, DomArg, IDomArgs, Observable, styled } from 'grainjs'; +import {sameDocumentUrlState, urlState} from 'app/client/models/gristUrlState'; +import {hideInPrintView, testId, theme} from 'app/client/ui2018/cssVars'; +import {cssIconSpanBackground, iconSpan} from 'app/client/ui2018/icons'; +import {CellValue} from 'app/plugin/GristData'; +import {dom, DomArg, IDomArgs, Observable, styled} from 'grainjs'; /** * Styling for a simple link. @@ -37,6 +37,19 @@ export function gristLink(href: string|Observable, ...args: IDomArgs (not