Add the edit and create an issue icons back to global header but put search as the first icon: 9/2

[jpvajda]

The theory is, that we want to call out these contributor actions throughout the site experience and the best place to do that is in the header. So we should add those icons back to the global header in this order:

Search | Dark mode toggle | edit page | create issue

When making this change the OSS site should also be updated accordingly as it uses the global header.

[zstix]

Here is the code that David from split put together (sorry for the messy formatting, it didn't copy into GitHub very well):

import React from 'react';
import ReactGA from 'react-ga';
import { SplitFactory, SplitTreatments } from '@splitsoftware/splitio-react';

function uuidv4() {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
    var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
    return v.toString(16);
  });
}

const uuid = uuidv4();

class ImageComponent extends React.Component {
  tap() {
    console.log("dbm clicked!");
    ReactGA.event({
      category: "Lightbulb",
      action: "User clicked on lightbulb"
    });
  }

  render() {
    console.log(this.props.config);
    var configs = JSON.parse(this.props.config); 
    ReactGA.event({
      category: "Lightbulb",
      action: "User saw the lightbulb " + configs.alt
    });
    return <img width={configs.width} height={configs.height} src={configs.src} alt={configs.alt} onClick={this.tap}/>;
  }
}

class MyComponent extends React.Component {
  renderContent(treatmentWithConfig, props) {
    const { treatment, config } = treatmentWithConfig;
    return (<ImageComponent config={config} {...props} />);
  }

  render(props) {
    return (
      <SplitTreatments names={['new_onboarding_react']} >
        {({ treatments, isReady }) => { // Injects a TreatmentsWithConfig object and a boolean isReady flag.
          return isReady ?
            this.renderContent(treatments['new_onboarding_react'], props) : // Use the treatments and configs.
            <p>not ready</p>; // who has a Spinner?!!
        }}
      </SplitTreatments>
    );
  }
}

const sdkConfig = {
    core: {
        authorizationKey: "3m1763...",
        key: uuid,
        trafficType: "user"
    },
    scheduler: {
        featuresRefreshRate: 60
    },
    integrations: [{
      type: 'GOOGLE_ANALYTICS_TO_SPLIT'
    }],
    debug: false
};

class App extends React.Component {
	render() {
    const trackingId = "UA-1284...";
    ReactGA.initialize(trackingId, {
      gaOptions: {
        userId: uuid,
        siteSpeedSampleRate: 100
      }
    });
    ReactGA.plugin.require('splitTracker'); // uncomment and GA no longer sends events, no results in Split
    ReactGA.set({ page: "dbm_demo_page" });
    ReactGA.pageview("dbm_demo_page");

		return (
			<SplitFactory config={sdkConfig} updateOnSdkUpdate={true}>
	      <MyComponent />
	    </SplitFactory>
		);
	}
}

export default App;

[zstix]

Much of this work was already done during the proof-of-concept phase that David from split conducted. Due to this, I'm marking this as a 3 point story with the intention of this ticket representing the following work:

• Abstract the split / GA configuration to either a utility file or a component in the theme
• Configure our different treatments on split's dashboard
• Use the component (either split's our our abstraction ontop of it) to split test the header

[nr-opensource-bot]

🎉 This issue has been resolved in version 1.16.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀