20259: Add documentation for banner and tooltip features
[arvados.git] / doc / install / workbench.html.textile.liquid
1 ---
2 layout: default
3 navsection: installguide
4 title: Customizing Workbench
5 ...
6 {% comment %}
7 Copyright (C) The Arvados Authors. All rights reserved.
8
9 SPDX-License-Identifier: CC-BY-SA-3.0
10 {% endcomment %}
11
12 h2. Site name
13
14 Use the @Workbench.SiteName@ configuration option to set the site name rendered at the top of Workbench.
15
16 {% codeblock as yaml %}
17     Workbench:
18       SiteName: Arvados Workbench
19 {% endcodeblock %}
20
21 h2. Welcome page
22
23 Use the @Workbench.WelcomePageHTML@ configuration option to set the text that is rendered when a user arrives at the front page (and has not yet logged in).
24
25 {% codeblock as yaml %}
26     Workbench:
27       WelcomePageHTML: |
28         <img src="/arvados-logo-big.png" style="width: 20%; float: right; padding: 1em;" />
29         <h2>Please log in.</h2>
30
31         <p>If you have never used Arvados Workbench before, logging in
32         for the first time will automatically create a new
33         account.</p>
34
35         <i>Arvados Workbench uses your information only for
36         identification, and does not retrieve any other personal
37         information.</i>
38 {% endcodeblock %}
39
40 h2. Inactive user page
41
42 Use the @Workbench.InactivePageHTML@ configuration option to set the text that is rendered when a user logs in but is inactive.
43
44 {% codeblock as yaml %}
45     Workbench:
46       InactivePageHTML: |
47         <img src="/arvados-logo-big.png" style="width: 20%; float: right; padding: 1em;" />
48         <h3>Hi! You're logged in, but...</h3>
49         <p>Your account is inactive.</p>
50         <p>An administrator must activate your account before you can get
51         any further.</p>
52 {% endcodeblock %}
53
54 h2(#banner). Message banner on login and custom tooltips
55
56 Set the @Workbench.BannerUUID@ configuration option to the UUID of a collection.  *This collection should be shared with all users.*
57
58 {% codeblock as yaml %}
59     Workbench:
60       BannerUUID: zzzzz-4zz18-0123456789abcde
61 {% endcodeblock %}
62
63 h3. Banner
64
65 You can have box pop up when users load Workbench to give information such as links to site-specific documentation or notification about anticipated downtime.
66
67 The banner appears when a user loads workbench and have not yet viewed the current banner text.  Users can also view the banner after dismissing it by selecting the *Restore Banner* option from the *Notifications* menu.
68
69 The banner text (HTML formatted) is loaded from the file @banner.html@ in the collection provided in @BannerUUID@.
70
71 h3. Tooltips
72
73 You can provide a custom tooltip overlay to provide site-specific guidance for using workbench.  Users can opt-out by selecting *Disable Tooltips* from the *Notifications* menu.
74
75 The tooltips are loaded from the file @tooltips.json@ in the collection provided in @BannerUUID@.
76
77 The format of this file is a JSON object where the key is a "CSS selector":https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors and the value is the text of the tooltip.  Here is an example:
78
79 {% codeblock as yaml %}
80 {
81     "[data-cy=side-panel-button]": "Click here to create a new project!",
82     "[data-cy=project-panel] tbody tr:nth-child(1)": "First element in the project list"
83 }
84 {% endcodeblock %}
85
86 The first example adds a tooltip displaying "Click here to create a new project!" to the HTML node with the attribute @data-cy="side-panel-button"@.
87
88 The second example adds a tooltip displaying "First element in the project list" by finding the project panel element, finding the table body element within the project panel, then matching the first table row.
89
90 Use the web developer tools offer by your browser to determine what identifiers are available and construct selections that will anchor your tooltips to the desired workbench components.