Add better anchors for product tours (#180)

Author: michaeljguarino

assets/src/components/Console.js

@@ -48,7 +48,7 @@ export const TOOLBAR_HEIGHT = '55px'
 export const SIDEBAR_WIDTH = '200px'
 const APP_ICON = `${process.env.PUBLIC_URL}/console-full.png`
 
-export function Icon({ icon, text, selected, path, onClick, size, align }) {
+export function Icon({ id, icon, text, selected, path, onClick, size, align }) {
   const dropRef = useRef()
   const history = useHistory()
   const [hover, setHover] = useState(false)
@@ -59,6 +59,7 @@ export function Icon({ icon, text, selected, path, onClick, size, align }) {
         ref={dropRef}
         focusIndicator={false}
         className={`sidebar-icon${selected ? ' selected' : ''}`}
+        id={id}
         align="center"
         justify="center"
         margin={{ horizontal: 'xsmall' }}
@@ -270,6 +271,7 @@ export default function Console() {
                     <AutoRefresh />
                     <SocialLinks />
                     <Icon
+                      id="installer"
                       icon={<Install size="18px" />}
                       text="Install"
                       size="40px"

assets/src/components/Installations.js

@@ -131,10 +131,11 @@ export function InstallationsFlyout() {
   )
 }
 
-export function ToolbarItem({ children, onClick, open }) {
+export function ToolbarItem({ id, children, onClick, open }) {
   return (
     <Box
       flex={false}
+      id={id}
       direction="row"
       round="xsmall"
       background={open ? 'sidebarHover' : null}
@@ -336,6 +337,7 @@ export function Installations() {
         align="center"
       >
         <Icon
+          id="application-information"
           icon={<CircleInformation size="18px" />}
           text="Application Details"
           size="40px"
@@ -344,6 +346,7 @@ export function Installations() {
           onClick={() => setModal(true)}
         />
         <ToolbarItem
+          id="application-selector"
           onClick={() => setOpen(true)}
           open={open}
         >

assets/src/components/Sidebar.js

@@ -48,6 +48,7 @@ export function SidebarIcon({ icon, text, name: sidebarName, selected, path, san
     >
       <Box
         focusIndicator={false}
+        className={`sidebar-${text}`}
         fill="horizontal"
         align="center"
         direction="row" 
@@ -90,6 +91,7 @@ function CompressedIcon({ icon, text, selected, path, sandboxed }) {
       <Box
         ref={setRef}
         focusIndicator={false}
+        className={`sidebar-${text}`}
         align="center"
         justify="center"
         direction="row"