(core) Adding empty workspace intro

Summary: Adding title and buttons for empty workspace screen.

Test Plan: Updated

Reviewers: georgegevoian

Reviewed By: georgegevoian

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

app/client/ui/DocMenu.ts

@@ -9,7 +9,7 @@ import {docUrl, urlState} from 'app/client/models/gristUrlState';
 import {getTimeFromNow, HomeModel, makeLocalViewSettings, ViewSettings} from 'app/client/models/HomeModel';
 import {getWorkspaceInfo, workspaceName} from 'app/client/models/WorkspaceInfo';
 import * as css from 'app/client/ui/DocMenuCss';
-import {buildHomeIntro} from 'app/client/ui/HomeIntro';
+import {buildHomeIntro, buildWorkspaceIntro} from 'app/client/ui/HomeIntro';
 import {buildUpgradeButton} from 'app/client/ui/ProductUpgrades';
 import {buildPinnedDoc, createPinnedDocs} from 'app/client/ui/PinnedDocs';
 import {shadowScroll} from 'app/client/ui/shadowScroll';
@@ -134,12 +134,14 @@ function createLoadedDocMenu(owner: IDisposableOwner, home: HomeModel) {
                   dom('div',
                     buildAllTemplates(home, home.templateWorkspaces, viewSettings)
                   ) :
-                  workspace && !workspace.isSupportWorkspace ?
+                  workspace && !workspace.isSupportWorkspace && workspace.docs?.length ?
                     css.docBlock(
                       buildWorkspaceDocBlock(home, workspace, flashDocId, viewSettings),
                       testId('doc-block')
                     ) :
-                    css.docBlock('Workspace not found')
+                  workspace && !workspace.isSupportWorkspace && workspace.docs?.length === 0 ?
+                  buildWorkspaceIntro(home) :
+                  css.docBlock('Workspace not found')
               )
             ]),
           ];

app/client/ui/HomeIntro.ts

@@ -32,6 +32,25 @@ export function buildHomeIntro(homeModel: HomeModel): DomContents {
   }
 }
 
+export function buildWorkspaceIntro(homeModel: HomeModel): DomContents {
+  const isViewer = homeModel.currentWS.get()?.access === roles.VIEWER;
+  const isAnonym = !homeModel.app.currentValidUser;
+  const emptyLine = cssIntroLine(testId('empty-workspace-info'), "This workspace is empty.");
+  if (isAnonym || isViewer) {
+    return emptyLine;
+  } else {
+    return [
+      emptyLine,
+      buildButtons(homeModel, {
+        invite: false,
+        templates: false,
+        import: true,
+        empty: true
+      })
+    ];
+  }
+}
+
 function makeViewerTeamSiteIntro(homeModel: HomeModel) {
   const personalOrg = Computed.create(null, use => use(homeModel.app.topAppModel.orgs).find(o => o.owner));
   const docLink = (dom.maybe(personalOrg, org => {
@@ -105,31 +124,46 @@ function helpCenterLink() {
   return cssLink({href: commonUrls.help, target: '_blank'}, cssInlineIcon('Help'), 'Help Center');
 }
 
-
-function makeCreateButtons(homeModel: HomeModel) {
-  const canManageTeam = homeModel.app.isTeamSite &&
-    roles.canEditAccess(homeModel.app.currentOrg?.access || null);
+function buildButtons(homeModel: HomeModel, options: {
+  invite: boolean,
+  templates: boolean,
+  import: boolean,
+  empty: boolean,
+}) {
   return cssBtnGroup(
-    (canManageTeam ?
-      cssBtn(cssBtnIcon('Help'), 'Invite Team Members', testId('intro-invite'),
-        cssButton.cls('-primary'),
-        dom.on('click', () => manageTeamUsersApp(homeModel.app)),
-      ) :
-      cssBtn(cssBtnIcon('FieldTable'), 'Browse Templates', testId('intro-templates'),
-        cssButton.cls('-primary'),
-        dom.hide(shouldHideUiElement("templates")),
-        urlState().setLinkUrl({homePage: 'templates'}),
-      )
+    !options.invite ? null :
+    cssBtn(cssBtnIcon('Help'), 'Invite Team Members', testId('intro-invite'),
+      cssButton.cls('-primary'),
+      dom.on('click', () => manageTeamUsersApp(homeModel.app)),
     ),
+    !options.templates ? null :
+    cssBtn(cssBtnIcon('FieldTable'), 'Browse Templates', testId('intro-templates'),
+      cssButton.cls('-primary'),
+      dom.hide(shouldHideUiElement("templates")),
+      urlState().setLinkUrl({homePage: 'templates'}),
+    ),
+    !options.import ? null :
     cssBtn(cssBtnIcon('Import'), 'Import Document', testId('intro-import-doc'),
       dom.on('click', () => importDocAndOpen(homeModel)),
     ),
+    !options.empty ? null :
     cssBtn(cssBtnIcon('Page'), 'Create Empty Document', testId('intro-create-doc'),
       dom.on('click', () => createDocAndOpen(homeModel)),
     ),
   );
 }
 
+function makeCreateButtons(homeModel: HomeModel) {
+  const canManageTeam = homeModel.app.isTeamSite &&
+    roles.canEditAccess(homeModel.app.currentOrg?.access || null);
+  return buildButtons(homeModel, {
+    invite: canManageTeam,
+    templates: !canManageTeam,
+    import: true,
+    empty: true
+  });
+}
+
 const cssParagraph = styled(css.docBlock, `
   color: ${theme.text};
   line-height: 1.6;