diff --git a/querybook/webapp/components/UIGuide/DataDocUIGuide.tsx b/querybook/webapp/components/UIGuide/DataDocUIGuide.tsx index 10c942ff7..b17de5e0e 100644 --- a/querybook/webapp/components/UIGuide/DataDocUIGuide.tsx +++ b/querybook/webapp/components/UIGuide/DataDocUIGuide.tsx @@ -53,23 +53,25 @@ export const DataDocTourSteps: ReactourStep[] = [ selector: '.DataDoc .block-crud-buttons ', content: ( <> +

Hover over the highlighted area!

+

This section allows you to add different kind of cells to a DataDoc. You can think of DataDoc as a list of cells.

- Text cell allows you to document your investigation or make - notes. It supports rich text editing. + Text cell allows you to document your investigation + or make notes. It supports rich text editing.

- Query cell is the most important type of cell. You can use - it to write and run queries. + Query cell is the most important type of cell. + You can use it to write and run queries.

- Chart cell allows you to make visuatizations based on + Chart cell allows you to make visuatizations based on execution results.

@@ -77,7 +79,7 @@ export const DataDocTourSteps: ReactourStep[] = [ }, { selector: - '.DataDoc .DataDocRightSidebar-button-section-bottom [aria-label="Configure Template"]', + '.DataDoc .DataDocRightSidebar-button-section-bottom [aria-label="Set Templated Variables"]', content: ( <>

diff --git a/querybook/webapp/components/UIGuide/QuerybookSidebarUIGuide.tsx b/querybook/webapp/components/UIGuide/QuerybookSidebarUIGuide.tsx index 4d40e9922..43a5c3ba7 100644 --- a/querybook/webapp/components/UIGuide/QuerybookSidebarUIGuide.tsx +++ b/querybook/webapp/components/UIGuide/QuerybookSidebarUIGuide.tsx @@ -1,213 +1,236 @@ import React from 'react'; import Tour, { ReactourStep } from 'reactour'; import { useLocation } from 'react-router-dom'; - -import { getQueryString } from 'lib/utils/query-string'; - import { Button } from 'ui/Button/Button'; import { Icon } from 'ui/Icon/Icon'; import { Title } from 'ui/Title/Title'; +import { Link } from 'ui/Link/Link'; +import { getQueryString } from 'lib/utils/query-string'; -export const QuerybookSidebarTourSteps: ReactourStep[] = [ - { - selector: '.EnvironmentAppSidebar', - content: ({ goTo }) => ( -

- Welcome! -

Let's go over the sidebar functionalities.

-
-
- For the DataDoc tour, - -
-
- ), - }, - { - selector: '.EnvironmentTopbar', - content: `This is the environment picker. Every environment supports different query engines. Hover on them to get more info.`, - }, - { - selector: '.EntitySidebar .apps-list [aria-label="DataDoc"]', - content: ( - <> -

- This is the DataDoc navigator. It will show you a list of - the DataDocs you own, have favorited, and worked on - recently. -

-
-

- DataDocs contain queries, text, and charts. They can be - shared with others. -

- - ), - }, - { - selector: '.DataDocNavigator .SearchBar', - content: `You can quickly find DataDocs by using this search bar.`, - }, - { - selector: '.DataDocNavigator [aria-label="New DataDoc"]', - content: ( - <> -

You can create a new DataDoc with this button.

-
-

- Click on this button to leave this tour and start the - DataDoc tour. -

- - ), - }, - { - selector: '.EntitySidebar .apps-list [aria-label="Adhoc Query"]', - content: ( - <> -

- This is the Adhoc Editor for running simple queries. It will - show you an query editor in the workspace. -

-
-

- Queries run on Adhoc Editor will not be saved. However, you - can access a list of queries you have run by clicking on the - Query Execution Navigator (we'll get to it in a bit). -

- - ), - }, - { - selector: '.EntitySidebar .apps-list [aria-label="Tables"]', - content: `This is the Tables Navigator. It will show you a list of all the tables in each metastore. You can use the search bar to quickly find the one you want and preview them.`, - }, - { - selector: '.EntitySidebar .apps-list [aria-label="Snippets"]', - content: ( - <> -

- This is the Snippets Navigator. You can create, filter, and - view all the snippets in the sidebar. -

-
-

- Snippets are useful for storing queries you want to reuse. - Try it out! Snippets can easily be inserted into DataDocs. -

- - ), - }, - { - selector: '.EntitySidebar .apps-list .QueryExecutionButton', - content: ( - <> -

- This is the Query Execution Navigator mentioned above. It - lists all recent executions. -

-
-

- You can filter and search for executions to see its status - and the query. -

- - ), - }, - { - selector: - '.EntitySidebar .sidebar-footer [aria-label="Search in Querybook"]', - content: ( - <> -

This is the Advanced Search for DataDocs and Tables.

-
-

For quick access, you can use,

-
- - + K -
- - ), - }, - { - selector: '.EntitySidebar .sidebar-footer .UserMenu', - content: ( - <> -

- This is the User Settings button. It will open the settings - modal. -

-
-

- You can create API Access Tokens here. Try out the new - themes here too! -

- - ), - }, - { - selector: '.EntitySidebar .sidebar-footer .QueryEngineStatusButton', - content: ( - <> -

- This is the Query Engine Status button. You can quickly get - an overview of all the query engine statuses. -

-
-

- You can click on any query engine to see the detailed - breakdown of the resource usage of your running queries. -

- - ), - }, - { - // selector: '.EntitySidebar .sidebar-footer .QueryEngineStatusButton', - content: ({ goTo }) => ( - <> -

- That's it! Thanks for using Querybook and feel free to - contact us on #querybook! -

-
+function getQuerybookSidebarTourSteps() { + const hasEnvironmentTopbar = !!document.querySelector('.EnvironmentTopbar'); + const dataDocNavigatorExists = !!document.querySelector( + '.DataDocNavigator' + ); + + const querybookSidebarTourSteps: ReactourStep[] = [ + { + selector: '.EnvironmentAppSidebar', + content: ({ goTo }) => (
- - for the DataDoc tour. + Welcome! +

Let's go over the sidebar functionalities.

+
+
+ For the DataDoc tour, + +
- - ), - }, -]; + ), + }, + hasEnvironmentTopbar && { + selector: '.EnvironmentTopbar', + content: `This is the environment picker. Every environment supports different query engines. Hover on them to get more info.`, + }, + { + selector: '.EntitySidebar .apps-list [aria-label="DataDocs"]', + content: ( + <> +

+ This is the DataDoc navigator. It will show you a list + of the DataDocs you own, have favorited, and worked on + recently. +

+
+

+ DataDocs contain queries, text, and charts. They can be + shared with others. +

+ + ), + }, + dataDocNavigatorExists && { + selector: '.DataDocNavigator .SearchBar', + content: `You can quickly find DataDocs by using this search bar.`, + }, + dataDocNavigatorExists && { + selector: '.DataDocNavigator [aria-label="New DataDoc"]', + content: ( + <> +

You can create a new DataDoc with this button.

+
+

+ Click on this button to leave this tour and start the + DataDoc tour. +

+ + ), + }, + { + selector: '.EntitySidebar .apps-list [aria-label="Adhoc Query"]', + content: ( + <> +

+ This is the Adhoc Editor for running simple queries. It + will show you an query editor in the workspace. +

+
+

+ Queries run on Adhoc Editor will not be saved. However, + you can access a list of queries you have run by + clicking on the Query Execution Navigator (we'll get to + it in a bit). +

+ + ), + }, + { + selector: '.EntitySidebar .apps-list [aria-label="Tables"]', + content: `This is the Tables Navigator. It will show you a list of all the tables in each metastore. You can use the search bar to quickly find the one you want and preview them.`, + }, + { + selector: '.EntitySidebar .apps-list [aria-label="Snippets"]', + content: ( + <> +

+ This is the Snippets Navigator. You can create, filter, + and view all the snippets in the sidebar. +

+
+

+ Snippets are useful for storing queries you want to + reuse. Try it out! Snippets can easily be inserted into + DataDocs. +

+ + ), + }, + { + selector: '.EntitySidebar .apps-list .QueryExecutionButton', + content: ( + <> +

+ This is the Query Execution Navigator mentioned above. + It lists all recent executions. +

+
+

+ You can filter and search for executions to see its + status and the query. +

+ + ), + }, + { + selector: + '.EntitySidebar .sidebar-footer [aria-label="Search Docs/Tables"]', + content: ( + <> +

This is the Advanced Search for DataDocs and Tables.

+
+

For quick access, you can use,

+
+ + + K +
+ + ), + }, + { + selector: '.EntitySidebar .sidebar-footer .UserMenu', + content: ( + <> +

+ This is the User Settings button. It will open the + settings modal. +

+
+

+ You can create API Access Tokens here. Try out the new + themes here too! +

+ + ), + }, + { + selector: '.EntitySidebar .sidebar-footer .QueryEngineStatusButton', + content: ( + <> +

+ This is the Query Engine Status button. You can quickly + get an overview of all the query engine statuses. +

+
+

+ You can click on any query engine to see the detailed + breakdown of the resource usage of your running queries. +

+ + ), + }, + { + content: ({ goTo }) => ( + <> +

+ That's it! Please send your suggestions to improve the + product on  + + GitHub + +

+
+
+ + for the DataDoc tour. +
+ + ), + }, + ].filter((step) => !!step); + + return querybookSidebarTourSteps; +} export const QuerybookSidebarUIGuide: React.FC = () => { const location = useLocation(); - const { tour } = React.useMemo(() => getQueryString(), [location.search]); - const [isOpen, setIsOpen] = React.useState(false); + const [steps, setSteps] = React.useState([]); + const { tour: showTourInQueryString } = React.useMemo( + () => getQueryString(), + [location.search] + ); + const [showTour, setShowTour] = React.useState(false); + + const startTour = React.useCallback(() => { + setSteps((oldTour) => + oldTour.length ? oldTour : getQuerybookSidebarTourSteps() + ); + setShowTour(true); + }, []); React.useEffect(() => { - if (tour) { - setIsOpen(true); + if (showTourInQueryString) { + startTour(); } - }, [tour]); + }, [showTourInQueryString]); return ( <> setIsOpen(false)} - steps={QuerybookSidebarTourSteps} + isOpen={showTour} + onRequestClose={() => setShowTour(false)} + steps={steps} accentColor={'var(--color-accent)'} />