From 21856f9a183c618d8e6585753b0993b330839ac2 Mon Sep 17 00:00:00 2001
From: Stephan Brauer <ls42@users.noreply.github.com>
Date: Wed, 15 May 2019 17:41:58 +0200
Subject: [PATCH] Fix sed command in example. (#575)

* Fix sed command in example.

* Use platform_selector to present the user with the correct sed command.

Sorry, this is untested, I don't have the environment for React at
the moment. But maybe this already works as expected? I deliberately
left out the `Windows` tab since it would require the first page
as well (adding `sed` to the *scoop install/update* part).

* Use platform_selector to present the user with the correct sed command.

Sorry, this is untested, I don't have the environment for React at
the moment. But maybe this already works as expected? I deliberately
left out the **Windows** tab since it would require changing the first
page as well (adding `sed` to the *scoop install/update* part).

* Mention Windows 2_simple_example.js, formatting.

Also add my name to contributors \o/

* Adhere to writing style of Mac OS.

* Prettify.
---
 CONTRIBUTORS.md                               |  3 +
 .../getting-started/2_simple_example.js       | 62 ++++++++++++++++---
 2 files changed, 55 insertions(+), 10 deletions(-)

diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md
index 5eb4121e56..27c84a7603 100644
--- a/CONTRIBUTORS.md
+++ b/CONTRIBUTORS.md
@@ -1,6 +1,9 @@
 Contributors (sorted alphabetically) 
 ============================================
 
+- [Stephan Brauer](https://github.com/ls42)
+  - Discovered our sed command didn't work for linux users and contributed a thorough fix.
+
 - [Felix Oben](https://github.com/foben)
   - Updated our kubectl links to the latest version.
 
diff --git a/src/components/getting-started/2_simple_example.js b/src/components/getting-started/2_simple_example.js
index 612d82a690..52615d0d1f 100644
--- a/src/components/getting-started/2_simple_example.js
+++ b/src/components/getting-started/2_simple_example.js
@@ -5,12 +5,14 @@ import { CodeBlock, Output, Prompt } from './codeblock';
 import { connect } from 'react-redux';
 import { FlashMessage, messageTTL, messageType } from '../../lib/flash_message';
 import { Link } from 'react-router-dom';
+import platform from '../../lib/platform';
 import PropTypes from 'prop-types';
 import React from 'react';
 
 class SimpleExample extends React.Component {
   state = {
     loading: true,
+    selectedPlatform: platform,
     ingressBaseDomain: window.config.ingressBaseDomain,
   };
 
@@ -22,6 +24,24 @@ class SimpleExample extends React.Component {
     }
   }
 
+  selectPlatform(platform) {
+    this.setState({
+      selectedPlatform: platform,
+    });
+  }
+
+  selectedSedCommand() {
+    return (
+      `sed -i${this.state.selectedPlatform === 'Mac' ? ' ' : ''}` +
+      `"" "s/YOUR_CLUSTER_BASE_DOMAIN/${this.clusterBaseDomain()}/" ` +
+      `helloworld-manifest.yaml`
+    );
+  }
+
+  isSelectedPlatform(platform) {
+    return this.state.selectedPlatform === platform;
+  }
+
   componentDidMount() {
     if (!this.props.cluster) {
       new FlashMessage(
@@ -126,17 +146,39 @@ class SimpleExample extends React.Component {
           </CodeBlock>
 
           <p>
-            Next use <code>sed</code> to replace the placeholder{' '}
-            <code>YOUR_CLUSTER_BASE_DOMAIN</code> with{' '}
-            <code>{this.clusterBaseDomain()}</code>.
+            Next replace the placeholder <code>YOUR_CLUSTER_BASE_DOMAIN</code>{' '}
+            with <code>{this.clusterBaseDomain()}</code>.
           </p>
-          <CodeBlock>
-            <Prompt>
-              {`
-                  sed -i "" "s/YOUR_CLUSTER_BASE_DOMAIN/${this.clusterBaseDomain()}/" helloworld-manifest.yaml
-                `}
-            </Prompt>
-          </CodeBlock>
+
+          <p>
+            If you are on Linux or Mac OS you can use the command below to do
+            this. Windows users willl have to use their favorite text editor and
+            manually edit the <code>helloworld-manifest.yaml</code> file.
+          </p>
+
+          <div className='platform_selector'>
+            <ul className='platform_selector--tabs'>
+              <li
+                className={this.isSelectedPlatform('Linux') ? 'active' : null}
+                onClick={this.selectPlatform.bind(this, 'Linux')}
+              >
+                Linux
+              </li>
+
+              <li
+                className={this.isSelectedPlatform('Mac') ? 'active' : null}
+                onClick={this.selectPlatform.bind(this, 'Mac')}
+              >
+                Mac OS
+              </li>
+            </ul>
+
+            <div className='platform_selector--content'>
+              <CodeBlock>
+                <Prompt>{this.selectedSedCommand()}</Prompt>
+              </CodeBlock>
+            </div>
+          </div>
 
           <p>Finally apply the manifest to your cluster:</p>
           <CodeBlock>