feat: IPFS experiments UI

[cwaring]

This PR adds new functionality to enable/disable IPFS experiments from the settings UI.

Experiments are controlled from an EXPERIMENTS constant in src/bundles/experiments.js. In order to add a new experiment simply create a new key to assign a namespace and then add the appropriate values. The key will also be used to select the correct language strings from the i18n files. Defaults in English have been added.

npm: { // namespace
  action: async (enabled) => null, // default async callback that is executed on toggle with an `enabled` bool that can be used for switching methods if needed
  enabled: false, // default experiment state
  actionUrls: [ // meta urls that are rendered along the bottom of each experiment
    {
      url: 'https://github.com/ipfs-shipyard/npm-on-ipfs', // url for the a tag
      key: 'readMoreUrl' // translation key
    },
    {
      url: 'https://github.com/ipfs-shipyard/npm-on-ipfs/issues',
      key: 'issueUrl'
    },
    {
      url: 'https://github.com/ipfs-shipyard/npm-on-ipfs',
      key: 'feedbackUrl'
    }
  ],
  desktop: false // bool set to true if you only want the experiment to show in IPFS Desktop
}

Preflight checklist:

• remove dummy data
• set desktop to true for npm
  - [ ] add notifications for activation and error
• add examples section description copy
• analytics for enable/disable
• tests?

fixes: #814
fixes: ipfs/ipfs-desktop#907

ref: ipfs/ipfs-desktop#911

[cwaring]

Notes: there are a couple of dummy experiments included and desktop: false is setup on npm so that it is easier to review/test in your browser. I will amend these once we have the action functionality mapped in and we are ready to merge!

[cwaring]

@hacdias I'm not sure how I should call out to enable npm-on-ipfs could you let me know when you have .a moment and I'll wire it up in the actions section. Thanks 🙌

[hacdias]

@hacdias I'm not sure how I should call out to enable npm-on-ipfs could you let me know when you have .a moment and I'll wire it up in the actions section. Thanks 🙌

Heeey! You can use doDesktopSettingsToggle('npmOnIpfs') to toggle the value. You can get the current value with selectDesktopSettings.npmOnIpfs. 😃 The feature is not yet merged on IPFS Desktop though.

[olizilla]

@cwaring I'll review today, but just wanted to say that this is looking really nice!

[cwaring]

yeah it's a tricky one. I mean if the user reloaded the app or browser window then they could activate again but that may not be immediately obvious. perhaps something to revisit later on.

what might be helpful in determining this is if we wire in analytics to monitor enable/disable and time it took to activate an experiment.

[hacdias]

I guess that would be a good idea, to add the analytics. Could you do that, please? If you don't have much time, I can take a look

[cwaring]

I'm a bit pushed for time as I need to jump back onto camp but I can take a look early next week if you don't get chance before then :)

[hacdias]

I'll do that today then hahaha. It'd be awesome to perhaps merge this today, or this week at most.

[hacdias]

@cwaring done on cbbf1c7. Could you take a look please?

[cwaring]

@cwaring done on cbbf1c7. Could you take a look please?

does this track which experiment is being enabled/disabled and the time it took to perform the operation? (Sorry on my 📱 ATM so tricky to check)

[hacdias]

@cwaring it should only track the time to perform the operation. I'm not sure how to include the experiment here though. I'm not really well aware of how the analytics work

[olizilla]

In it's current form, the analytics bundle will just record that an experiment was toggled, but not which one, as it only records the action type. We are deliberately extra cautious in the analytics bundle to be very explicit about what is tracked, so we can give the user a clear answer on what is and isn't tracked.

Either we create an action per experiement, or we add custom logic into the analytics bundle for the experiments action to modify the action name to include the experiment name, here https://github.com/ipfs-shipyard/ipfs-webui/blob/babbb6d2d2e742df50fd169d5c5066cc9e2fc546/src/bundles/analytics.js#L109-L113

[cwaring]

In it's current form, the analytics bundle will just record that an experiment was toggled, but not which one, as it only records the action type. We are deliberately extra cautious in the analytics bundle to be very explicit about what is tracked, so we can give the user a clear answer on what is and isn't tracked.

Either we create an action per experiement, or we add custom logic into the analytics bundle for the experiments action to modify the action name to include the experiment name, here

https://github.com/ipfs-shipyard/ipfs-webui/blob/babbb6d2d2e742df50fd169d5c5066cc9e2fc546/src/bundles/analytics.js#L109-L113

@olizilla great, we have a key in the action payload so it should be possible to pick that up here

[hacdias]

@cwaring I passed the experiment name on the key. 6b0932e should do the trick!

[daviddias]

The most important question of all (:D), will my little IPFS Cube in my nav bar become the npm on IPFS cube?

It would feel it gets equipped with a super power!

[hacdias]

@daviddias that's definitely an interesting idea. I just wonder how it'd scale - we only have three visible sides of the IPFS cube and we might introduce more experiments or even JS-IPFS support.

I've been wanting to make some changes to IPFS Desktop's icon so perhaps this is a good time to raise an issue there. Done: ipfs/ipfs-desktop#956.

[daviddias]

I just wonder how it'd scale - we only have three visible sides of the IPFS cube and we might introduce more experiments or even JS-IPFS support.

I recommend to not overthink it :) You can potentially pick one side to be the "underlying implementation being used" and another for "the last experiment active" and once you have multiple useful experiments, then consider how to represent it.

[hacdias]

@olizilla could you take one last look at this please?

[fsdiogo]

LGTM, nice work 👍