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 The following HTML tags are allowed in banner.html: a, b, blockquote, br, code, del, dd, dl, dt, em, h1-h6, hr, i, img, kbd, li, ol, p, pre, s, del, section, span, strong, sub, sup, and ul.
  72
  73 The following attributes are allowed: src, width, height, href, alt, title, and style.
  74
  75 All styling must be made in-line with the style attribute. Disallowed tags and attributes will not render.
  76
  77 h3. Tooltips
  78
  79 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.
  80
  81 The tooltips are loaded from the file @tooltips.json@ in the collection provided in @BannerUUID@.
  82
  83 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:
  84
  85 {% codeblock as yaml %}
  86 {
  87     "[data-cy=side-panel-button]": "Click here to create a new project!",
  88     "[data-cy=project-panel] tbody tr:nth-child(1)": "First element in the project list"
  89 }
  90 {% endcodeblock %}
  91
  92 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"@.
  93
  94 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.
  95
  96 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.