Merge pull request #7625 from rottencandy/qshighlight

Bug 1909958: Add QuickStart highlight labels
openshift · Jan 6, 2021 · f5834cc · f5834cc
2 parents 3dab31b + e4514fd
commit f5834cc
Show file tree

Hide file tree

Showing 11 changed files with 73 additions and 17 deletions.
diff --git a/frontend/packages/console-app/src/components/cloud-shell/CloudShellMastheadButton.tsx b/frontend/packages/console-app/src/components/cloud-shell/CloudShellMastheadButton.tsx
@@ -75,6 +75,7 @@ const ClouldShellMastheadButton: React.FC<Props> = ({ flags, onClick, open }) =>
           onClick={toggleTerminal}
           className={open ? 'pf-m-selected' : undefined}
           data-tour-id="tour-cloud-shell-button"
+          data-quickstart-id="qs-masthead-cloudshell"
         >
           <TerminalIcon className="co-masthead-icon" />
         </Button>

diff --git a/frontend/packages/console-plugin-sdk/src/typings/nav-items.ts b/frontend/packages/console-plugin-sdk/src/typings/nav-items.ts
@@ -15,7 +15,10 @@ namespace ExtensionProperties {
     /** Nav section to which this item belongs to. If not specified, render item as top-level link. */
     section?: string;
     /** Props to pass to the corresponding `NavLink` component. */
-    componentProps: Pick<NavLinkProps, 'name' | 'startsWith' | 'testID' | 'data-tour-id'>;
+    componentProps: Pick<
+      NavLinkProps,
+      'name' | 'startsWith' | 'testID' | 'data-tour-id' | 'data-quickstart-id'
+    >;
     /*
      * TODO: Resolve issue of extensions adding optional sections
      * Providing insertBefore and mergeAfter capability to handles simple cases where extensions

diff --git a/...console-shared/src/components/markdown-highlight-extension/MarkdownHighlightExtension.tsx b/...console-shared/src/components/markdown-highlight-extension/MarkdownHighlightExtension.tsx
@@ -16,7 +16,7 @@ const MarkdownHighlightExtension: React.FC<MarkdownHighlightExtensionProps> = ({
       }
       setSelector(null);
       timeoutId = setTimeout(() => {
-        setSelector(`[data-tour-id="${highlightId}"]`);
+        setSelector(`[data-quickstart-id="${highlightId}"]`);
       }, 0);
     }
     elements && elements.forEach((elm) => elm.addEventListener('click', startHighlight));

diff --git a/frontend/packages/dev-console/src/plugin.tsx b/frontend/packages/dev-console/src/plugin.tsx
@@ -97,6 +97,7 @@ const plugin: Plugin<ConsumedExtensions> = [
         name: '%devconsole~+Add%',
         href: '/add',
         testID: '+Add-header',
+        'data-quickstart-id': 'qs-nav-add',
       },
     },
   },
@@ -111,6 +112,7 @@ const plugin: Plugin<ConsumedExtensions> = [
         name: '%devconsole~Topology%',
         href: '/topology',
         testID: 'topology-header',
+        'data-quickstart-id': 'qs-nav-topology',
       },
     },
     flags: {
@@ -129,6 +131,7 @@ const plugin: Plugin<ConsumedExtensions> = [
         href: '/dev-monitoring',
         testID: 'monitoring-header',
         'data-tour-id': 'tour-monitoring-nav',
+        'data-quickstart-id': 'qs-nav-monitoring',
       },
     },
     flags: {
@@ -147,6 +150,7 @@ const plugin: Plugin<ConsumedExtensions> = [
         href: '/search',
         testID: 'search-header',
         'data-tour-id': 'tour-search-nav',
+        'data-quickstart-id': 'qs-nav-search',
       },
     },
   },
@@ -161,6 +165,7 @@ const plugin: Plugin<ConsumedExtensions> = [
         name: '%devconsole~Builds%',
         resource: 'buildconfigs',
         testID: 'build-header',
+        'data-quickstart-id': 'qs-nav-builds',
       },
     },
     flags: {
@@ -178,6 +183,7 @@ const plugin: Plugin<ConsumedExtensions> = [
         name: '%devconsole~Project%',
         href: '/project-details',
         testID: 'project-details-header',
+        'data-quickstart-id': 'qs-nav-project',
       },
     },
     flags: {

diff --git a/frontend/packages/helm-plugin/src/plugin.ts b/frontend/packages/helm-plugin/src/plugin.ts
@@ -52,6 +52,7 @@ const plugin: Plugin<ConsumedExtensions> = [
         name: '%helm-plugin~Helm%',
         href: '/helm-releases',
         testID: 'helm-releases-header',
+        'data-quickstart-id': 'qs-nav-helm',
       },
     },
     flags: {

diff --git a/frontend/packages/pipelines-plugin/src/plugin.tsx b/frontend/packages/pipelines-plugin/src/plugin.tsx
@@ -91,6 +91,7 @@ const plugin: Plugin<ConsumedExtensions> = [
         name: '%pipelines-plugin~Pipelines%',
         resource: referenceForModel(PipelineModel),
         testID: 'pipeline-header',
+        'data-quickstart-id': 'qs-nav-pipelines',
       },
     },
     flags: {
@@ -107,6 +108,7 @@ const plugin: Plugin<ConsumedExtensions> = [
         // t('pipelines-plugin~Pipelines')
         name: '%pipelines-plugin~Pipelines%',
         href: '/pipelines',
+        'data-quickstart-id': 'qs-nav-pipelines',
       },
     },
     flags: {

diff --git a/frontend/public/components/masthead-toolbar.jsx b/frontend/public/components/masthead-toolbar.jsx
@@ -506,6 +506,7 @@ class MastheadToolbarContents_ extends React.Component {
           isOpen={isKebabDropdownOpen}
           items={this._renderApplicationItems(actions)}
           position="right"
+          data-quickstart-id="qs-masthead-utilitymenu"
           toggleIcon={<EllipsisVIcon />}
           isGrouped
         />
@@ -530,6 +531,7 @@ class MastheadToolbarContents_ extends React.Component {
         onToggle={this._onUserDropdownToggle}
         isOpen={isUserDropdownOpen}
         items={this._renderApplicationItems(actions)}
+        data-quickstart-id="qs-masthead-usermenu"
         position="right"
         toggleIcon={userToggle}
         isGrouped
@@ -563,6 +565,7 @@ class MastheadToolbarContents_ extends React.Component {
                   onToggle={this._onApplicationLauncherDropdownToggle}
                   isOpen={isApplicationLauncherDropdownOpen}
                   items={this._renderApplicationItems(this._launchActions())}
+                  data-quickstart-id="qs-masthead-applications"
                   position="right"
                   isGrouped
                 />
@@ -576,6 +579,7 @@ class MastheadToolbarContents_ extends React.Component {
                   onClick={drawerToggle}
                   isRead
                   count={notificationAlerts?.data?.length || 0}
+                  data-quickstart-id="qs-masthead-notifications"
                 >
                   <BellIcon alt="" />
                 </NotificationBadge>
@@ -587,6 +591,7 @@ class MastheadToolbarContents_ extends React.Component {
                   to={this._getImportYAMLPath()}
                   className="pf-c-button pf-m-plain"
                   aria-label={t('masthead~Import YAML')}
+                  data-quickstart-id="qs-masthead-import"
                 >
                   <PlusCircleIcon className="co-masthead-icon" alt="" />
                 </Link>
@@ -599,6 +604,7 @@ class MastheadToolbarContents_ extends React.Component {
                 className="co-app-launcher"
                 data-test="help-dropdown-toggle"
                 data-tour-id="tour-help-button"
+                data-quickstart-id="qs-masthead-help"
                 onSelect={this._onHelpDropdownSelect}
                 onToggle={this._onHelpDropdownToggle}
                 isOpen={isHelpDropdownOpen}
@@ -624,6 +630,7 @@ class MastheadToolbarContents_ extends React.Component {
                   onClick={drawerToggle}
                   isRead
                   count={notificationAlerts?.data?.length}
+                  data-quickstart-id="qs-masthead-notifications"
                 >
                   <BellIcon />
                 </NotificationBadge>

diff --git a/frontend/public/components/nav/admin-nav.tsx b/frontend/public/components/nav/admin-nav.tsx
@@ -68,7 +68,7 @@ const MonitoringNavSection_ = ({ canAccess }) => {
   const canAccessPrometheus = canAccess && !!window.SERVER_FLAGS.prometheusBaseURL;
   const showSilences = canAccess && !!window.SERVER_FLAGS.alertManagerBaseURL;
   return canAccessPrometheus || showSilences ? (
-    <NavSection id="monitoring" title={t('nav~Monitoring')}>
+    <NavSection id="monitoring" title={t('nav~Monitoring')} data-quickstart-id="qs-nav-monitoring">
       {canAccessPrometheus && (
         <HrefLink
           id="monitoringalerts"
@@ -106,7 +106,7 @@ const AdminNav = () => {
   const { t } = useTranslation();
   return (
     <>
-      <NavSection id="home" title={t('nav~Home')}>
+      <NavSection id="home" title={t('nav~Home')} data-quickstart-id="qs-nav-home">
         <HrefLink
           id="dashboards"
           href="/dashboards"
@@ -130,9 +130,9 @@ const AdminNav = () => {
         <ResourceNSLink id="events" resource="events" name={t('nav~Events')} />
       </NavSection>
 
-      <NavSection id="operators" title={t('nav~Operators')} />
+      <NavSection id="operators" title={t('nav~Operators')} data-quickstart-id="qs-nav-operators" />
 
-      <NavSection id="workloads" title={t('nav~Workloads')}>
+      <NavSection id="workloads" title={t('nav~Workloads')} data-quickstart-id="qs-nav-workloads">
         <ResourceNSLink id="pods" resource="pods" name={t('nav~Pods')} />
         <ResourceNSLink id="deployments" resource="deployments" name={t('nav~Deployments')} />
         <ResourceNSLink
@@ -163,9 +163,17 @@ const AdminNav = () => {
 
       {/* Temporary addition of Knative Serverless section until extensibility allows for section ordering
           and admin-nav gets contributed through extensions. */}
-      <NavSection id="serverless" title={t('nav~Serverless')} />
+      <NavSection
+        id="serverless"
+        title={t('nav~Serverless')}
+        data-quickstart-id="qs-nav-serverless"
+      />
 
-      <NavSection id="networking" title={t('nav~Networking')}>
+      <NavSection
+        id="networking"
+        title={t('nav~Networking')}
+        data-quickstart-id="qs-nav-networking"
+      >
         <ResourceNSLink id="services" resource="services" name={t('nav~Services')} />
         <ResourceNSLink
           id="routes"
@@ -181,7 +189,7 @@ const AdminNav = () => {
         />
       </NavSection>
 
-      <NavSection id="storage" title={t('nav~Storage')}>
+      <NavSection id="storage" title={t('nav~Storage')} data-quickstart-id="qs-nav-storage">
         <ResourceClusterLink
           id="networkpolicies"
           resource="persistentvolumes"
@@ -210,7 +218,12 @@ const AdminNav = () => {
         />
       </NavSection>
 
-      <NavSection id="builds" title={t('nav~Builds')} required={FLAGS.OPENSHIFT}>
+      <NavSection
+        id="builds"
+        title={t('nav~Builds')}
+        required={FLAGS.OPENSHIFT}
+        data-quickstart-id="qs-nav-builds"
+      >
         <ResourceNSLink id="buildconfigs" resource="buildconfigs" name={t('nav~Build Configs')} />
         <ResourceNSLink id="builds" resource="builds" name={t('nav~Builds')} />
         <ResourceNSLink
@@ -223,12 +236,13 @@ const AdminNav = () => {
 
       {/* Temporary addition of Tekton Pipelines section until extensibility allows for section ordering
           and admin-nav gets contributed through extensions. */}
-      <NavSection id="pipelines" title={t('nav~Pipelines')} />
+      <NavSection id="pipelines" title={t('nav~Pipelines')} data-quickstart-id="qs-nav-pipelines" />
 
       <NavSection
         id="servicecatalog"
         title={t('nav~Service Catalog')}
         required={FLAGS.SERVICE_CATALOG}
+        data-quickstart-id="qs-nav-servicecatalog"
       >
         <HrefLink
           id="provisionedservices"
@@ -248,7 +262,12 @@ const AdminNav = () => {
 
       <MonitoringNavSection />
 
-      <NavSection id="compute" title={t('nav~Compute')} required={FLAGS.CAN_LIST_NODE}>
+      <NavSection
+        id="compute"
+        title={t('nav~Compute')}
+        required={FLAGS.CAN_LIST_NODE}
+        data-quickstart-id="qs-nav-compute"
+      >
         <ResourceClusterLink id="nodes" resource="nodes" name={t('nav~Nodes')} />
         <HrefLink
           id="machines"
@@ -299,7 +318,11 @@ const AdminNav = () => {
         />
       </NavSection>
 
-      <NavSection id="usermanagement" title={t('nav~User Management')}>
+      <NavSection
+        id="usermanagement"
+        title={t('nav~User Management')}
+        data-quickstart-id="qs-nav-usermanagement"
+      >
         <ResourceClusterLink
           id="users"
           resource={referenceForModel(UserModel)}
@@ -331,7 +354,11 @@ const AdminNav = () => {
         />
       </NavSection>
 
-      <NavSection id="administration" title={t('nav~Administration')}>
+      <NavSection
+        id="administration"
+        title={t('nav~Administration')}
+        data-quickstart-id="qs-nav-administration"
+      >
         <HrefLink
           id="clustersettings"
           href="/settings/cluster"

diff --git a/frontend/public/components/nav/items.tsx b/frontend/public/components/nav/items.tsx
@@ -77,6 +77,7 @@ class NavLink<P extends NavLinkProps> extends React.PureComponent<P> {
       children,
       className,
       'data-tour-id': dataTourId,
+      'data-quickstart-id': dataQuickStartId,
     } = this.props;
 
     // onClick is now handled globally by the Nav's onSelect,
@@ -93,6 +94,7 @@ class NavLink<P extends NavLinkProps> extends React.PureComponent<P> {
           onClick={onClick}
           title={tipText}
           data-tour-id={dataTourId}
+          data-quickstart-id={dataQuickStartId}
           data-test="nav"
         >
           {name}
@@ -157,6 +159,7 @@ export type NavLinkProps = {
   tipText?: string;
   testID?: string;
   'data-tour-id'?: string;
+  'data-quickstart-id'?: string;
 };
 
 export type ResourceNSLinkProps = NavLinkProps & {

diff --git a/frontend/public/components/nav/nav-header.tsx b/frontend/public/components/nav/nav-header.tsx
@@ -81,7 +81,11 @@ const NavHeader_: React.FC<NavHeaderProps & StateProps> = ({ onPerspectiveSelect
   );
 
   return (
-    <div className="oc-nav-header" data-tour-id="tour-perspective-dropdown">
+    <div
+      className="oc-nav-header"
+      data-tour-id="tour-perspective-dropdown"
+      data-quickstart-id="qs-perspective-switcher"
+    >
       <Dropdown
         isOpen={isPerspectiveDropdownOpen}
         toggle={renderToggle(icon, name)}

diff --git a/frontend/public/components/nav/section.tsx b/frontend/public/components/nav/section.tsx
@@ -211,7 +211,7 @@ export const NavSection = connect(navSectionStateToProps)(
             return null;
           }
 
-          const { title, isGrouped } = this.props;
+          const { title, isGrouped, 'data-quickstart-id': dataQuickStartId } = this.props;
           const { isOpen, activeChild } = this.state;
           const isActive = !!activeChild;
           const children = this.getChildren();
@@ -222,7 +222,7 @@ export const NavSection = connect(navSectionStateToProps)(
 
           if (isGrouped) {
             return (
-              <NavGroup className="oc-nav-group" title="">
+              <NavGroup className="oc-nav-group" title="" data-quickstart-id={dataQuickStartId}>
                 {children}
               </NavGroup>
             );
@@ -235,6 +235,7 @@ export const NavSection = connect(navSectionStateToProps)(
               isExpanded={isOpen}
               onExpand={this.toggle}
               data-test="nav"
+              data-quickstart-id={dataQuickStartId}
             >
               {children}
             </NavExpandable>
@@ -276,6 +277,7 @@ type NavSectionProps = {
   isGrouped?: boolean;
   required?: string;
   activePerspective?: string;
+  'data-quickstart-id'?: string;
 };
 
 type Props = NavSectionProps & NavSectionStateProps & NavSectionExtensionProps;