From 2b6dec95ded2cfeb2871de9e3117506a1aaf7fad Mon Sep 17 00:00:00 2001 From: Drake Costa Date: Tue, 21 May 2019 18:34:24 -0700 Subject: [PATCH 01/20] =?UTF-8?q?=F0=9F=94=A8=20Refactor=20Deployment=20Wo?= =?UTF-8?q?rkspace=20to=20use=20hooks?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pages/Sandbox/Editor/Workspace/index.tsx | 2 +- .../Deployment/{index.tsx => Deployment.tsx} | 36 +-- .../Workspace/items/Deployment/Elements.js | 129 ----------- .../Workspace/items/Deployment/Netlify.js | 206 ------------------ .../Workspace/items/Deployment/Netlify.tsx | 200 +++++++++++++++++ .../Editor/Workspace/items/Deployment/Zeit.js | 144 ------------ .../Workspace/items/Deployment/Zeit.tsx | 144 ++++++++++++ .../Workspace/items/Deployment/elements.ts | 133 +++++++++++ .../Workspace/items/Deployment/index.ts | 1 + 9 files changed, 500 insertions(+), 495 deletions(-) rename packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/{index.tsx => Deployment.tsx} (63%) delete mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Elements.js delete mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify.js create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify.tsx delete mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit.js create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit.tsx create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/elements.ts create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/index.ts diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/index.tsx index a9ffa87f0ba..45898ffff92 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/index.tsx +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/index.tsx @@ -11,7 +11,7 @@ import { GitHub } from './items/GitHub'; import Server from './items/Server'; import Live from './items/Live'; import { More } from './items/More'; -import Deployment from './items/Deployment'; +import { Deployment } from './items/Deployment'; import ConfigurationFiles from './items/ConfigurationFiles'; import { NotOwnedSandboxInfo } from './items/NotOwnedSandboxInfo'; import { ProjectInfo } from './items/ProjectInfo'; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Deployment.tsx similarity index 63% rename from packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/index.tsx rename to packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Deployment.tsx index 86b8b20a43b..41d6c892b15 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/index.tsx +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Deployment.tsx @@ -1,27 +1,33 @@ -import React, { useEffect } from 'react'; import { observer } from 'mobx-react-lite'; +import React, { useEffect } from 'react'; import { useStore, useSignals } from 'app/store'; + import { Description } from '../../elements'; -import ZeitDeployments from './Zeit'; -import NetlifyDeployments from './Netlify'; + import { More } from '../More'; -const Deployment = observer(() => { - const store = useStore(); - const signals = useSignals(); +import { Netlify } from './Netlify'; +import { Zeit } from './Zeit'; - const showPlaceholder = - !store.editor.currentSandbox.owned || !store.isLoggedIn; +export const Deployment = observer(() => { + const { + editor: { currentSandbox }, + isLoggedIn, + } = useStore(); + const { + deployment: { getDeploys }, + } = useSignals(); + const showPlaceholder = !(currentSandbox.owned && isLoggedIn); useEffect(() => { if (!showPlaceholder) { - signals.deployment.getDeploys(); + getDeploys(); } - }, [showPlaceholder, signals]); + }, [getDeploys, showPlaceholder]); if (showPlaceholder) { - const message = store.isLoggedIn ? ( + const message = isLoggedIn ? ( <> You need to own this sandbox to deploy this sandbox to Netlify or ZEIT.{' '}

Fork this sandbox to make a deploy!

@@ -39,10 +45,10 @@ const Deployment = observer(() => { You can deploy a production version of your sandbox using one our supported providers. - - + + + + ); }); - -export default Deployment; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Elements.js b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Elements.js deleted file mode 100644 index c73e8a26046..00000000000 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Elements.js +++ /dev/null @@ -1,129 +0,0 @@ -import styled, { css } from 'styled-components'; - -const mapColorToState = (state, theme) => { - const STARTING = ['DEPLOYING', 'BUILDING', 'INITIALIZING']; - const ERROR = ['DEPLOYMENT_ERROR', 'BUILD_ERROR', 'ERROR']; - const STARTED = ['BOOTED', 'READY']; - - if (STARTING.includes(state)) return '#fccb7e'; - if (ERROR.includes(state)) return theme.red; - if (STARTED.includes(state)) return theme.green; - if (state === 'FROZEN') return theme.blue; - - return theme.gray; -}; - -export const State = styled.span` - align-items: center; - display: flex; - text-transform: capitalize; - margin-bottom: 0.5rem; - - &:before { - content: ''; - display: block; - width: 10px; - height: 10px; - border-radius: 50%; - margin-right: 0.5rem; - background: ${props => mapColorToState(props.state, props.theme)}; - } -`; - -export const Deploys = styled.ul` - list-style: none; - padding: 0; - margin-top: 1rem; - flex-direction: column; - font-size: 0.875rem; - margin: 0 0.25rem; -`; - -export const Deploy = styled.li` - display: flex; - margin-bottom: 1.5rem; - flex-direction: column; -`; - -export const Name = styled.span` - font-weight: 600; - color: ${props => - props.theme.light || props.light - ? 'rgba(0, 0, 0, 0.8)' - : 'rgba(255, 255, 255, 0.8)'}; - font-size: 1rem; - margin-top: 0; - vertical-align: middle; - - span { - color: ${props => - props.theme.light || props.light - ? props.theme.background3.darken(0.5) - : props.theme.background3.lighten(0.5)}; - font-size: 12px; - margin-left: 0.5rem; - } -`; - -export const Link = styled.a` - padding: 0.25rem 0.4rem; - background-color: ${props => props.theme.secondary}; - text-decoration: none; - border: none; - font-size: 0.75rem; - color: white; - border-radius: 2px; - font-weight: 600; - margin-top: 0.75rem; - display: flex; - align-items: center; - flex-grow: 0; - max-width: 50%; - - svg { - margin-right: 10px; - } - - ${props => - props.disabled && - css` - background: ${props.theme.gray}; - pointer-events: none; - `}; - - &:disabled { - background: ${props => props.theme.gray}; - } -`; - -export const Action = Link.withComponent('button'); - -export const ButtonContainer = styled.section` - display: flex; - > *:not(:last-child) { - margin-right: 0.5rem; - } -`; - -export const DeploysWrapper = styled.div` - background: rgb(0, 0, 0); - border-radius: 4px; - font-size: 0.875rem; - color: rgba(255, 255, 255, 0.8); - padding: 0.75rem 1rem; - padding: 0.75rem 0rem; - border-top-right-radius: 0; - border-top-left-radius: 0; - margin: 0.5rem 0.75rem; - margin-top: 0; -`; - -export const Wrapper = styled.div` - opacity: 1; - ${props => - props.loading && - css` - opacity: 0.5; - pointer-events: none; - `}; -`; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify.js b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify.js deleted file mode 100644 index 2f9719c8b5a..00000000000 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify.js +++ /dev/null @@ -1,206 +0,0 @@ -import React, { Component } from 'react'; -import { inject, observer } from 'mobx-react'; - -import LinkIcon from 'react-icons/lib/fa/external-link'; -import Cogs from 'react-icons/lib/fa/cogs'; -import LightningIcon from 'react-icons/lib/md/flash-on'; -import NetlifyLogo from 'app/components/NetlifyLogo'; -import DeploymentIntegration from 'app/components/DeploymentIntegration'; -import getTemplate from '@codesandbox/common/lib/templates'; -import { Button } from '@codesandbox/common/lib/components/Button'; -import { resolveDirectory } from '@codesandbox/common/lib/sandbox/modules'; -import getNetlifyConfig from 'app/utils/getNetlifyConfig'; -import { WorkspaceInputContainer, WorkspaceSubtitle } from '../../elements'; -import { - Deploys, - Deploy, - Name, - Link, - DeploysWrapper, - Wrapper, - ButtonContainer, -} from './Elements'; - -const getFunctionDir = sandbox => { - try { - return resolveDirectory( - getNetlifyConfig(sandbox).functions, - sandbox.modules, - sandbox.directories - ); - } catch (e) { - return []; - } -}; - -class NetlifyDeployment extends Component { - state = { show: false }; - - toggleNetlify = () => - this.setState(state => ({ - show: !state.show, - })); - - componentDidMount() { - this.props.signals.deployment.getNetlifyDeploys(); - } - - render() { - const { - store: { deployment, editor }, - signals, - } = this.props; - - const template = getTemplate(editor.currentSandbox.template); - const { show } = this.state; - const functionDirectory = getFunctionDir(editor.currentSandbox); - - const functions = editor.currentSandbox.modules.filter( - m => m.directoryShortid === functionDirectory.shortid - ); - return ( - template.netlify !== false && ( - - - this.toggleNetlify()} - color="#fff" - light - Icon={NetlifyLogo} - name="netlify" - beta - deploy={() => signals.deployment.deployWithNetlify()} - > - Deploy your sandbox site on{' '} - - Netlify - - - - {deployment.netlifySite && show ? ( - - Sandbox Site - - - - {deployment.netlifySite.name} - {!deployment.building &&
Building
} - {functions.length ? ( - <> - - Functions - -
- {functions.map(file => ( - - - {file.title.split('.js')[0]} - - ))} -
- - ) : null} - - - Actions - - - - {deployment.building ? ( - <> - Building... - - ) : ( - <> - Visit - - )} - - - {deployment.netlifyClaimUrl ? ( - - Claim Site - - ) : null} - - {deployment.netlifyLogs ? ( - - ) : null} - - - - - ) : null} - - ) - ); - } -} -export default inject('signals', 'store')(observer(NetlifyDeployment)); diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify.tsx new file mode 100644 index 00000000000..bb980e3f052 --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify.tsx @@ -0,0 +1,200 @@ +import { Button } from '@codesandbox/common/lib/components/Button'; +import { resolveDirectory } from '@codesandbox/common/lib/sandbox/modules'; +import getTemplate from '@codesandbox/common/lib/templates'; +import { observer } from 'mobx-react-lite'; +import React, { useEffect, useState } from 'react'; +import LinkIcon from 'react-icons/lib/fa/external-link'; +import Cogs from 'react-icons/lib/fa/cogs'; +import LightningIcon from 'react-icons/lib/md/flash-on'; + +import DeploymentIntegration from 'app/components/DeploymentIntegration'; +import NetlifyLogo from 'app/components/NetlifyLogo'; +import { useSignals, useStore } from 'app/store'; +import getNetlifyConfig from 'app/utils/getNetlifyConfig'; + +import { WorkspaceInputContainer, WorkspaceSubtitle } from '../../elements'; + +import { + Deploys, + Deploy, + Name, + Link, + DeploysWrapper, + Wrapper, + ButtonContainer, +} from './elements'; + +const getFunctionDir = sandbox => { + try { + return resolveDirectory( + getNetlifyConfig(sandbox).functions, + sandbox.modules, + sandbox.directories + ); + } catch (e) { + return []; + } +}; + +export const Netlify = observer(() => { + const { + deployment: { getNetlifyDeploys, deployWithNetlify }, + modalOpened, + } = useSignals(); + const { deployment, editor } = useStore(); + + const [isVisible, setVisibility] = useState(false); + + useEffect(() => getNetlifyDeploys(), []); // eslint-disable-line + + const template = getTemplate(editor.currentSandbox.template); + const functionDirectory = getFunctionDir(editor.currentSandbox); + + const functions = editor.currentSandbox.modules.filter( + m => m.directoryShortid === functionDirectory.shortid + ); + + return ( + template.netlify !== false && ( + + + deployWithNetlify()} + Icon={NetlifyLogo} + light + loading={deployment.deploying || deployment.building} + name="netlify" + open={isVisible} + toggle={() => setVisibility(!isVisible)} + > + Deploy your sandbox site on{' '} + + Netlify + + + + + {deployment.netlifySite && isVisible ? ( + + Sandbox Site + + + + + {deployment.netlifySite.name} + + {!deployment.building &&
Building
} + + {functions.length ? ( + <> + + Functions + + +
+ {functions.map(file => ( + + + + {file.title.split('.js')[0]} + + ))} +
+ + ) : null} + + + Actions + + + + + {deployment.building ? ( + <> + Building... + + ) : ( + <> + Visit + + )} + + + {deployment.netlifyClaimUrl ? ( + + Claim Site + + ) : null} + + + {deployment.netlifyLogs ? ( + + ) : null} + + + + + ) : null} + + ) + ); +}); diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit.js b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit.js deleted file mode 100644 index 5b7f6f14328..00000000000 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit.js +++ /dev/null @@ -1,144 +0,0 @@ -import React, { Fragment, Component } from 'react'; -import { inject, observer } from 'mobx-react'; -import TrashIcon from 'react-icons/lib/fa/trash'; -import LinkIcon from 'react-icons/lib/fa/external-link'; -import distanceInWordsToNow from 'date-fns/distance_in_words_to_now'; -import NowLogo from 'app/components/NowLogo'; -import DeploymentIntegration from 'app/components/DeploymentIntegration'; -import ZeitIntegration from '../../../../../common/ZeitIntegration'; -import { WorkspaceInputContainer, WorkspaceSubtitle } from '../../elements'; -import { - Deploys, - Wrapper, - Deploy, - State, - Name, - Link, - Action, - ButtonContainer, - DeploysWrapper, -} from './Elements'; - -class ZeitDeployment extends Component { - state = { show: false }; - - toggleZeit = () => - this.setState(state => ({ - show: !state.show, - })); - - render() { - const { - signals, - store: { user, deployment }, - } = this.props; - - const { show } = this.state; - return user.integrations.zeit ? ( - - - this.toggleZeit()} - color="#000000" - Icon={NowLogo} - name="Now" - deploy={() => signals.deployment.deploySandboxClicked()} - > - Deploy your sandbox on{' '} - - ZEIT Now - - - - {deployment.sandboxDeploys.length && show ? ( - - Sandbox Deploys - - - {deployment.sandboxDeploys.map(deploy => ( - - - {deploy.name} - ({distanceInWordsToNow(deploy.created)} ago) - - - {deploy.state.toLowerCase()} - - {deploy.alias.length ? ( - - Aliased to{' '} - {deploy.alias.map(a => ( - - {a.alias} - - ))} - - ) : null} - - - Visit - - { - signals.deployment.setDeploymentToDelete({ - id: deploy.uid, - }); - signals.modalOpened({ - modal: 'deleteDeployment', - }); - }} - > - {deployment[`${deploy.uid}Deleting`] ? ( - 'Deleting' - ) : ( - - Delete - - )} - - {deployment.hasAlias && deploy.state === 'READY' ? ( - { - signals.deployment.aliasDeployment({ - id: deploy.uid, - }); - }} - > - {deploy.alias.length ? 'Aliased' : 'Alias'} - - ) : null} - - - ))} - - - - ) : null} - - ) : ( -
- -
- ); - } -} -export default inject('signals', 'store')(observer(ZeitDeployment)); diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit.tsx new file mode 100644 index 00000000000..00b8ee488dc --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit.tsx @@ -0,0 +1,144 @@ +import distanceInWordsToNow from 'date-fns/distance_in_words_to_now'; +import { observer } from 'mobx-react-lite'; +import React, { useState } from 'react'; +import LinkIcon from 'react-icons/lib/fa/external-link'; +import TrashIcon from 'react-icons/lib/fa/trash'; + +import ZeitIntegration from 'app/pages/common/ZeitIntegration'; +import DeploymentIntegration from 'app/components/DeploymentIntegration'; +import NowLogo from 'app/components/NowLogo'; +import { useSignals, useStore } from 'app/store'; + +import { WorkspaceInputContainer, WorkspaceSubtitle } from '../../elements'; + +import { + Action, + ButtonContainer, + Deploy, + Deploys, + DeploysWrapper, + Link, + Name, + State, + Wrapper, +} from './elements'; + +export const Zeit = observer(() => { + const { + deployment: { + aliasDeployment, + deploySandboxClicked, + setDeploymentToDelete, + }, + modalOpened, + } = useSignals(); + const { deployment, user } = useStore(); + + const [isVisible, setVisibility] = useState(false); + + return user.integrations.zeit ? ( + + + deploySandboxClicked()} + Icon={NowLogo} + name="Now" + open={isVisible} + toggle={() => setVisibility(!isVisible)} + > + Deploy your sandbox on{' '} + + ZEIT Now + + + + + {deployment.sandboxDeploys.length && isVisible ? ( + + Sandbox Deploys + + + + {deployment.sandboxDeploys.map(deploy => ( + + + {deploy.name} + + ({distanceInWordsToNow(deploy.created)} ago) + + + + {deploy.state.toLowerCase()} + + + {deploy.alias.length ? ( + + Aliased to{' '} + {deploy.alias.map(a => ( + + {a.alias} + + ))} + + ) : null} + + + + Visit + + + { + setDeploymentToDelete({ id: deploy.uid }); + modalOpened({ modal: 'deleteDeployment' }); + }} + > + {deployment[`${deploy.uid}Deleting`] ? ( + 'Deleting' + ) : ( + <> + Delete + + )} + + + {deployment.hasAlias && deploy.state === 'READY' ? ( + aliasDeployment({ id: deploy.uid })} + > + {deploy.alias.length ? 'Aliased' : 'Alias'} + + ) : null} + + + ))} + + + + ) : null} + + ) : ( +
+ +
+ ); +}); diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/elements.ts new file mode 100644 index 00000000000..0ea8e6a0af7 --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/elements.ts @@ -0,0 +1,133 @@ +import styled, { css } from 'styled-components'; + +const mapColorToState = (state: string, theme: any) => { + const STARTING = ['DEPLOYING', 'BUILDING', 'INITIALIZING']; + const ERROR = ['DEPLOYMENT_ERROR', 'BUILD_ERROR', 'ERROR']; + const STARTED = ['BOOTED', 'READY']; + + if (STARTING.includes(state)) return '#fccb7e'; + if (ERROR.includes(state)) return theme.red; + if (STARTED.includes(state)) return theme.green; + if (state === 'FROZEN') return theme.blue; + + return theme.gray; +}; + +export const State = styled.span` + ${({ state, theme }: { state: string; theme: any }) => css` + align-items: center; + display: flex; + text-transform: capitalize; + margin-bottom: 0.5rem; + + &:before { + content: ''; + display: block; + width: 10px; + height: 10px; + border-radius: 50%; + margin-right: 0.5rem; + background: ${mapColorToState(state, theme)}; + } + `} +`; + +export const Deploys = styled.ul` + list-style: none; + padding: 0; + margin-top: 1rem; + flex-direction: column; + font-size: 0.875rem; + margin: 0 0.25rem; +`; + +export const Deploy = styled.li` + display: flex; + margin-bottom: 1.5rem; + flex-direction: column; +`; + +export const Name = styled.span` + ${({ light, theme }: { light: boolean; theme: any }) => css` + font-weight: 600; + color: ${theme.light || light + ? css`rgba(0, 0, 0, 0.8)` + : css`rgba(255, 255, 255, 0.8)`}; + font-size: 1rem; + margin-top: 0; + vertical-align: middle; + + span { + color: ${theme.light || light + ? theme.background3.darken(0.5) + : theme.background3.lighten(0.5)}; + font-size: 12px; + margin-left: 0.5rem; + } + `} +`; + +export const Link = styled.a` + ${({ disabled, theme }: { disabled: boolean; theme: any }) => css` + padding: 0.25rem 0.4rem; + background-color: ${theme.secondary}; + text-decoration: none; + border: none; + font-size: 0.75rem; + color: white; + border-radius: 2px; + font-weight: 600; + margin-top: 0.75rem; + display: flex; + align-items: center; + flex-grow: 0; + max-width: 50%; + + svg { + margin-right: 10px; + } + + ${disabled && + css` + background: ${theme.gray}; + pointer-events: none; + `}; + + &:disabled { + background: ${theme.gray}; + } + `} +`; + +export const Action = Link.withComponent('button'); + +export const ButtonContainer = styled.section` + display: flex; + > *:not(:last-child) { + margin-right: 0.5rem; + } +`; + +export const DeploysWrapper = styled.div` + background: rgb(0, 0, 0); + border-radius: 4px; + font-size: 0.875rem; + color: rgba(255, 255, 255, 0.8); + padding: 0.75rem 1rem; + padding: 0.75rem 0rem; + border-top-right-radius: 0; + border-top-left-radius: 0; + margin: 0.5rem 0.75rem; + margin-top: 0; +`; + +export const Wrapper = styled.div` + ${({ loading }: { loading: boolean }) => css` + opacity: 1; + ${loading && + css` + opacity: 0.5; + pointer-events: none; + `}; + `} +`; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/index.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/index.ts new file mode 100644 index 00000000000..74dc9ac5cad --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/index.ts @@ -0,0 +1 @@ +export { Deployment } from './Deployment'; From 2113591a9c1ca1045c6d024ad32913ea65f3a744 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Tue, 28 May 2019 10:43:03 +0200 Subject: [PATCH 02/20] Resolve discussions --- .../Workspace/items/Deployment/Netlify.tsx | 6 +++-- .../Workspace/items/Deployment/Zeit.tsx | 6 +++-- .../Workspace/items/Deployment/elements.ts | 24 ++++++++++++------- 3 files changed, 24 insertions(+), 12 deletions(-) diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify.tsx index bb980e3f052..47f71679654 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify.tsx +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify.tsx @@ -45,7 +45,9 @@ export const Netlify = observer(() => { const [isVisible, setVisibility] = useState(false); - useEffect(() => getNetlifyDeploys(), []); // eslint-disable-line + useEffect(() => { + getNetlifyDeploys(); + }, [getNetlifyDeploys]); const template = getTemplate(editor.currentSandbox.template); const functionDirectory = getFunctionDir(editor.currentSandbox); @@ -61,7 +63,7 @@ export const Netlify = observer(() => { deployWithNetlify()} + deploy={deployWithNetlify} Icon={NetlifyLogo} light loading={deployment.deploying || deployment.building} diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit.tsx index 00b8ee488dc..0109d68b2bd 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit.tsx +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit.tsx @@ -41,7 +41,7 @@ export const Zeit = observer(() => { deploySandboxClicked()} + deploy={deploySandboxClicked} Icon={NowLogo} name="Now" open={isVisible} @@ -73,7 +73,9 @@ export const Zeit = observer(() => { {deploy.name} - ({distanceInWordsToNow(deploy.created)} ago) + {`(${distanceInWordsToNow( + deploy.created + )} ago)`} diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/elements.ts index 0ea8e6a0af7..3f34206e7bd 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/elements.ts +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/elements.ts @@ -5,10 +5,18 @@ const mapColorToState = (state: string, theme: any) => { const ERROR = ['DEPLOYMENT_ERROR', 'BUILD_ERROR', 'ERROR']; const STARTED = ['BOOTED', 'READY']; - if (STARTING.includes(state)) return '#fccb7e'; - if (ERROR.includes(state)) return theme.red; - if (STARTED.includes(state)) return theme.green; - if (state === 'FROZEN') return theme.blue; + if (STARTING.includes(state)) { + return '#fccb7e'; + } + if (ERROR.includes(state)) { + return theme.red; + } + if (STARTED.includes(state)) { + return theme.green; + } + if (state === 'FROZEN') { + return theme.blue; + } return theme.gray; }; @@ -29,7 +37,7 @@ export const State = styled.span` margin-right: 0.5rem; background: ${mapColorToState(state, theme)}; } - `} + `}; `; export const Deploys = styled.ul` @@ -64,7 +72,7 @@ export const Name = styled.span` font-size: 12px; margin-left: 0.5rem; } - `} + `}; `; export const Link = styled.a` @@ -96,7 +104,7 @@ export const Link = styled.a` &:disabled { background: ${theme.gray}; } - `} + `}; `; export const Action = Link.withComponent('button'); @@ -129,5 +137,5 @@ export const Wrapper = styled.div` opacity: 0.5; pointer-events: none; `}; - `} + `}; `; From 1c68397601b6b8854e37eb8f96b2d9f4f7cc8e3a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Tue, 28 May 2019 13:17:38 +0200 Subject: [PATCH 03/20] Fix TypeScript errors --- .../pages/Sandbox/Editor/Workspace/index.tsx | 5 +++ .../Workspace/items/Deployment/Netlify.tsx | 2 +- .../Workspace/items/Deployment/elements.ts | 34 ++++++++----------- 3 files changed, 21 insertions(+), 20 deletions(-) diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/index.tsx index 45898ffff92..dd241b807e6 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/index.tsx +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/index.tsx @@ -1,11 +1,15 @@ import VERSION from '@codesandbox/common/lib/version'; import { observer } from 'mobx-react-lite'; import React from 'react'; +// Fix css prop types in styled-components (see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31245#issuecomment-463640878) +import * as CSSProps from 'styled-components/cssprop'; // eslint-disable-line + import SocialInfo from 'app/components/SocialInfo'; import { useStore } from 'app/store'; import getWorkspaceItems, { getDisabledItems, } from 'app/store/modules/workspace/items'; + import Files from './items/Files'; import { GitHub } from './items/GitHub'; import Server from './items/Server'; @@ -15,6 +19,7 @@ import { Deployment } from './items/Deployment'; import ConfigurationFiles from './items/ConfigurationFiles'; import { NotOwnedSandboxInfo } from './items/NotOwnedSandboxInfo'; import { ProjectInfo } from './items/ProjectInfo'; + import { Advertisement } from './Advertisement'; import Chat from './Chat'; import { ConnectionNotice } from './ConnectionNotice'; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify.tsx index 47f71679654..e5533161429 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify.tsx +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify.tsx @@ -32,7 +32,7 @@ const getFunctionDir = sandbox => { sandbox.directories ); } catch (e) { - return []; + return null; } }; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/elements.ts index 3f34206e7bd..cd527f74756 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/elements.ts +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/elements.ts @@ -6,7 +6,7 @@ const mapColorToState = (state: string, theme: any) => { const STARTED = ['BOOTED', 'READY']; if (STARTING.includes(state)) { - return '#fccb7e'; + return '#FCCB7E'; } if (ERROR.includes(state)) { return theme.red; @@ -21,8 +21,8 @@ const mapColorToState = (state: string, theme: any) => { return theme.gray; }; -export const State = styled.span` - ${({ state, theme }: { state: string; theme: any }) => css` +export const State = styled.span<{ state: string }>` + ${({ state, theme }) => css` align-items: center; display: flex; text-transform: capitalize; @@ -43,7 +43,6 @@ export const State = styled.span` export const Deploys = styled.ul` list-style: none; padding: 0; - margin-top: 1rem; flex-direction: column; font-size: 0.875rem; margin: 0 0.25rem; @@ -55,8 +54,8 @@ export const Deploy = styled.li` flex-direction: column; `; -export const Name = styled.span` - ${({ light, theme }: { light: boolean; theme: any }) => css` +export const Name = styled.span<{ light?: boolean }>` + ${({ light, theme }) => css` font-weight: 600; color: ${theme.light || light ? css`rgba(0, 0, 0, 0.8)` @@ -75,8 +74,8 @@ export const Name = styled.span` `}; `; -export const Link = styled.a` - ${({ disabled, theme }: { disabled: boolean; theme: any }) => css` +export const Link = styled.a<{ disabled?: boolean }>` + ${({ disabled, theme }) => css` padding: 0.25rem 0.4rem; background-color: ${theme.secondary}; text-decoration: none; @@ -111,26 +110,23 @@ export const Action = Link.withComponent('button'); export const ButtonContainer = styled.section` display: flex; + > *:not(:last-child) { margin-right: 0.5rem; } `; export const DeploysWrapper = styled.div` - background: rgb(0, 0, 0); - border-radius: 4px; - font-size: 0.875rem; + background-color: #000000; + border-radius: 0 0 4px 4px; color: rgba(255, 255, 255, 0.8); - padding: 0.75rem 1rem; - padding: 0.75rem 0rem; - border-top-right-radius: 0; - border-top-left-radius: 0; - margin: 0.5rem 0.75rem; - margin-top: 0; + font-size: 0.875rem; + margin: 0 0.75rem 0.5rem; + padding: 0.75rem 0; `; -export const Wrapper = styled.div` - ${({ loading }: { loading: boolean }) => css` +export const Wrapper = styled.div<{ loading: boolean }>` + ${({ loading }) => css` opacity: 1; ${loading && css` From 550720bbe3e14cef934de2ef0f04ae4e416c306f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Thu, 4 Jul 2019 22:48:02 +0200 Subject: [PATCH 04/20] Move Netlify & Zeit components into it's own folder --- .../src/app/pages/Sandbox/Editor/Workspace/index.tsx | 6 +++--- .../items/Deployment/{ => Netlify}/Netlify.tsx | 9 ++++----- .../Editor/Workspace/items/Deployment/Netlify/index.ts | 1 + .../Workspace/items/Deployment/{ => Zeit}/Zeit.tsx | 10 +++------- .../Editor/Workspace/items/Deployment/Zeit/index.ts | 1 + .../Editor/Workspace/items/Deployment/elements.ts | 3 ++- 6 files changed, 14 insertions(+), 16 deletions(-) rename packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/{ => Netlify}/Netlify.tsx (98%) create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/index.ts rename packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/{ => Zeit}/Zeit.tsx (97%) create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/index.ts diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/index.tsx index dd241b807e6..99987e33db3 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/index.tsx +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/index.tsx @@ -10,15 +10,15 @@ import getWorkspaceItems, { getDisabledItems, } from 'app/store/modules/workspace/items'; +import ConfigurationFiles from './items/ConfigurationFiles'; +import { Deployment } from './items/Deployment'; import Files from './items/Files'; import { GitHub } from './items/GitHub'; -import Server from './items/Server'; import Live from './items/Live'; import { More } from './items/More'; -import { Deployment } from './items/Deployment'; -import ConfigurationFiles from './items/ConfigurationFiles'; import { NotOwnedSandboxInfo } from './items/NotOwnedSandboxInfo'; import { ProjectInfo } from './items/ProjectInfo'; +import Server from './items/Server'; import { Advertisement } from './Advertisement'; import Chat from './Chat'; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/Netlify.tsx similarity index 98% rename from packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify.tsx rename to packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/Netlify.tsx index e5533161429..7d6c46f2ea7 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify.tsx +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/Netlify.tsx @@ -12,7 +12,7 @@ import NetlifyLogo from 'app/components/NetlifyLogo'; import { useSignals, useStore } from 'app/store'; import getNetlifyConfig from 'app/utils/getNetlifyConfig'; -import { WorkspaceInputContainer, WorkspaceSubtitle } from '../../elements'; +import { WorkspaceInputContainer, WorkspaceSubtitle } from '../../../elements'; import { Deploys, @@ -22,7 +22,7 @@ import { DeploysWrapper, Wrapper, ButtonContainer, -} from './elements'; +} from '../elements'; const getFunctionDir = sandbox => { try { @@ -31,7 +31,7 @@ const getFunctionDir = sandbox => { sandbox.modules, sandbox.directories ); - } catch (e) { + } catch { return null; } }; @@ -85,8 +85,7 @@ export const Netlify = observer(() => { {deployment.netlifySite && isVisible ? ( Sandbox Site diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/index.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/index.ts new file mode 100644 index 00000000000..c10a1d00773 --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/index.ts @@ -0,0 +1 @@ +export { Netlify } from './Netlify'; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Zeit.tsx similarity index 97% rename from packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit.tsx rename to packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Zeit.tsx index 0109d68b2bd..40f109c903a 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit.tsx +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Zeit.tsx @@ -9,7 +9,7 @@ import DeploymentIntegration from 'app/components/DeploymentIntegration'; import NowLogo from 'app/components/NowLogo'; import { useSignals, useStore } from 'app/store'; -import { WorkspaceInputContainer, WorkspaceSubtitle } from '../../elements'; +import { WorkspaceInputContainer, WorkspaceSubtitle } from '../../../elements'; import { Action, @@ -21,7 +21,7 @@ import { Name, State, Wrapper, -} from './elements'; +} from '../elements'; export const Zeit = observer(() => { const { @@ -59,11 +59,7 @@ export const Zeit = observer(() => { {deployment.sandboxDeploys.length && isVisible ? ( - + Sandbox Deploys diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/index.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/index.ts new file mode 100644 index 00000000000..e7df9fee5dd --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/index.ts @@ -0,0 +1 @@ +export { Zeit } from './Zeit'; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/elements.ts index cd527f74756..ff5be17ea7e 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/elements.ts +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/elements.ts @@ -121,13 +121,14 @@ export const DeploysWrapper = styled.div` border-radius: 0 0 4px 4px; color: rgba(255, 255, 255, 0.8); font-size: 0.875rem; - margin: 0 0.75rem 0.5rem; + margin: -4px 0.75rem 0.5rem; padding: 0.75rem 0; `; export const Wrapper = styled.div<{ loading: boolean }>` ${({ loading }) => css` opacity: 1; + ${loading && css` opacity: 0.5; From c68168753cfba35364c03d1acdf22d5f007b3b99 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Thu, 4 Jul 2019 23:08:11 +0200 Subject: [PATCH 05/20] Extract DeployButton --- .../Netlify/DeployButton/DeployButton.tsx | 37 +++++++++++++++++++ .../Deployment/Netlify/DeployButton/index.ts | 1 + .../items/Deployment/Netlify/Netlify.tsx | 34 ++++------------- .../Workspace/items/Deployment/Zeit/Zeit.tsx | 5 ++- .../Workspace/items/Deployment/elements.ts | 7 ++++ 5 files changed, 56 insertions(+), 28 deletions(-) create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/DeployButton/DeployButton.tsx create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/DeployButton/index.ts diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/DeployButton/DeployButton.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/DeployButton/DeployButton.tsx new file mode 100644 index 00000000000..495e62f536b --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/DeployButton/DeployButton.tsx @@ -0,0 +1,37 @@ +import React from 'react'; + +import DeploymentIntegration from 'app/components/DeploymentIntegration'; +import NetlifyLogo from 'app/components/NetlifyLogo'; +import { useSignals, useStore } from 'app/store'; + +import { DeployButtonContainer } from '../../elements'; + +export const DeployButton = ({ isOpen, toggle }) => { + const { + deployment: { deployWithNetlify }, + } = useSignals(); + const { + deployment: { building, deploying }, + } = useStore(); + + return ( + + + Deploy your sandbox site on{' '} + + Netlify + + + + ); +}; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/DeployButton/index.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/DeployButton/index.ts new file mode 100644 index 00000000000..85f358de062 --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/DeployButton/index.ts @@ -0,0 +1 @@ +export { DeployButton } from './DeployButton'; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/Netlify.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/Netlify.tsx index 7d6c46f2ea7..8023e940efe 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/Netlify.tsx +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/Netlify.tsx @@ -7,8 +7,6 @@ import LinkIcon from 'react-icons/lib/fa/external-link'; import Cogs from 'react-icons/lib/fa/cogs'; import LightningIcon from 'react-icons/lib/md/flash-on'; -import DeploymentIntegration from 'app/components/DeploymentIntegration'; -import NetlifyLogo from 'app/components/NetlifyLogo'; import { useSignals, useStore } from 'app/store'; import getNetlifyConfig from 'app/utils/getNetlifyConfig'; @@ -24,6 +22,8 @@ import { ButtonContainer, } from '../elements'; +import { DeployButton } from './DeployButton'; + const getFunctionDir = sandbox => { try { return resolveDirectory( @@ -38,12 +38,12 @@ const getFunctionDir = sandbox => { export const Netlify = observer(() => { const { - deployment: { getNetlifyDeploys, deployWithNetlify }, + deployment: { getNetlifyDeploys }, modalOpened, } = useSignals(); const { deployment, editor } = useStore(); - const [isVisible, setVisibility] = useState(false); + const [isVisible, setVisible] = useState(false); useEffect(() => { getNetlifyDeploys(); @@ -59,28 +59,10 @@ export const Netlify = observer(() => { return ( template.netlify !== false && ( - - setVisibility(!isVisible)} - > - Deploy your sandbox site on{' '} - - Netlify - - - + setVisible(show => !show)} + /> {deployment.netlifySite && isVisible ? ( { return user.integrations.zeit ? ( - + { ZEIT Now - + {deployment.sandboxDeploys.length && isVisible ? ( diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/elements.ts index ff5be17ea7e..65c39b945d3 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/elements.ts +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/elements.ts @@ -1,5 +1,7 @@ import styled, { css } from 'styled-components'; +import { WorkspaceInputContainer } from '../../elements'; + const mapColorToState = (state: string, theme: any) => { const STARTING = ['DEPLOYING', 'BUILDING', 'INITIALIZING']; const ERROR = ['DEPLOYMENT_ERROR', 'BUILD_ERROR', 'ERROR']; @@ -136,3 +138,8 @@ export const Wrapper = styled.div<{ loading: boolean }>` `}; `}; `; + +export const DeployButtonContainer = styled(WorkspaceInputContainer)` + margin-bottom: 0; + margin-top: 1rem; +`; From e703377501579d37a68b265691dbb5288e32a3ff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Thu, 4 Jul 2019 23:32:46 +0200 Subject: [PATCH 06/20] Extract SiteInfo --- .../items/Deployment/Netlify/Netlify.tsx | 160 +----------------- .../Deployment/Netlify/SiteInfo/SiteInfo.tsx | 124 ++++++++++++++ .../Deployment/Netlify/SiteInfo/elements.ts | 13 ++ .../Deployment/Netlify/SiteInfo/index.ts | 1 + .../Workspace/items/Deployment/Zeit/Zeit.tsx | 6 +- .../Workspace/items/Deployment/elements.ts | 11 +- 6 files changed, 157 insertions(+), 158 deletions(-) create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/SiteInfo.tsx create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/elements.ts create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/index.ts diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/Netlify.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/Netlify.tsx index 8023e940efe..627cd1073b2 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/Netlify.tsx +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/Netlify.tsx @@ -1,47 +1,22 @@ -import { Button } from '@codesandbox/common/lib/components/Button'; -import { resolveDirectory } from '@codesandbox/common/lib/sandbox/modules'; import getTemplate from '@codesandbox/common/lib/templates'; import { observer } from 'mobx-react-lite'; import React, { useEffect, useState } from 'react'; -import LinkIcon from 'react-icons/lib/fa/external-link'; -import Cogs from 'react-icons/lib/fa/cogs'; -import LightningIcon from 'react-icons/lib/md/flash-on'; import { useSignals, useStore } from 'app/store'; -import getNetlifyConfig from 'app/utils/getNetlifyConfig'; -import { WorkspaceInputContainer, WorkspaceSubtitle } from '../../../elements'; - -import { - Deploys, - Deploy, - Name, - Link, - DeploysWrapper, - Wrapper, - ButtonContainer, -} from '../elements'; +import { Wrapper } from '../elements'; import { DeployButton } from './DeployButton'; - -const getFunctionDir = sandbox => { - try { - return resolveDirectory( - getNetlifyConfig(sandbox).functions, - sandbox.modules, - sandbox.directories - ); - } catch { - return null; - } -}; +import { SiteInfo } from './SiteInfo'; export const Netlify = observer(() => { const { deployment: { getNetlifyDeploys }, - modalOpened, } = useSignals(); - const { deployment, editor } = useStore(); + const { + deployment: { deploying, netlifySite }, + editor: { currentSandbox }, + } = useStore(); const [isVisible, setVisible] = useState(false); @@ -49,134 +24,17 @@ export const Netlify = observer(() => { getNetlifyDeploys(); }, [getNetlifyDeploys]); - const template = getTemplate(editor.currentSandbox.template); - const functionDirectory = getFunctionDir(editor.currentSandbox); - - const functions = editor.currentSandbox.modules.filter( - m => m.directoryShortid === functionDirectory.shortid - ); + const template = getTemplate(currentSandbox.template); return ( template.netlify !== false && ( - + setVisible(show => !show)} /> - {deployment.netlifySite && isVisible ? ( - - Sandbox Site - - - - - {deployment.netlifySite.name} - - {!deployment.building &&
Building
} - - {functions.length ? ( - <> - - Functions - - -
- {functions.map(file => ( - - - - {file.title.split('.js')[0]} - - ))} -
- - ) : null} - - - Actions - - - - - {deployment.building ? ( - <> - Building... - - ) : ( - <> - Visit - - )} - - - {deployment.netlifyClaimUrl ? ( - - Claim Site - - ) : null} - - - {deployment.netlifyLogs ? ( - - ) : null} - - - - - ) : null} + {netlifySite && isVisible ? : null} ) ); diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/SiteInfo.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/SiteInfo.tsx new file mode 100644 index 00000000000..7220ee82df7 --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/SiteInfo.tsx @@ -0,0 +1,124 @@ +import { Button } from '@codesandbox/common/lib/components/Button'; +import { resolveDirectory } from '@codesandbox/common/lib/sandbox/modules'; +import React from 'react'; +import LinkIcon from 'react-icons/lib/fa/external-link'; +import Cogs from 'react-icons/lib/fa/cogs'; +import LightningIcon from 'react-icons/lib/md/flash-on'; + +import { useSignals, useStore } from 'app/store'; +import getNetlifyConfig from 'app/utils/getNetlifyConfig'; + +import { + WorkspaceInputContainer, + WorkspaceSubtitle, +} from '../../../../elements'; + +import { Deploys, Deploy, Name, Link, ButtonContainer } from '../../elements'; + +import { SiteInfoWrapper, SubTitle } from './elements'; + +const getFunctionDir = sandbox => { + try { + return resolveDirectory( + getNetlifyConfig(sandbox).functions, + sandbox.modules, + sandbox.directories + ); + } catch { + return null; + } +}; + +export const SiteInfo = () => { + const { modalOpened } = useSignals(); + const { + deployment: { building, netlifyClaimUrl, netlifyLogs, netlifySite }, + editor, + } = useStore(); + + const functionDirectory = getFunctionDir(editor.currentSandbox); + const functions = editor.currentSandbox.modules.filter( + m => m.directoryShortid === functionDirectory.shortid + ); + + return ( + + Sandbox Site + + + + + {netlifySite.name} + + {!building &&
Building
} + + {functions.length ? ( + <> + Functions + +
+ {functions.map(file => ( + + + + {file.title.split('.js')[0]} + + ))} +
+ + ) : null} + + <> + Actions + + + + {building ? ( + <> + Building... + + ) : ( + <> + Visit + + )} + + + {netlifyClaimUrl ? ( + + Claim Site + + ) : null} + + + + {netlifyLogs ? ( + + ) : null} + + + + + ); +}; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/elements.ts new file mode 100644 index 00000000000..6601596e098 --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/elements.ts @@ -0,0 +1,13 @@ +import styled from 'styled-components'; + +import { WorkspaceSubtitle } from '../../../../elements'; + +import { DeploysWrapper } from '../../elements'; + +export const SiteInfoWrapper = styled(DeploysWrapper)` + background-color: #ffffff; +`; + +export const SubTitle = styled(WorkspaceSubtitle)` + padding-left: 0; +`; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/index.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/index.ts new file mode 100644 index 00000000000..8d3926e6b18 --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/index.ts @@ -0,0 +1 @@ +export { SiteInfo } from './SiteInfo'; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Zeit.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Zeit.tsx index 478029f8b14..285a3ea1c4f 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Zeit.tsx +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Zeit.tsx @@ -95,11 +95,7 @@ export const Zeit = observer(() => { ) : null} - + Visit diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/elements.ts index 65c39b945d3..5e03de3056f 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/elements.ts +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/elements.ts @@ -76,7 +76,7 @@ export const Name = styled.span<{ light?: boolean }>` `}; `; -export const Link = styled.a<{ disabled?: boolean }>` +const BaseLink = styled.a<{ disabled?: boolean }>` ${({ disabled, theme }) => css` padding: 0.25rem 0.4rem; background-color: ${theme.secondary}; @@ -108,7 +108,14 @@ export const Link = styled.a<{ disabled?: boolean }>` `}; `; -export const Action = Link.withComponent('button'); +export const Link = styled(BaseLink).attrs({ + rel: 'noreferrer noopener', + target: '_blank', +})` + margin-top: 0; +`; + +export const Action = BaseLink.withComponent('button'); export const ButtonContainer = styled.section` display: flex; From 298459acc50236babcfab7f3a8507919cc532e5a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Fri, 5 Jul 2019 00:48:41 +0200 Subject: [PATCH 07/20] Extract ViewLogsButton --- .../Deployment/Netlify/SiteInfo/SiteInfo.tsx | 17 +++-------------- .../SiteInfo/ViewLogsButton/ViewLogsButton.tsx | 15 +++++++++++++++ .../Netlify/SiteInfo/ViewLogsButton/elements.ts | 6 ++++++ .../Netlify/SiteInfo/ViewLogsButton/index.ts | 1 + 4 files changed, 25 insertions(+), 14 deletions(-) create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/ViewLogsButton/ViewLogsButton.tsx create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/ViewLogsButton/elements.ts create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/ViewLogsButton/index.ts diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/SiteInfo.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/SiteInfo.tsx index 7220ee82df7..57b9946faa9 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/SiteInfo.tsx +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/SiteInfo.tsx @@ -1,11 +1,10 @@ -import { Button } from '@codesandbox/common/lib/components/Button'; import { resolveDirectory } from '@codesandbox/common/lib/sandbox/modules'; import React from 'react'; import LinkIcon from 'react-icons/lib/fa/external-link'; import Cogs from 'react-icons/lib/fa/cogs'; import LightningIcon from 'react-icons/lib/md/flash-on'; -import { useSignals, useStore } from 'app/store'; +import { useStore } from 'app/store'; import getNetlifyConfig from 'app/utils/getNetlifyConfig'; import { @@ -16,6 +15,7 @@ import { import { Deploys, Deploy, Name, Link, ButtonContainer } from '../../elements'; import { SiteInfoWrapper, SubTitle } from './elements'; +import { ViewLogsButton } from './ViewLogsButton'; const getFunctionDir = sandbox => { try { @@ -30,7 +30,6 @@ const getFunctionDir = sandbox => { }; export const SiteInfo = () => { - const { modalOpened } = useSignals(); const { deployment: { building, netlifyClaimUrl, netlifyLogs, netlifySite }, editor, @@ -105,17 +104,7 @@ export const SiteInfo = () => { - {netlifyLogs ? ( - - ) : null} + {netlifyLogs ? : null} diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/ViewLogsButton/ViewLogsButton.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/ViewLogsButton/ViewLogsButton.tsx new file mode 100644 index 00000000000..ed96f57ef9e --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/ViewLogsButton/ViewLogsButton.tsx @@ -0,0 +1,15 @@ +import React from 'react'; + +import { useSignals } from 'app/store'; + +import { Button } from './elements'; + +export const ViewLogsButton = () => { + const { modalOpened } = useSignals(); + + return ( + + ); +}; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/ViewLogsButton/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/ViewLogsButton/elements.ts new file mode 100644 index 00000000000..5556a81373a --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/ViewLogsButton/elements.ts @@ -0,0 +1,6 @@ +import { Button as BaseButton } from '@codesandbox/common/lib/components/Button'; +import styled from 'styled-components'; + +export const Button = styled(BaseButton)` + margin-top: 20px; +`; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/ViewLogsButton/index.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/ViewLogsButton/index.ts new file mode 100644 index 00000000000..79ae564896b --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/ViewLogsButton/index.ts @@ -0,0 +1 @@ +export { ViewLogsButton } from './ViewLogsButton'; From f9a22dd7050eecca6df612fcb1b2871806ba6778 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Fri, 5 Jul 2019 00:59:17 +0200 Subject: [PATCH 08/20] Extract Actions --- .../Netlify/SiteInfo/Actions/Actions.tsx | 28 +++++++++++++++++ .../ClaimSiteButton/ClaimSiteButton.tsx | 17 ++++++++++ .../SiteInfo/Actions/ClaimSiteButton/index.ts | 1 + .../VisitSiteButton/VisitSiteButton.tsx | 27 ++++++++++++++++ .../SiteInfo/Actions/VisitSiteButton/index.ts | 1 + .../Netlify/SiteInfo/Actions/index.ts | 1 + .../Deployment/Netlify/SiteInfo/SiteInfo.tsx | 31 +++---------------- 7 files changed, 79 insertions(+), 27 deletions(-) create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Actions/Actions.tsx create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Actions/ClaimSiteButton/ClaimSiteButton.tsx create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Actions/ClaimSiteButton/index.ts create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Actions/VisitSiteButton/VisitSiteButton.tsx create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Actions/VisitSiteButton/index.ts create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Actions/index.ts diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Actions/Actions.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Actions/Actions.tsx new file mode 100644 index 00000000000..aefd7239f85 --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Actions/Actions.tsx @@ -0,0 +1,28 @@ +import React from 'react'; + +import { useStore } from 'app/store'; + +import { ButtonContainer } from '../../../elements'; + +import { SubTitle } from '../elements'; + +import { ClaimSiteButton } from './ClaimSiteButton'; +import { VisitSiteButton } from './VisitSiteButton'; + +export const Actions = () => { + const { + deployment: { netlifyClaimUrl }, + } = useStore(); + + return ( + <> + Actions + + + + + {netlifyClaimUrl ? : null} + + + ); +}; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Actions/ClaimSiteButton/ClaimSiteButton.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Actions/ClaimSiteButton/ClaimSiteButton.tsx new file mode 100644 index 00000000000..c04621085f3 --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Actions/ClaimSiteButton/ClaimSiteButton.tsx @@ -0,0 +1,17 @@ +import React from 'react'; + +import { useStore } from 'app/store'; + +import { Link } from '../../../../elements'; + +export const ClaimSiteButton = () => { + const { + deployment: { building, netlifyClaimUrl }, + } = useStore(); + + return ( + + Claim Site + + ); +}; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Actions/ClaimSiteButton/index.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Actions/ClaimSiteButton/index.ts new file mode 100644 index 00000000000..46c9f71ac31 --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Actions/ClaimSiteButton/index.ts @@ -0,0 +1 @@ +export { ClaimSiteButton } from './ClaimSiteButton'; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Actions/VisitSiteButton/VisitSiteButton.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Actions/VisitSiteButton/VisitSiteButton.tsx new file mode 100644 index 00000000000..22c903536f3 --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Actions/VisitSiteButton/VisitSiteButton.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import LinkIcon from 'react-icons/lib/fa/external-link'; +import Cogs from 'react-icons/lib/fa/cogs'; + +import { useStore } from 'app/store'; + +import { Link } from '../../../../elements'; + +export const VisitSiteButton = () => { + const { + deployment: { building, netlifySite }, + } = useStore(); + + return ( + + {building ? ( + <> + Building... + + ) : ( + <> + Visit + + )} + + ); +}; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Actions/VisitSiteButton/index.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Actions/VisitSiteButton/index.ts new file mode 100644 index 00000000000..3acc92dff09 --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Actions/VisitSiteButton/index.ts @@ -0,0 +1 @@ +export { VisitSiteButton } from './VisitSiteButton'; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Actions/index.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Actions/index.ts new file mode 100644 index 00000000000..ac0eab8d42a --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Actions/index.ts @@ -0,0 +1 @@ +export { Actions } from './Actions'; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/SiteInfo.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/SiteInfo.tsx index 57b9946faa9..fcb802bb2e2 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/SiteInfo.tsx +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/SiteInfo.tsx @@ -1,7 +1,5 @@ import { resolveDirectory } from '@codesandbox/common/lib/sandbox/modules'; import React from 'react'; -import LinkIcon from 'react-icons/lib/fa/external-link'; -import Cogs from 'react-icons/lib/fa/cogs'; import LightningIcon from 'react-icons/lib/md/flash-on'; import { useStore } from 'app/store'; @@ -12,8 +10,9 @@ import { WorkspaceSubtitle, } from '../../../../elements'; -import { Deploys, Deploy, Name, Link, ButtonContainer } from '../../elements'; +import { Deploys, Deploy, Name, Link } from '../../elements'; +import { Actions } from './Actions'; import { SiteInfoWrapper, SubTitle } from './elements'; import { ViewLogsButton } from './ViewLogsButton'; @@ -31,7 +30,7 @@ const getFunctionDir = sandbox => { export const SiteInfo = () => { const { - deployment: { building, netlifyClaimUrl, netlifyLogs, netlifySite }, + deployment: { building, netlifyLogs, netlifySite }, editor, } = useStore(); @@ -80,29 +79,7 @@ export const SiteInfo = () => { ) : null} - <> - Actions - - - - {building ? ( - <> - Building... - - ) : ( - <> - Visit - - )} - - - {netlifyClaimUrl ? ( - - Claim Site - - ) : null} - - + {netlifyLogs ? : null} From eba701bbbee11e5f2b25bfbb37803f4ab253e356 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Fri, 5 Jul 2019 01:16:50 +0200 Subject: [PATCH 09/20] Extract Functions --- .../SiteInfo/Functions/Function/Function.tsx | 28 +++++++++++++++ .../SiteInfo/Functions/Function/elements.ts | 7 ++++ .../SiteInfo/Functions/Function/index.ts | 1 + .../Netlify/SiteInfo/Functions/Functions.tsx | 18 ++++++++++ .../Netlify/SiteInfo/Functions/elements.ts | 6 ++++ .../Netlify/SiteInfo/Functions/index.ts | 1 + .../Deployment/Netlify/SiteInfo/SiteInfo.tsx | 35 +++---------------- 7 files changed, 65 insertions(+), 31 deletions(-) create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Functions/Function/Function.tsx create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Functions/Function/elements.ts create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Functions/Function/index.ts create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Functions/Functions.tsx create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Functions/elements.ts create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Functions/index.ts diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Functions/Function/Function.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Functions/Function/Function.tsx new file mode 100644 index 00000000000..43e676c6c1a --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Functions/Function/Function.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import LightningIcon from 'react-icons/lib/md/flash-on'; + +import { useStore } from 'app/store'; + +import { Link } from '../../../../elements'; + +export const Function = ({ function: { title } }) => { + const { + deployment: { + building, + netlifySite: { url: siteUrl }, + }, + } = useStore(); + + const functionName = title.split('.js')[0]; + + return ( + + + + {functionName} + + ); +}; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Functions/Function/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Functions/Function/elements.ts new file mode 100644 index 00000000000..93ed43e001e --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Functions/Function/elements.ts @@ -0,0 +1,7 @@ +import styled from 'styled-components'; + +import { Link as BaseLink } from '../../../../elements'; + +export const Section = styled(BaseLink)` + margin-right: 0.5rem; +`; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Functions/Function/index.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Functions/Function/index.ts new file mode 100644 index 00000000000..4b53a265c1c --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Functions/Function/index.ts @@ -0,0 +1 @@ +export { Function } from './Function'; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Functions/Functions.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Functions/Functions.tsx new file mode 100644 index 00000000000..2ce2e84c6f3 --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Functions/Functions.tsx @@ -0,0 +1,18 @@ +import React from 'react'; + +import { SubTitle } from '../elements'; + +import { Section } from './elements'; +import { Function } from './Function'; + +export const Functions = ({ functions }) => ( + <> + Functions + +
+ {functions.map(func => ( + + ))} +
+ +); diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Functions/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Functions/elements.ts new file mode 100644 index 00000000000..c1b21402fea --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Functions/elements.ts @@ -0,0 +1,6 @@ +import styled from 'styled-components'; + +export const Section = styled.section` + display: flex; + margin-bottom: 0.5rem; +`; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Functions/index.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Functions/index.ts new file mode 100644 index 00000000000..baa1aa42491 --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/Functions/index.ts @@ -0,0 +1 @@ +export { Functions } from './Functions'; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/SiteInfo.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/SiteInfo.tsx index fcb802bb2e2..6a8f7c9b4dd 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/SiteInfo.tsx +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/SiteInfo.tsx @@ -1,6 +1,5 @@ import { resolveDirectory } from '@codesandbox/common/lib/sandbox/modules'; import React from 'react'; -import LightningIcon from 'react-icons/lib/md/flash-on'; import { useStore } from 'app/store'; import getNetlifyConfig from 'app/utils/getNetlifyConfig'; @@ -10,10 +9,11 @@ import { WorkspaceSubtitle, } from '../../../../elements'; -import { Deploys, Deploy, Name, Link } from '../../elements'; +import { Deploys, Deploy, Name } from '../../elements'; import { Actions } from './Actions'; -import { SiteInfoWrapper, SubTitle } from './elements'; +import { SiteInfoWrapper } from './elements'; +import { Functions } from './Functions'; import { ViewLogsButton } from './ViewLogsButton'; const getFunctionDir = sandbox => { @@ -50,34 +50,7 @@ export const SiteInfo = () => { {!building &&
Building
} - {functions.length ? ( - <> - Functions - -
- {functions.map(file => ( - - - - {file.title.split('.js')[0]} - - ))} -
- - ) : null} + {functions.length ? : null} From 6465c7374a4691deabe3c424b914b3b194bfefc4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Tue, 9 Jul 2019 01:13:39 +0200 Subject: [PATCH 10/20] Extract DeployButton --- .../components/DeploymentIntegration/index.js | 15 ++++---- .../Zeit/DeployButton/DeployButton.tsx | 31 ++++++++++++++++ .../Deployment/Zeit/DeployButton/index.ts | 1 + .../Workspace/items/Deployment/Zeit/Zeit.tsx | 36 +++++-------------- 4 files changed, 48 insertions(+), 35 deletions(-) create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/DeployButton/DeployButton.tsx create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/DeployButton/index.ts diff --git a/packages/app/src/app/components/DeploymentIntegration/index.js b/packages/app/src/app/components/DeploymentIntegration/index.js index b50e5ab9dee..8cd51e7ed3d 100644 --- a/packages/app/src/app/components/DeploymentIntegration/index.js +++ b/packages/app/src/app/components/DeploymentIntegration/index.js @@ -1,19 +1,20 @@ +import Notice from '@codesandbox/common/lib/components/Notice'; import React from 'react'; import Down from 'react-icons/lib/fa/angle-down'; import Up from 'react-icons/lib/fa/angle-up'; -import Notice from '@codesandbox/common/lib/components/Notice'; + import DetailInfo from './DetailInfo'; import { Container, IntegrationBlock, Name } from './elements'; const Integration = ({ - light, - Icon, - name, - deploy, + beta = false, children, - loading, - beta, color, + deploy, + Icon, + light = false, + loading = false, + name, open = true, toggle, }) => ( diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/DeployButton/DeployButton.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/DeployButton/DeployButton.tsx new file mode 100644 index 00000000000..9d8325628e1 --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/DeployButton/DeployButton.tsx @@ -0,0 +1,31 @@ +import React from 'react'; + +import DeploymentIntegration from 'app/components/DeploymentIntegration'; +import NowLogo from 'app/components/NowLogo'; +import { useSignals } from 'app/store'; + +import { DeployButtonContainer } from '../../elements'; + +export const DeployButton = ({ isOpen, toggle }) => { + const { + deployment: { deploySandboxClicked }, + } = useSignals(); + + return ( + + + Deploy your sandbox on{' '} + + ZEIT Now + + + + ); +}; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/DeployButton/index.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/DeployButton/index.ts new file mode 100644 index 00000000000..85f358de062 --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/DeployButton/index.ts @@ -0,0 +1 @@ +export { DeployButton } from './DeployButton'; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Zeit.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Zeit.tsx index 285a3ea1c4f..0a9fb2cea65 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Zeit.tsx +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Zeit.tsx @@ -5,8 +5,6 @@ import LinkIcon from 'react-icons/lib/fa/external-link'; import TrashIcon from 'react-icons/lib/fa/trash'; import ZeitIntegration from 'app/pages/common/ZeitIntegration'; -import DeploymentIntegration from 'app/components/DeploymentIntegration'; -import NowLogo from 'app/components/NowLogo'; import { useSignals, useStore } from 'app/store'; import { WorkspaceInputContainer, WorkspaceSubtitle } from '../../../elements'; @@ -15,7 +13,6 @@ import { Action, ButtonContainer, Deploy, - DeployButtonContainer, Deploys, DeploysWrapper, Link, @@ -24,40 +21,23 @@ import { Wrapper, } from '../elements'; +import { DeployButton } from './DeployButton'; + export const Zeit = observer(() => { const { - deployment: { - aliasDeployment, - deploySandboxClicked, - setDeploymentToDelete, - }, + deployment: { aliasDeployment, setDeploymentToDelete }, modalOpened, } = useSignals(); const { deployment, user } = useStore(); - const [isVisible, setVisibility] = useState(false); + const [isVisible, setVisible] = useState(false); return user.integrations.zeit ? ( - - setVisibility(!isVisible)} - > - Deploy your sandbox on{' '} - - ZEIT Now - - - + setVisible(show => !show)} + /> {deployment.sandboxDeploys.length && isVisible ? ( From 6a3c67313d3b967f9261b242c9a8378ac6b345f3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Tue, 9 Jul 2019 01:50:29 +0200 Subject: [PATCH 11/20] Extract Deploys --- .../Deployment/Netlify/SiteInfo/elements.ts | 4 +- .../items/Deployment/Zeit/Deploys/Deploys.tsx | 100 +++++++++++++++++ .../items/Deployment/Zeit/Deploys/index.ts | 1 + .../Workspace/items/Deployment/Zeit/Zeit.tsx | 103 ++---------------- .../Workspace/items/Deployment/elements.ts | 2 +- 5 files changed, 113 insertions(+), 97 deletions(-) create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Deploys.tsx create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/index.ts diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/elements.ts index 6601596e098..95c5c34e044 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/elements.ts +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/elements.ts @@ -2,9 +2,9 @@ import styled from 'styled-components'; import { WorkspaceSubtitle } from '../../../../elements'; -import { DeploysWrapper } from '../../elements'; +import { DeploysContainer } from '../../elements'; -export const SiteInfoWrapper = styled(DeploysWrapper)` +export const SiteInfoWrapper = styled(DeploysContainer)` background-color: #ffffff; `; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Deploys.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Deploys.tsx new file mode 100644 index 00000000000..a51fb8c2c62 --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Deploys.tsx @@ -0,0 +1,100 @@ +import distanceInWordsToNow from 'date-fns/distance_in_words_to_now'; +import React from 'react'; +import LinkIcon from 'react-icons/lib/fa/external-link'; +import TrashIcon from 'react-icons/lib/fa/trash'; + +import { useSignals, useStore } from 'app/store'; + +import { + WorkspaceInputContainer, + WorkspaceSubtitle, +} from '../../../../elements'; + +import { + Action, + ButtonContainer, + Deploy, + Deploys as DeploysWrapper, + DeploysContainer, + Link, + Name, + State, +} from '../../elements'; + +export const Deploys = () => { + const { + deployment: { aliasDeployment, setDeploymentToDelete }, + modalOpened, + } = useSignals(); + const { + deployment: { hasAlias, sandboxDeploys, ...deployment }, + } = useStore(); + + return ( + + Sandbox Deploys + + + + {sandboxDeploys.map(deploy => ( + + + {deploy.name} + + {`(${distanceInWordsToNow(deploy.created)} ago)`} + + + {deploy.state.toLowerCase()} + + {deploy.alias.length ? ( + + Aliased to{' '} + {deploy.alias.map(a => ( + + {a.alias} + + ))} + + ) : null} + + + + Visit + + + { + setDeploymentToDelete({ id: deploy.uid }); + modalOpened({ modal: 'deleteDeployment' }); + }} + > + {deployment[`${deploy.uid}Deleting`] ? ( + 'Deleting' + ) : ( + <> + Delete + + )} + + + {hasAlias && deploy.state === 'READY' ? ( + aliasDeployment({ id: deploy.uid })} + > + {deploy.alias.length ? 'Aliased' : 'Alias'} + + ) : null} + + + ))} + + + + ); +}; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/index.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/index.ts new file mode 100644 index 00000000000..9f86e62fc6e --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/index.ts @@ -0,0 +1 @@ +export { Deploys } from './Deploys'; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Zeit.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Zeit.tsx index 0a9fb2cea65..e685bf838c8 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Zeit.tsx +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Zeit.tsx @@ -1,115 +1,30 @@ -import distanceInWordsToNow from 'date-fns/distance_in_words_to_now'; import { observer } from 'mobx-react-lite'; import React, { useState } from 'react'; -import LinkIcon from 'react-icons/lib/fa/external-link'; -import TrashIcon from 'react-icons/lib/fa/trash'; import ZeitIntegration from 'app/pages/common/ZeitIntegration'; -import { useSignals, useStore } from 'app/store'; +import { useStore } from 'app/store'; -import { WorkspaceInputContainer, WorkspaceSubtitle } from '../../../elements'; - -import { - Action, - ButtonContainer, - Deploy, - Deploys, - DeploysWrapper, - Link, - Name, - State, - Wrapper, -} from '../elements'; +import { Wrapper } from '../elements'; import { DeployButton } from './DeployButton'; +import { Deploys } from './Deploys'; export const Zeit = observer(() => { const { - deployment: { aliasDeployment, setDeploymentToDelete }, - modalOpened, - } = useSignals(); - const { deployment, user } = useStore(); + deployment: { deploying, sandboxDeploys }, + user: { integrations }, + } = useStore(); const [isVisible, setVisible] = useState(false); - return user.integrations.zeit ? ( - + return integrations.zeit ? ( + setVisible(show => !show)} /> - {deployment.sandboxDeploys.length && isVisible ? ( - - Sandbox Deploys - - - - {deployment.sandboxDeploys.map(deploy => ( - - - {deploy.name} - - {`(${distanceInWordsToNow( - deploy.created - )} ago)`} - - - - {deploy.state.toLowerCase()} - - - {deploy.alias.length ? ( - - Aliased to{' '} - {deploy.alias.map(a => ( - - {a.alias} - - ))} - - ) : null} - - - - Visit - - - { - setDeploymentToDelete({ id: deploy.uid }); - modalOpened({ modal: 'deleteDeployment' }); - }} - > - {deployment[`${deploy.uid}Deleting`] ? ( - 'Deleting' - ) : ( - <> - Delete - - )} - - - {deployment.hasAlias && deploy.state === 'READY' ? ( - aliasDeployment({ id: deploy.uid })} - > - {deploy.alias.length ? 'Aliased' : 'Alias'} - - ) : null} - - - ))} - - - - ) : null} + {sandboxDeploys.length && isVisible ? : null} ) : (
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/elements.ts index 5e03de3056f..3ce935d03b3 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/elements.ts +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/elements.ts @@ -125,7 +125,7 @@ export const ButtonContainer = styled.section` } `; -export const DeploysWrapper = styled.div` +export const DeploysContainer = styled.div` background-color: #000000; border-radius: 0 0 4px 4px; color: rgba(255, 255, 255, 0.8); From 069a553b1904fc8c2e092e2e5f98cec6259ec29e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Tue, 9 Jul 2019 02:10:52 +0200 Subject: [PATCH 12/20] Extract Actions --- .../Zeit/Deploys/Actions/Actions.tsx | 27 +++++++++++ .../AliasDeploymentButton.tsx | 17 +++++++ .../Actions/AliasDeploymentButton/index.ts | 1 + .../DeleteDeploymentButton.tsx | 32 +++++++++++++ .../Actions/DeleteDeploymentButton/index.ts | 1 + .../VisitDeploymentButton.tsx | 10 ++++ .../Actions/VisitDeploymentButton/index.ts | 1 + .../Deployment/Zeit/Deploys/Actions/index.ts | 1 + .../items/Deployment/Zeit/Deploys/Deploys.tsx | 46 ++----------------- 9 files changed, 95 insertions(+), 41 deletions(-) create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Actions/Actions.tsx create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Actions/AliasDeploymentButton/AliasDeploymentButton.tsx create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Actions/AliasDeploymentButton/index.ts create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Actions/DeleteDeploymentButton/DeleteDeploymentButton.tsx create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Actions/DeleteDeploymentButton/index.ts create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Actions/VisitDeploymentButton/VisitDeploymentButton.tsx create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Actions/VisitDeploymentButton/index.ts create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Actions/index.ts diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Actions/Actions.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Actions/Actions.tsx new file mode 100644 index 00000000000..c6f8c42a880 --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Actions/Actions.tsx @@ -0,0 +1,27 @@ +import React from 'react'; + +import { useStore } from 'app/store'; + +import { ButtonContainer } from '../../../elements'; + +import { AliasDeploymentButton } from './AliasDeploymentButton'; +import { DeleteDeploymentButton } from './DeleteDeploymentButton'; +import { VisitDeploymentButton } from './VisitDeploymentButton'; + +export const Actions = ({ deploy }) => { + const { + deployment: { hasAlias }, + } = useStore(); + + return ( + + + + + + {hasAlias && deploy.state === 'READY' ? ( + + ) : null} + + ); +}; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Actions/AliasDeploymentButton/AliasDeploymentButton.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Actions/AliasDeploymentButton/AliasDeploymentButton.tsx new file mode 100644 index 00000000000..265675393e7 --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Actions/AliasDeploymentButton/AliasDeploymentButton.tsx @@ -0,0 +1,17 @@ +import React from 'react'; + +import { useSignals } from 'app/store'; + +import { Action } from '../../../../elements'; + +export const AliasDeploymentButton = ({ deploy: { alias, uid: id } }) => { + const { + deployment: { aliasDeployment }, + } = useSignals(); + + return ( + 0} onClick={() => aliasDeployment({ id })}> + {alias.length > 0 ? 'Aliased' : 'Alias'} + + ); +}; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Actions/AliasDeploymentButton/index.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Actions/AliasDeploymentButton/index.ts new file mode 100644 index 00000000000..b58b8870cdc --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Actions/AliasDeploymentButton/index.ts @@ -0,0 +1 @@ +export { AliasDeploymentButton } from './AliasDeploymentButton'; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Actions/DeleteDeploymentButton/DeleteDeploymentButton.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Actions/DeleteDeploymentButton/DeleteDeploymentButton.tsx new file mode 100644 index 00000000000..c6ac383992b --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Actions/DeleteDeploymentButton/DeleteDeploymentButton.tsx @@ -0,0 +1,32 @@ +import React from 'react'; +import TrashIcon from 'react-icons/lib/fa/trash'; + +import { useSignals, useStore } from 'app/store'; + +import { Action } from '../../../../elements'; + +export const DeleteDeploymentButton = ({ id }) => { + const { + deployment: { setDeploymentToDelete }, + modalOpened, + } = useSignals(); + const { deployment } = useStore(); + + return ( + { + setDeploymentToDelete({ id }); + modalOpened({ modal: 'deleteDeployment' }); + }} + > + {deployment[`${id}Deleting`] ? ( + 'Deleting' + ) : ( + <> + Delete + + )} + + ); +}; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Actions/DeleteDeploymentButton/index.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Actions/DeleteDeploymentButton/index.ts new file mode 100644 index 00000000000..948b72b8c6d --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Actions/DeleteDeploymentButton/index.ts @@ -0,0 +1 @@ +export { DeleteDeploymentButton } from './DeleteDeploymentButton'; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Actions/VisitDeploymentButton/VisitDeploymentButton.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Actions/VisitDeploymentButton/VisitDeploymentButton.tsx new file mode 100644 index 00000000000..7c2751ec502 --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Actions/VisitDeploymentButton/VisitDeploymentButton.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import LinkIcon from 'react-icons/lib/fa/external-link'; + +import { Link } from '../../../../elements'; + +export const VisitDeploymentButton = ({ url }) => ( + + Visit + +); diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Actions/VisitDeploymentButton/index.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Actions/VisitDeploymentButton/index.ts new file mode 100644 index 00000000000..7421962c1f8 --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Actions/VisitDeploymentButton/index.ts @@ -0,0 +1 @@ +export { VisitDeploymentButton } from './VisitDeploymentButton'; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Actions/index.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Actions/index.ts new file mode 100644 index 00000000000..ac0eab8d42a --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Actions/index.ts @@ -0,0 +1 @@ +export { Actions } from './Actions'; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Deploys.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Deploys.tsx index a51fb8c2c62..af317ac34eb 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Deploys.tsx +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Deploys.tsx @@ -1,9 +1,7 @@ import distanceInWordsToNow from 'date-fns/distance_in_words_to_now'; import React from 'react'; -import LinkIcon from 'react-icons/lib/fa/external-link'; -import TrashIcon from 'react-icons/lib/fa/trash'; -import { useSignals, useStore } from 'app/store'; +import { useStore } from 'app/store'; import { WorkspaceInputContainer, @@ -11,23 +9,18 @@ import { } from '../../../../elements'; import { - Action, - ButtonContainer, Deploy, Deploys as DeploysWrapper, DeploysContainer, - Link, Name, State, } from '../../elements'; +import { Actions } from './Actions'; + export const Deploys = () => { const { - deployment: { aliasDeployment, setDeploymentToDelete }, - modalOpened, - } = useSignals(); - const { - deployment: { hasAlias, sandboxDeploys, ...deployment }, + deployment: { sandboxDeploys }, } = useStore(); return ( @@ -61,36 +54,7 @@ export const Deploys = () => { ) : null} - - - Visit - - - { - setDeploymentToDelete({ id: deploy.uid }); - modalOpened({ modal: 'deleteDeployment' }); - }} - > - {deployment[`${deploy.uid}Deleting`] ? ( - 'Deleting' - ) : ( - <> - Delete - - )} - - - {hasAlias && deploy.state === 'READY' ? ( - aliasDeployment({ id: deploy.uid })} - > - {deploy.alias.length ? 'Aliased' : 'Alias'} - - ) : null} - + ))} From ee9bd810733b5311f6d3da864595badcb9c9b380 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Tue, 9 Jul 2019 02:16:22 +0200 Subject: [PATCH 13/20] Extract Alias --- .../Deployment/Zeit/Deploys/Alias/Alias.tsx | 12 ++++++++++++ .../items/Deployment/Zeit/Deploys/Alias/index.ts | 1 + .../items/Deployment/Zeit/Deploys/Deploys.tsx | 16 ++-------------- 3 files changed, 15 insertions(+), 14 deletions(-) create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Alias/Alias.tsx create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Alias/index.ts diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Alias/Alias.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Alias/Alias.tsx new file mode 100644 index 00000000000..d4005af3547 --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Alias/Alias.tsx @@ -0,0 +1,12 @@ +import React from 'react'; + +export const Alias = ({ alias: aliases }) => ( + + Aliased to{' '} + {aliases.map(({ alias }) => ( + + {alias} + + ))} + +); diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Alias/index.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Alias/index.ts new file mode 100644 index 00000000000..b24935ecbb0 --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Alias/index.ts @@ -0,0 +1 @@ +export { Alias } from './Alias'; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Deploys.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Deploys.tsx index af317ac34eb..be79030d2f6 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Deploys.tsx +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Deploys/Deploys.tsx @@ -17,6 +17,7 @@ import { } from '../../elements'; import { Actions } from './Actions'; +import { Alias } from './Alias'; export const Deploys = () => { const { @@ -39,20 +40,7 @@ export const Deploys = () => { {deploy.state.toLowerCase()} - {deploy.alias.length ? ( - - Aliased to{' '} - {deploy.alias.map(a => ( - - {a.alias} - - ))} - - ) : null} + {deploy.alias.length > 0 ? : null} From 163835be00a1a97cd7042257f51ca7f748daebb9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Tue, 9 Jul 2019 02:16:41 +0200 Subject: [PATCH 14/20] Cleanup Zeit --- .../Sandbox/Editor/Workspace/items/Deployment/Zeit/Zeit.tsx | 5 +++-- .../Editor/Workspace/items/Deployment/Zeit/elements.ts | 5 +++++ 2 files changed, 8 insertions(+), 2 deletions(-) create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/elements.ts diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Zeit.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Zeit.tsx index e685bf838c8..2d82c689301 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Zeit.tsx +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/Zeit.tsx @@ -8,6 +8,7 @@ import { Wrapper } from '../elements'; import { DeployButton } from './DeployButton'; import { Deploys } from './Deploys'; +import { NoIntegrationWrapper } from './elements'; export const Zeit = observer(() => { const { @@ -27,8 +28,8 @@ export const Zeit = observer(() => { {sandboxDeploys.length && isVisible ? : null} ) : ( -
+ -
+ ); }); diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/elements.ts new file mode 100644 index 00000000000..199de976060 --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/elements.ts @@ -0,0 +1,5 @@ +import styled from 'styled-components'; + +export const NoIntegrationWrapper = styled.div` + margin: 1rem; +`; From a463a5460f3f8bfbbc0ba9d3ad90ba5db785c1c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Tue, 9 Jul 2019 02:52:36 +0200 Subject: [PATCH 15/20] Reactor DeploymentIntegration --- .../DeploymentIntegration.tsx | 48 +++++++++++++ .../DetailInfo/DetailInfo.tsx | 17 +++++ .../DetailInfo/elements.js | 22 ------ .../DetailInfo/elements.ts | 28 ++++++++ .../DeploymentIntegration/DetailInfo/index.js | 20 ------ .../DeploymentIntegration/DetailInfo/index.ts | 1 + .../DeploymentIntegration/elements.js | 45 ------------ .../DeploymentIntegration/elements.ts | 68 +++++++++++++++++++ .../components/DeploymentIntegration/index.js | 68 ------------------- .../components/DeploymentIntegration/index.ts | 1 + .../Netlify/DeployButton/DeployButton.tsx | 2 +- .../Zeit/DeployButton/DeployButton.tsx | 2 +- 12 files changed, 165 insertions(+), 157 deletions(-) create mode 100644 packages/app/src/app/components/DeploymentIntegration/DeploymentIntegration.tsx create mode 100644 packages/app/src/app/components/DeploymentIntegration/DetailInfo/DetailInfo.tsx delete mode 100644 packages/app/src/app/components/DeploymentIntegration/DetailInfo/elements.js create mode 100644 packages/app/src/app/components/DeploymentIntegration/DetailInfo/elements.ts delete mode 100644 packages/app/src/app/components/DeploymentIntegration/DetailInfo/index.js create mode 100644 packages/app/src/app/components/DeploymentIntegration/DetailInfo/index.ts delete mode 100644 packages/app/src/app/components/DeploymentIntegration/elements.js create mode 100644 packages/app/src/app/components/DeploymentIntegration/elements.ts delete mode 100644 packages/app/src/app/components/DeploymentIntegration/index.js create mode 100644 packages/app/src/app/components/DeploymentIntegration/index.ts diff --git a/packages/app/src/app/components/DeploymentIntegration/DeploymentIntegration.tsx b/packages/app/src/app/components/DeploymentIntegration/DeploymentIntegration.tsx new file mode 100644 index 00000000000..80fb7490167 --- /dev/null +++ b/packages/app/src/app/components/DeploymentIntegration/DeploymentIntegration.tsx @@ -0,0 +1,48 @@ +import React from 'react'; + +import { DetailInfo } from './DetailInfo'; +import { + Container, + Down, + IntegrationBlock, + Name, + Notice, + Up, +} from './elements'; + +export const DeploymentIntegration = ({ + beta = false, + children, + color, + deploy, + Icon, + light = false, + loading = false, + name, + open = true, + toggle, +}) => ( + + +
+ + + {name} + + {beta && Beta} +
+ + {open ? : } + + + {open ? ( + + ) : null} + +); diff --git a/packages/app/src/app/components/DeploymentIntegration/DetailInfo/DetailInfo.tsx b/packages/app/src/app/components/DeploymentIntegration/DetailInfo/DetailInfo.tsx new file mode 100644 index 00000000000..a7091e53b0b --- /dev/null +++ b/packages/app/src/app/components/DeploymentIntegration/DetailInfo/DetailInfo.tsx @@ -0,0 +1,17 @@ +import Margin from '@codesandbox/common/lib/components/spacing/Margin'; +import { Button } from '@codesandbox/common/lib/components/Button'; +import React from 'react'; + +import { Details, Info } from './elements'; + +export const DetailInfo = ({ info, deploy, bgColor, light, loading }) => ( +
+ + {info} + + + +
+); diff --git a/packages/app/src/app/components/DeploymentIntegration/DetailInfo/elements.js b/packages/app/src/app/components/DeploymentIntegration/DetailInfo/elements.js deleted file mode 100644 index a0536cc1338..00000000000 --- a/packages/app/src/app/components/DeploymentIntegration/DetailInfo/elements.js +++ /dev/null @@ -1,22 +0,0 @@ -import styled from 'styled-components'; - -export const Details = styled.div` - display: inline-flex; - justify-content: space-between; - align-items: center; - flex: 3; - padding: 0.75rem 1rem; - background-color: ${props => props.bgColor}; - margin-top: -1px; -`; - -export const Heading = styled.div` - color: ${props => (props.light ? 'rgba(0, 0, 0)' : 'rgba(255, 255, 255)')}; - font-size: 0.75rem; - margin-bottom: 0.25rem; -`; - -export const Info = styled.div` - font-weight: 400; - color: ${props => (props.light ? 'rgba(0, 0, 0)' : 'rgba(255, 255, 255)')}; -`; diff --git a/packages/app/src/app/components/DeploymentIntegration/DetailInfo/elements.ts b/packages/app/src/app/components/DeploymentIntegration/DetailInfo/elements.ts new file mode 100644 index 00000000000..65ca606f251 --- /dev/null +++ b/packages/app/src/app/components/DeploymentIntegration/DetailInfo/elements.ts @@ -0,0 +1,28 @@ +import styled, { css } from 'styled-components'; + +export const Details = styled.div<{ bgColor: string }>` + ${({ bgColor }) => css` + display: inline-flex; + justify-content: space-between; + align-items: center; + flex: 3; + padding: 0.75rem 1rem; + background-color: ${bgColor}; + margin-top: -1px; + `} +`; + +export const Heading = styled.div<{ light: boolean }>` + ${({ light }) => css` + color: ${light ? '#000000' : '#ffffff'}; + font-size: 0.75rem; + margin-bottom: 0.25rem; + `} +`; + +export const Info = styled.div<{ light: boolean }>` + ${({ light }) => css` + color: ${light ? '#000000' : '#ffffff'}; + font-weight: 400; + `} +`; diff --git a/packages/app/src/app/components/DeploymentIntegration/DetailInfo/index.js b/packages/app/src/app/components/DeploymentIntegration/DetailInfo/index.js deleted file mode 100644 index b4178879c12..00000000000 --- a/packages/app/src/app/components/DeploymentIntegration/DetailInfo/index.js +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; -import Margin from '@codesandbox/common/lib/components/spacing/Margin'; -import { Button } from '@codesandbox/common/lib/components/Button'; - -import { Details, Info } from './elements'; - -function DetailInfo({ info, deploy, bgColor, light, loading }) { - return ( -
- - {info} - - -
- ); -} - -export default DetailInfo; diff --git a/packages/app/src/app/components/DeploymentIntegration/DetailInfo/index.ts b/packages/app/src/app/components/DeploymentIntegration/DetailInfo/index.ts new file mode 100644 index 00000000000..ce08e94b82d --- /dev/null +++ b/packages/app/src/app/components/DeploymentIntegration/DetailInfo/index.ts @@ -0,0 +1 @@ +export { DetailInfo } from './DetailInfo'; diff --git a/packages/app/src/app/components/DeploymentIntegration/elements.js b/packages/app/src/app/components/DeploymentIntegration/elements.js deleted file mode 100644 index fec2bf88ca0..00000000000 --- a/packages/app/src/app/components/DeploymentIntegration/elements.js +++ /dev/null @@ -1,45 +0,0 @@ -import styled, { css } from 'styled-components'; - -export const Container = styled.div` - display: inline-flex; - border-radius: 4px; - overflow: hidden; - width: 100%; - flex-direction: column; - font-size: 0.875rem; - - color: ${props => - props.light || props.theme.light ? 'rgba(0, 0, 0)' : 'rgba(255, 255, 255)'}; - - ${props => - props.loading && - css` - opacity: 0.5; - pointer-events: none; - `}; -`; - -export const IntegrationBlock = styled.div` - display: inline-flex; - align-items: center; - cursor: pointer; - box-sizing: border-box; - background-color: ${props => props.bgColor}; - flex: 1; - color: white; - padding: 0.75em 0.75em; - min-height: 45px; - font-size: 1em; - justify-content: space-between; - - > div { - display: flex; - align-items: center; - } -`; - -export const Name = styled.span` - margin-left: 0.75em; - font-size: 1.375em; - color: ${props => (props.light ? 'rgba(0, 0, 0)' : 'rgba(255, 255, 255)')}; -`; diff --git a/packages/app/src/app/components/DeploymentIntegration/elements.ts b/packages/app/src/app/components/DeploymentIntegration/elements.ts new file mode 100644 index 00000000000..c7a6b7cfc1a --- /dev/null +++ b/packages/app/src/app/components/DeploymentIntegration/elements.ts @@ -0,0 +1,68 @@ +import BaseNotice from '@codesandbox/common/lib/components/Notice'; +import BaseDown from 'react-icons/lib/fa/angle-down'; +import BaseUp from 'react-icons/lib/fa/angle-up'; +import styled, { css } from 'styled-components'; + +export const Container = styled.div` + ${({ theme }) => css` + display: inline-flex; + border-radius: 4px; + overflow: hidden; + width: 100%; + flex-direction: column; + font-size: 0.875rem; + + color: ${theme.light ? '#000000' : '#ffffff'}; + `} +`; + +export const Down = styled(BaseDown)<{ light: boolean }>` + ${({ light }) => css` + fill: ${light ? '#000000' : '#ffffff'}; + cursor: pointer; + width: 1.5rem; + height: auto; + `} +`; + +export const IntegrationBlock = styled.div<{ bgColor: string }>` + ${({ bgColor }) => css` + display: inline-flex; + align-items: center; + cursor: pointer; + box-sizing: border-box; + background-color: ${bgColor}; + flex: 1; + color: white; + padding: 0.75em 0.75em; + min-height: 45px; + font-size: 1em; + justify-content: space-between; + + > div { + display: flex; + align-items: center; + } + `} +`; + +export const Name = styled.span<{ light: boolean }>` + ${({ light }) => css` + margin-left: 0.75em; + font-size: 1.375em; + color: ${light ? '#000000' : '#ffffff'}; + `} +`; + +export const Notice = styled(BaseNotice)` + margin-left: 0.7rem; +`; + +export const Up = styled(BaseUp)<{ light: boolean }>` + ${({ light }) => css` + fill: ${light ? '#000000' : '#ffffff'}; + cursor: pointer; + width: 1.5rem; + height: auto; + `} +`; diff --git a/packages/app/src/app/components/DeploymentIntegration/index.js b/packages/app/src/app/components/DeploymentIntegration/index.js deleted file mode 100644 index 8cd51e7ed3d..00000000000 --- a/packages/app/src/app/components/DeploymentIntegration/index.js +++ /dev/null @@ -1,68 +0,0 @@ -import Notice from '@codesandbox/common/lib/components/Notice'; -import React from 'react'; -import Down from 'react-icons/lib/fa/angle-down'; -import Up from 'react-icons/lib/fa/angle-up'; - -import DetailInfo from './DetailInfo'; -import { Container, IntegrationBlock, Name } from './elements'; - -const Integration = ({ - beta = false, - children, - color, - deploy, - Icon, - light = false, - loading = false, - name, - open = true, - toggle, -}) => ( - - -
- - {name} - {beta && ( - - Beta - - )} -
- {open ? ( - - ) : ( - - )} - - {open ? ( - - ) : null} - -); - -export default Integration; diff --git a/packages/app/src/app/components/DeploymentIntegration/index.ts b/packages/app/src/app/components/DeploymentIntegration/index.ts new file mode 100644 index 00000000000..39a6f994236 --- /dev/null +++ b/packages/app/src/app/components/DeploymentIntegration/index.ts @@ -0,0 +1 @@ +export { DeploymentIntegration } from './DeploymentIntegration'; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/DeployButton/DeployButton.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/DeployButton/DeployButton.tsx index 495e62f536b..3dd64fa8fb0 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/DeployButton/DeployButton.tsx +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/DeployButton/DeployButton.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import DeploymentIntegration from 'app/components/DeploymentIntegration'; +import { DeploymentIntegration } from 'app/components/DeploymentIntegration'; import NetlifyLogo from 'app/components/NetlifyLogo'; import { useSignals, useStore } from 'app/store'; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/DeployButton/DeployButton.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/DeployButton/DeployButton.tsx index 9d8325628e1..6a54b0fbcb5 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/DeployButton/DeployButton.tsx +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Zeit/DeployButton/DeployButton.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import DeploymentIntegration from 'app/components/DeploymentIntegration'; +import { DeploymentIntegration } from 'app/components/DeploymentIntegration'; import NowLogo from 'app/components/NowLogo'; import { useSignals } from 'app/store'; From 6936d0bb5279615a43010e1c669bdf5544ddb08c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Mon, 15 Jul 2019 22:39:25 +0200 Subject: [PATCH 16/20] Fix build --- packages/homepage/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/homepage/package.json b/packages/homepage/package.json index a1da471497b..95809eb7525 100644 --- a/packages/homepage/package.json +++ b/packages/homepage/package.json @@ -1,5 +1,5 @@ { - "name": "codesandbox-homepage", + "name": "homepage", "description": "CodeSandbox Homepage", "private": true, "version": "1.0.0", From 05a92175920410c078a3229dec904aa82ee7d410 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Tue, 16 Jul 2019 00:50:39 +0200 Subject: [PATCH 17/20] Fix Netlify build --- .../items/Deployment/Netlify/SiteInfo/SiteInfo.tsx | 14 ++++++++------ packages/app/src/app/utils/getNetlifyConfig.js | 1 + packages/common/src/sandbox/modules.ts | 8 ++++++-- 3 files changed, 15 insertions(+), 8 deletions(-) diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/SiteInfo.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/SiteInfo.tsx index 6a8f7c9b4dd..9ce3ca1c80f 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/SiteInfo.tsx +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/SiteInfo.tsx @@ -24,20 +24,22 @@ const getFunctionDir = sandbox => { sandbox.directories ); } catch { - return null; + return undefined; } }; export const SiteInfo = () => { const { deployment: { building, netlifyLogs, netlifySite }, - editor, + editor: { currentSandbox }, } = useStore(); - const functionDirectory = getFunctionDir(editor.currentSandbox); - const functions = editor.currentSandbox.modules.filter( - m => m.directoryShortid === functionDirectory.shortid - ); + const functionDirectory = getFunctionDir(currentSandbox); + const functions = functionDirectory + ? currentSandbox.modules.filter( + ({ directoryShortid }) => directoryShortid === functionDirectory.shortid + ) + : []; return ( diff --git a/packages/app/src/app/utils/getNetlifyConfig.js b/packages/app/src/app/utils/getNetlifyConfig.js index a806da5880e..f82a7456b76 100644 --- a/packages/app/src/app/utils/getNetlifyConfig.js +++ b/packages/app/src/app/utils/getNetlifyConfig.js @@ -8,5 +8,6 @@ export default sandbox => { module.title === 'netlify.toml' && module.directoryShortid == null ) .map(m => toml(m.code))[0] || { build: {} }; + return mapKeys(netlifyConfig.build, (v, k) => k.toLowerCase()); }; diff --git a/packages/common/src/sandbox/modules.ts b/packages/common/src/sandbox/modules.ts index 97f07c3d748..1b40e135e66 100644 --- a/packages/common/src/sandbox/modules.ts +++ b/packages/common/src/sandbox/modules.ts @@ -21,7 +21,9 @@ export function resolveDirectory( directories: Array, _startdirectoryShortid: string | undefined = undefined ) { - if (!_path) return throwError(''); + if (!_path) { + return throwError(''); + } let path = _path; let startdirectoryShortid = _startdirectoryShortid; @@ -40,7 +42,9 @@ export function resolveDirectory( const foundDirectoryShortid = splitPath.reduce( (dirId: string | undefined, pathPart: string, i: number) => { // Meaning this is the last argument, so the directory - if (i === splitPath.length) return dirId; + if (i === splitPath.length) { + return dirId; + } if (pathPart === '..') { // Find the parent From 71db461cdbd50af68280776d0053f7af09b81ed1 Mon Sep 17 00:00:00 2001 From: Ives van Hoorne Date: Tue, 16 Jul 2019 11:29:23 +0200 Subject: [PATCH 18/20] Add observer --- .../items/Deployment/Netlify/SiteInfo/SiteInfo.tsx | 8 +++++--- packages/app/src/app/pages/common/NotFound/index.tsx | 3 ++- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/SiteInfo.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/SiteInfo.tsx index 9ce3ca1c80f..5fa8f38ace2 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/SiteInfo.tsx +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Netlify/SiteInfo/SiteInfo.tsx @@ -1,9 +1,11 @@ -import { resolveDirectory } from '@codesandbox/common/lib/sandbox/modules'; import React from 'react'; +import { observer } from 'mobx-react-lite'; import { useStore } from 'app/store'; import getNetlifyConfig from 'app/utils/getNetlifyConfig'; +import { resolveDirectory } from '@codesandbox/common/lib/sandbox/modules'; + import { WorkspaceInputContainer, WorkspaceSubtitle, @@ -28,7 +30,7 @@ const getFunctionDir = sandbox => { } }; -export const SiteInfo = () => { +export const SiteInfo = observer(() => { const { deployment: { building, netlifyLogs, netlifySite }, editor: { currentSandbox }, @@ -62,4 +64,4 @@ export const SiteInfo = () => { ); -}; +}); diff --git a/packages/app/src/app/pages/common/NotFound/index.tsx b/packages/app/src/app/pages/common/NotFound/index.tsx index 1281d2149db..02aedafd356 100644 --- a/packages/app/src/app/pages/common/NotFound/index.tsx +++ b/packages/app/src/app/pages/common/NotFound/index.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { observer } from 'mobx-react-lite'; import { Button } from '@codesandbox/common/lib/components/Button'; import { newSandboxWizard } from '@codesandbox/common/lib/utils/url-generator'; @@ -29,4 +30,4 @@ const NotFound = () => { ); }; -export default NotFound; +export default observer(NotFound); From fa34dff50c60160f43ed0642171eb3c4ac917981 Mon Sep 17 00:00:00 2001 From: Ives van Hoorne Date: Tue, 16 Jul 2019 11:45:09 +0200 Subject: [PATCH 19/20] Fix styling of button --- .../Workspace/items/Deployment/elements.ts | 57 +++++++++---------- .../app/store/modules/deployment/actions.js | 8 ++- 2 files changed, 34 insertions(+), 31 deletions(-) diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/elements.ts index 3ce935d03b3..0d1ace783d8 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/elements.ts +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/elements.ts @@ -77,43 +77,42 @@ export const Name = styled.span<{ light?: boolean }>` `; const BaseLink = styled.a<{ disabled?: boolean }>` - ${({ disabled, theme }) => css` - padding: 0.25rem 0.4rem; - background-color: ${theme.secondary}; - text-decoration: none; - border: none; - font-size: 0.75rem; - color: white; - border-radius: 2px; - font-weight: 600; - margin-top: 0.75rem; - display: flex; - align-items: center; - flex-grow: 0; - max-width: 50%; + padding: 0.25rem 0.4rem; + background-color: ${props => props.theme.secondary}; + text-decoration: none; + border: none; + font-size: 0.75rem; + color: white; + border-radius: 2px; + font-weight: 600; + margin-top: 0.75rem; + display: flex; + align-items: center; + flex-grow: 0; + max-width: 50%; - svg { - margin-right: 10px; - } + margin-top: 0; - ${disabled && - css` - background: ${theme.gray}; - pointer-events: none; - `}; + svg { + margin-right: 10px; + } - &:disabled { - background: ${theme.gray}; - } - `}; + ${props => + props.disabled && + css` + background: ${props.theme.gray}; + pointer-events: none; + `}; + + &:disabled { + background: ${props => props.theme.gray}; + } `; export const Link = styled(BaseLink).attrs({ rel: 'noreferrer noopener', target: '_blank', -})` - margin-top: 0; -`; +})``; export const Action = BaseLink.withComponent('button'); diff --git a/packages/app/src/app/store/modules/deployment/actions.js b/packages/app/src/app/store/modules/deployment/actions.js index f59273e2bfb..60a4b1ca11c 100644 --- a/packages/app/src/app/store/modules/deployment/actions.js +++ b/packages/app/src/app/store/modules/deployment/actions.js @@ -313,8 +313,12 @@ export async function getDeploys({ http, path, state, props }) { const assignAlias = async d => { const alias = await deploysByID(d.uid, token, http); - // eslint-disable-next-line - d.alias = alias.aliases; + if (alias) { + // eslint-disable-next-line + d.alias = alias.aliases; + } else { + d.alias = []; + } return d; }; From da0bd1ed6b253aaad106422c02d0eba0f51f8999 Mon Sep 17 00:00:00 2001 From: Ives van Hoorne Date: Tue, 16 Jul 2019 11:45:45 +0200 Subject: [PATCH 20/20] Make deployment button call without event --- .../components/DeploymentIntegration/DetailInfo/DetailInfo.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/app/src/app/components/DeploymentIntegration/DetailInfo/DetailInfo.tsx b/packages/app/src/app/components/DeploymentIntegration/DetailInfo/DetailInfo.tsx index a7091e53b0b..a313c44f4e1 100644 --- a/packages/app/src/app/components/DeploymentIntegration/DetailInfo/DetailInfo.tsx +++ b/packages/app/src/app/components/DeploymentIntegration/DetailInfo/DetailInfo.tsx @@ -10,7 +10,7 @@ export const DetailInfo = ({ info, deploy, bgColor, light, loading }) => ( {info} -