mirror of
https://github.com/gristlabs/grist-core.git
synced 2024-09-28 15:20:48 +00:00
15f1ef96fa
Summary: Like the welcome tour, a special URL hash triggers startDocTour which uses data from a table GristDocTour to construct the appropriate popups. This is the basic version described in https://grist.quip.com/sN2RAHI2dchm/Document-tours Test Plan: Added a new nbrowser test which tests the data produced by makeDocTour. The general behaviour of the UI and popups has hardly changed so existing tests cover that well enough. The new test uses a new fixture document which you can open to easily experience the tour. Error cases where there's no valid document tour are not tested because that behaviour is likely to change significantly and this feature is still quite 'private'. Reviewers: georgegevoian Reviewed By: georgegevoian Subscribers: jarek, dsagal Differential Revision: https://phab.getgrist.com/D2938
63 lines
2.0 KiB
TypeScript
63 lines
2.0 KiB
TypeScript
import {IOnBoardingMsg, startOnBoarding} from "app/client/ui/OnBoardingPopups";
|
|
import {DocData} from "../../common/DocData";
|
|
import * as _ from "lodash";
|
|
import {Placement} from "@popperjs/core";
|
|
import {placements} from "@popperjs/core/lib/enums";
|
|
import {sameDocumentUrlState} from "../models/gristUrlState";
|
|
|
|
|
|
export async function startDocTour(docData: DocData, onFinishCB: () => void) {
|
|
const docTour: IOnBoardingMsg[] = await makeDocTour(docData) || invalidDocTour;
|
|
(window as any)._gristDocTour = docTour; // for easy testing
|
|
startOnBoarding(docTour, onFinishCB);
|
|
}
|
|
|
|
const invalidDocTour: IOnBoardingMsg[] = [{
|
|
title: 'No valid document tour',
|
|
body: 'Cannot construct a document tour from the data in this document. ' +
|
|
'Ensure there is a table named GristDocTour with columns Title, Body, Placement, and Location.',
|
|
selector: 'document',
|
|
showHasModal: true,
|
|
}];
|
|
|
|
async function makeDocTour(docData: DocData): Promise<IOnBoardingMsg[] | null> {
|
|
const tableId = "GristDocTour";
|
|
if (!docData.getTable(tableId)) {
|
|
return null;
|
|
}
|
|
await docData.fetchTable(tableId);
|
|
const tableData = docData.getTable(tableId)!;
|
|
const result = _.sortBy(tableData.getRowIds(), tableData.getRowPropFunc('manualSort') as any).map(rowId => {
|
|
function getValue(colId: string): string {
|
|
return String(tableData.getValue(rowId, colId) || "");
|
|
}
|
|
const title = getValue("Title");
|
|
const body = getValue("Body");
|
|
const locationValue = getValue("Location");
|
|
let placement = getValue("Placement");
|
|
|
|
if (!(title || body)) {
|
|
return null;
|
|
}
|
|
|
|
const urlState = sameDocumentUrlState(locationValue);
|
|
if (!placements.includes(placement as Placement)) {
|
|
placement = "auto";
|
|
}
|
|
|
|
return {
|
|
title,
|
|
body,
|
|
placement,
|
|
urlState,
|
|
selector: '.active_cursor',
|
|
// Center the popup if the user doesn't provide a link to a cell
|
|
showHasModal: !urlState?.hash
|
|
};
|
|
}).filter(x => x !== null) as IOnBoardingMsg[];
|
|
if (!result.length) {
|
|
return null;
|
|
}
|
|
return result;
|
|
}
|