Merge pull request #355 from zoontek/better-app-name-ux

Author: pvinis

src/components/common/AppNameWarning.js

@@ -0,0 +1,49 @@
+import React, { useState } from 'react'
+import styled from '@emotion/styled'
+import { Button, Popover } from 'antd'
+import { getFileApiURL, replaceWithProvidedAppName } from '../../utils'
+import { CopyOutlined } from '@ant-design/icons'
+import copy from 'copy-to-clipboard'
+
+const popoverContentOpts = {
+  default: 'Copy raw contents',
+  copied: 'Copied!',
+}
+
+const CopyFileButton = styled(
+  ({ open, version, path, packageName, appName, ...props }) => {
+    const [popoverContent, setPopoverContent] = useState(
+      popoverContentOpts.default
+    )
+
+    if (!open) {
+      return null
+    }
+
+    return (
+      <Popover content={popoverContent} trigger="hover">
+        <Button
+          {...props}
+          type="ghost"
+          icon={<CopyOutlined />}
+          onBlur={() => {
+            setPopoverContent(popoverContentOpts.default)
+          }}
+          onClick={() => {
+            fetch(getFileApiURL({ packageName, version, path }))
+              .then((response) => response.json())
+              .then((json) => window.atob(json.content))
+              .then((content) => replaceWithProvidedAppName(content, appName))
+              .then((content) => copy(content))
+              .then(() => setPopoverContent(popoverContentOpts.copied))
+          }}
+        />
+      </Popover>
+    )
+  }
+)`
+  font-size: 13px;
+  margin-left: 5px;
+`
+
+export default CopyFileButton

src/components/common/CopyFileButton.js

@@ -14,6 +14,7 @@ import { CopyToClipboard } from 'react-copy-to-clipboard'
 import DiffCommentReminder from './DiffCommentReminder'
 import DownloadFileButton from '../DownloadFileButton'
 import ViewFileButton from '../ViewFileButton'
+import CopyFileButton from '../CopyFileButton'
 
 export const testIDs = {
   collapseClickableArea: 'collapseClickableArea',
@@ -98,12 +99,6 @@ const BinaryBadge = ({ open, ...props }) =>
 
 const defaultIconButtonStyle = `
   font-size: 13px;
-  line-height: 0;
-  border-width: 0px;
-  width: 22px;
-  height: 22px;
-  margin: 5px 0;
-  border-radius: 50%;
 `
 
 const CompleteDiffButton = styled(({ open, onClick, ...props }) =>
@@ -307,6 +302,13 @@ const DiffHeader = ({
           path={newPath}
           packageName={packageName}
         />
+        <CopyFileButton
+          open={hasDiff && type !== 'delete'}
+          version={toVersion}
+          path={newPath}
+          packageName={packageName}
+          appName={appName}
+        />
         <DownloadFileButton
           open={!hasDiff && type !== 'delete'}
           version={toVersion}

src/components/common/Diff/DiffHeader.js

@@ -1,30 +1,19 @@
 import React from 'react'
-import styled from '@emotion/styled'
 import { Button } from 'antd'
 import { DownloadOutlined } from '@ant-design/icons'
 import { getBinaryFileURL } from '../../utils'
 
-const DownloadFileButton = styled(
-  ({ open, version, path, packageName, ...props }) => {
-    return open ? (
-      <Button
-        {...props}
-        type="ghost"
-        shape="circle"
-        icon={<DownloadOutlined />}
-        target="_blank"
-        href={getBinaryFileURL({ packageName, version, path })}
-      />
-    ) : null
-  }
-)`
-  color: #24292e;
-  font-size: 12px;
-  border-width: 0;
-  &:hover,
-  &:focus {
-    color: #24292e;
-  }
-`
+const DownloadFileButton = ({ open, version, path, packageName, ...props }) => {
+  return open ? (
+    <Button
+      {...props}
+      type="ghost"
+      shape="circle"
+      icon={<DownloadOutlined />}
+      target="_blank"
+      href={getBinaryFileURL({ packageName, version, path })}
+    />
+  ) : null
+}
 
 export default DownloadFileButton

src/components/common/DownloadFileButton.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from '@emotion/styled'
-import { Select as AntdSelect } from 'antd'
+import { Select as AntdSelect, Typography } from 'antd'
 
 const { Option } = AntdSelect
 
@@ -13,7 +13,7 @@ const SelectBox = styled(AntdSelect)`
 
 const Select = ({ title, options, ...props }) => (
   <SelectBoxContainer>
-    <h4>{title}</h4>
+    <Typography.Title level={5}>{title}</Typography.Title>
 
     <SelectBox size="large" {...props}>
       {options.map((option) => (

src/components/common/Select.js

@@ -1,14 +1,10 @@
 import React, { useState } from 'react'
-import { Popover, Button, Checkbox, Input, Radio } from 'antd'
+import { Popover, Button, Checkbox, Radio, Typography } from 'antd'
 import { SHOW_LATEST_RCS } from '../../utils'
 import styled from '@emotion/styled'
 import { WindowsFilled } from '@ant-design/icons'
 import { PACKAGE_NAMES, LANGUAGE_NAMES } from '../../constants'
 
-const InputContainer = styled.div({
-  marginTop: '16px',
-})
-
 const SettingsButton = styled(Button)`
   color: initial;
 `
@@ -35,21 +31,14 @@ const Settings = ({
   packageName,
   language,
   onChangePackageNameAndLanguage,
-  appName,
-  onChangeAppName,
 }) => {
   const [popoverVisibility, setVisibility] = useState(false)
-  const [newAppName, setNewAppName] = useState(appName)
   const [newPackageName, setNewPackageName] = useState(packageName)
   const [newLanguage, setNewLanguage] = useState(language)
 
   const handleClickChange = (visibility) => {
     setVisibility(visibility)
 
-    if (newAppName !== appName) {
-      onChangeAppName(newAppName)
-    }
-
     const processedNewLanguage =
       newLanguage !== language && newPackageName === PACKAGE_NAMES.RNW
         ? newLanguage
@@ -80,14 +69,6 @@ const Settings = ({
               <Checkbox value={SHOW_LATEST_RCS}>{SHOW_LATEST_RCS}</Checkbox>
             </div>
           </Checkbox.Group>
-          <InputContainer>
-            <h4>What's your app name?</h4>
-            <Input
-              value={newAppName}
-              onChange={({ target }) => setNewAppName(target.value)}
-              placeholder="MyAwesomeApp"
-            />
-          </InputContainer>
           <PlatformsContainer>
             <h5>Upgrading another platform?</h5>
             <Radio.Group
@@ -109,10 +90,10 @@ const Settings = ({
                       setNewLanguage(e.target.value)
                     }}
                   >
-                    <span style={{ marginRight: 10 }}>
+                    <Typography.Text style={{ marginRight: 10 }}>
                       react-native-windows
                       <WindowsFilled style={{ margin: 5 }} />
-                    </span>
+                    </Typography.Text>
                     <Radio.Button value="cpp">C++</Radio.Button>
                     <Radio.Button value="cs">C#</Radio.Button>
                   </Radio.Group>

src/components/common/Settings.js

@@ -11,7 +11,7 @@ const Container = styled.div`
   justify-content: center;
   height: auto;
   overflow: hidden;
-  margin-top: 25px;
+  margin-top: 28px;
 `
 
 const Button = styled(AntdButton)`

src/components/common/UpgradeButton.js

@@ -10,7 +10,6 @@ import {
   getTransitionDuration,
 } from '../../utils'
 import UpgradeSupportAlert from './UpgradeSupportAlert'
-import AppNameWarning from './AppNameWarning'
 import UsefulLinks from './UsefulLinks'
 import AlignDepsAlert from './AlignDepsAlert'
 
@@ -217,10 +216,6 @@ class UsefulContentSection extends Component {
             <Separator />
 
             <UpgradeSupportAlert />
-
-            <Separator />
-
-            <AppNameWarning />
           </ContentContainer>
         </InnerContainer>
       </Container>

src/components/common/UsefulContentSection.js

@@ -12,11 +12,11 @@ const ViewFileButton = styled(
     return (
       <Button
         {...props}
-        type="link"
         target="_blank"
+        size="small"
         href={getBinaryFileURL({ packageName, version, path })}
       >
-        View file
+        Raw
       </Button>
     )
   }

src/components/common/ViewFileButton.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import styled from '@emotion/styled'
-import { Card } from 'antd'
+import { Card, Input, Typography } from 'antd'
 import GitHubButton from 'react-github-btn'
 import ReactGA from 'react-ga'
 import VersionSelector from '../common/VersionSelector'
@@ -10,7 +10,7 @@ import logo from '../../assets/logo.svg'
 import { SHOW_LATEST_RCS } from '../../utils'
 import { useGetLanguageFromURL } from '../../hooks/get-language-from-url'
 import { useGetPackageNameFromURL } from '../../hooks/get-package-name-from-url'
-import { PACKAGE_NAMES } from '../../constants'
+import { DEFAULT_APP_NAME, PACKAGE_NAMES } from '../../constants'
 import { TroubleshootingGuidesButton } from '../common/TroubleshootingGuidesButton'
 import { updateURL } from '../../utils/update-url'
 import { deviceSizes } from '../../utils/device-sizes'
@@ -90,7 +90,11 @@ const Home = () => {
   const [settings, setSettings] = useState({
     [`${SHOW_LATEST_RCS}`]: false,
   })
-  const [appName, setAppName] = useState('')
+
+  const [appName, setAppName] = useState({
+    input: '',
+    diff: DEFAULT_APP_NAME,
+  })
 
   const homepageUrl = process.env.PUBLIC_URL
 
@@ -106,6 +110,11 @@ const Home = () => {
       return
     }
 
+    setAppName(({ input }) => ({
+      input: '',
+      diff: input || DEFAULT_APP_NAME,
+    }))
+
     setFromVersion(fromVersion)
     setToVersion(toVersion)
     setShouldShowDiff(true)
@@ -172,17 +181,26 @@ const Home = () => {
             )}
             <Settings
               handleSettingsChange={handleSettingsChange}
-              appName={appName}
               packageName={packageName}
               onChangePackageNameAndLanguage={
                 handlePackageNameAndLanguageChange
               }
               language={language}
-              onChangeAppName={setAppName}
             />
           </SettingsContainer>
         </HeaderContainer>
 
+        <Typography.Title level={5}>What's your app name?</Typography.Title>
+
+        <Input
+          size="large"
+          placeholder={DEFAULT_APP_NAME}
+          value={appName.input}
+          onChange={({ target }) =>
+            setAppName(({ diff }) => ({ input: target.value, diff }))
+          }
+        />
+
         <VersionSelector
           key={packageName}
           showDiff={handleShowDiff}
@@ -196,7 +214,7 @@ const Home = () => {
         shouldShowDiff={shouldShowDiff}
         fromVersion={fromVersion}
         toVersion={toVersion}
-        appName={appName}
+        appName={appName.diff}
         packageName={packageName}
         language={language}
       />