Allow copying the whole file with replaced appName

Author: zoontek

src/components/common/CopyFileButton.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/Diff/DiffHeader.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from '@emotion/styled'
-import { Tag, Button, Popover } from 'antd'
+import { Tag, Button, Popover, Space } from 'antd'
 import {
   CheckOutlined,
   DownOutlined,
@@ -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/DownloadFileButton.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/Settings.js

@@ -3,7 +3,11 @@ import { Popover, Button, Checkbox, Input, Radio } 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'
+import {
+  DEFAULT_APP_NAME,
+  PACKAGE_NAMES,
+  LANGUAGE_NAMES,
+} from '../../constants'
 
 const InputContainer = styled.div({
   marginTop: '16px',
@@ -85,7 +89,7 @@ const Settings = ({
             <Input
               value={newAppName}
               onChange={({ target }) => setNewAppName(target.value)}
-              placeholder="MyAwesomeApp"
+              placeholder={DEFAULT_APP_NAME}
             />
           </InputContainer>
           <PlatformsContainer>

src/utils.js

@@ -33,20 +33,30 @@ export const getDiffURL = ({
   })}/diffs/diffs/${languageDir}${fromVersion}..${toVersion}.diff`
 }
 
+const getBranch = ({ packageName, language, version }) =>
+  packageName === PACKAGE_NAMES.RNM
+    ? `mac/${version}`
+    : packageName === PACKAGE_NAMES.RNW
+    ? `${language}/${version}`
+    : version
+
 // `path` must contain `RnDiffApp` prefix
 export const getBinaryFileURL = ({ packageName, language, version, path }) => {
-  const branch =
-    packageName === PACKAGE_NAMES.RNM
-      ? `mac/${version}`
-      : packageName === PACKAGE_NAMES.RNW
-      ? `${language}/${version}`
-      : version
+  const branch = getBranch({ packageName, language, version })
 
   return `https://github.com/${getRNDiffRepository({
     packageName,
   })}/raw/release/${branch}/${path}`
 }
 
+export const getFileApiURL = ({ packageName, language, version, path }) => {
+  const branch = getBranch({ packageName, language, version })
+
+  return `https://api.github.com/repos/${getRNDiffRepository({
+    packageName,
+  })}/contents/${path}?ref=${encodeURIComponent(`release/${branch}`)}`
+}
+
 export const removeAppPathPrefix = (path, appName) =>
   path.replace(new RegExp(`${appName || DEFAULT_APP_NAME}/`), '')