Deployment sidebar (codesandbox#3368)

* add netlify * fix padding * fix ts * fuix ts * fix ts? * add zeit * place defaultOpen: true in the right place * update message
abdullahtariq1171 · Jan 22, 2020 · c765f2e · c765f2e
1 parent 771ad2b
commit c765f2e
Show file tree

Hide file tree

Showing 15 changed files with 448 additions and 16 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -6,5 +6,9 @@
     "javascriptreact",
     { "language": "typescript", "autoFix": true },
     { "language": "typescriptreact", "autoFix": true }
-  ]
+  ],
+  "files.watcherExclude": {
+    "**/node_modules": true,
+    "**/node_modules/**": false
+  }
 }
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/index.tsx
@@ -25,6 +25,7 @@ import { More } from './items/More';
 import { NotOwnedSandboxInfo } from './items/NotOwnedSandboxInfo';
 import { ProjectInfo } from './items/ProjectInfo';
 import { ProjectInfo as ProjectInfoNew } from './screens/ProjectInfo';
+import { Deployment as DeploymentNew } from './screens/Deployment/index';
 
 import { Server } from './items/Server';
 import { SSEDownNotice } from './SSEDownNotice';
@@ -37,7 +38,7 @@ const workspaceTabs = {
   'project-summary': NotOwnedSandboxInfo,
   files: FilesItem,
   github: GitHub,
-  deploy: Deployment,
+  deploy: REDESIGNED_SIDEBAR ? DeploymentNew : Deployment,
   config: REDESIGNED_SIDEBAR ? ConfigurationFilesNew : ConfigurationFiles,
   live: Live,
   server: Server,

diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/Netlify.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/Netlify.tsx
@@ -0,0 +1,113 @@
+import React, { useEffect } from 'react';
+import getTemplate from '@codesandbox/common/lib/templates';
+import track from '@codesandbox/common/lib/utils/analytics';
+import { useOvermind } from 'app/overmind';
+
+import {
+  Element,
+  ListAction,
+  Text,
+  Stack,
+  List,
+  ListItem,
+  Button,
+  Integration,
+} from '@codesandbox/components';
+import { css } from '@styled-system/css';
+import { NetlifyIcon, FileIcon, VisitIcon, FlagIcon } from './icons';
+
+export const Netlify = () => {
+  const {
+    actions: {
+      modalOpened,
+      deployment: { deployWithNetlify, getNetlifyDeploys },
+    },
+    state: {
+      deployment: {
+        deploying,
+        netlifySite,
+        building,
+        netlifyLogs,
+        netlifyClaimUrl,
+      },
+      editor: { currentSandbox },
+    },
+  } = useOvermind();
+
+  useEffect(() => {
+    getNetlifyDeploys();
+  }, [getNetlifyDeploys]);
+
+  const template = getTemplate(currentSandbox.template);
+
+  return (
+    template.netlify !== false && (
+      <>
+        <Integration icon={NetlifyIcon} title="netlify">
+          <Stack direction="vertical">
+            <Text variant="muted">Enables</Text>
+            <Text>Deployments</Text>
+          </Stack>
+          <Button
+            disabled={deploying || building}
+            onClick={() => {
+              track('Deploy Clicked', { provider: 'netlify' });
+              deployWithNetlify();
+            }}
+          >
+            Deploy
+          </Button>
+          <Element
+            css={css({
+              gridColumnStart: 1,
+              gridColumnEnd: 3,
+            })}
+          >
+            {netlifySite ? (
+              <List>
+                <ListItem>
+                  <Text weight="bold">{netlifySite.name}</Text>
+                </ListItem>
+                {building && !netlifyLogs && (
+                  <ListItem>
+                    <Text variant="muted">Building</Text>
+                  </ListItem>
+                )}
+                {netlifySite.url ? (
+                  <ListAction
+                    onClick={() => window.open(netlifySite.url, '_blank')}
+                  >
+                    <Element marginRight={2}>
+                      <VisitIcon />
+                    </Element>{' '}
+                    Visit Site
+                  </ListAction>
+                ) : null}
+                {netlifySite.url ? (
+                  <ListAction
+                    onClick={() => window.open(netlifyClaimUrl, '_blank')}
+                  >
+                    <Element marginRight={2}>
+                      <FlagIcon />
+                    </Element>{' '}
+                    Claim Site
+                  </ListAction>
+                ) : null}
+                {netlifyLogs ? (
+                  <ListAction
+                    onClick={() => modalOpened({ modal: 'netlifyLogs' })}
+                  >
+                    <Element marginRight={2}>
+                      <FileIcon />
+                    </Element>{' '}
+                    View Logs
+                  </ListAction>
+                ) : null}
+              </List>
+            ) : null}
+          </Element>
+        </Integration>
+      </>
+    )
+  );
+};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/Zeit.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/Zeit.tsx
@@ -0,0 +1,90 @@
+import React from 'react';
+import {
+  Element,
+  Text,
+  Stack,
+  Button,
+  Integration,
+  ListAction,
+  ListItem,
+  List,
+} from '@codesandbox/components';
+import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
+import { css } from '@styled-system/css';
+import { useOvermind } from 'app/overmind';
+import { ZeitIcon, VisitIcon, TrashIcon } from './icons';
+import { State } from './elements';
+
+export const Zeit = () => {
+  const {
+    actions: { modalOpened, deployment },
+    state: {
+      deployment: { deploying, sandboxDeploys, deploysBeingDeleted },
+      user: { integrations },
+    },
+  } = useOvermind();
+  const { deploySandboxClicked, setDeploymentToDelete } = deployment;
+  return (
+    <Element marginTop={5}>
+      <Integration icon={ZeitIcon} title="ZEIT">
+        <Stack direction="vertical">
+          <Text variant="muted">Enables</Text>
+          <Text>Deployments</Text>
+        </Stack>
+        <Button disabled={deploying} onClick={deploySandboxClicked}>
+          {integrations.zeit ? 'Deploy' : 'Sign In'}
+        </Button>
+        <Element
+          css={css({
+            gridColumnStart: 1,
+            gridColumnEnd: 3,
+          })}
+        >
+          {sandboxDeploys &&
+            sandboxDeploys.map(deploy => {
+              const disabled = deploysBeingDeleted
+                ? deploysBeingDeleted.includes(deploy.uid)
+                : deployment[`${deploy.uid}Deleting`];
+              return (
+                <List key={deploy.uid}>
+                  <ListItem>
+                    <Text weight="bold">{deploy.name}</Text>
+                  </ListItem>
+                  <ListItem>
+                    <State state={deploy.state}>
+                      {deploy.state.toString().toLowerCase()}
+                    </State>
+                    <Text variant="muted" marginLeft={2}>
+                      {`(${distanceInWordsToNow(deploy.created)} ago)`}
+                    </Text>
+                  </ListItem>
+                  <ListAction
+                    onClick={() =>
+                      window.open(`https://${deploy.url}`, '_blank')
+                    }
+                  >
+                    <Element marginRight={2}>
+                      <VisitIcon />
+                    </Element>{' '}
+                    Visit Site
+                  </ListAction>
+                  <ListAction
+                    disabled={disabled}
+                    onClick={() => {
+                      setDeploymentToDelete({ id: deploy.uid });
+                      modalOpened({ modal: 'deleteDeployment' });
+                    }}
+                  >
+                    <Element marginRight={2}>
+                      <TrashIcon />
+                    </Element>{' '}
+                    Delete
+                  </ListAction>
+                </List>
+              );
+            })}
+        </Element>
+      </Integration>
+    </Element>
+  );
+};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/elements.ts
@@ -0,0 +1,49 @@
+import { ZeitDeploymentState } from '@codesandbox/common/lib/types';
+import styled, { css } from 'styled-components';
+import { Text } from '@codesandbox/components';
+
+const mapColorToState = (state: ZeitDeploymentState, theme: any) => {
+  const STARTING = [
+    ZeitDeploymentState.BUILDING,
+    ZeitDeploymentState.DEPLOYING,
+    ZeitDeploymentState.INITIALIZING,
+  ];
+  const ERROR = [
+    ZeitDeploymentState.BUILD_ERROR,
+    ZeitDeploymentState.DEPLOYMENT_ERROR,
+    ZeitDeploymentState.ERROR,
+  ];
+  const STARTED = [ZeitDeploymentState.BOOTED, ZeitDeploymentState.READY];
+
+  if (STARTING.includes(state)) {
+    return '#FCCB7E';
+  }
+  if (ERROR.includes(state)) {
+    return theme.red;
+  }
+  if (STARTED.includes(state)) {
+    return theme.green;
+  }
+  if (state === ZeitDeploymentState.FROZEN) {
+    return theme.blue;
+  }
+
+  return theme.gray;
+};
+
+export const State = styled(Text)<{ state: ZeitDeploymentState }>`
+  ${({ state, theme }) => css`
+    display: flex;
+    align-items: center;
+    text-transform: capitalize;
+    &:before {
+      content: '';
+      display: block;
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      margin-right: 0.5rem;
+      background: ${mapColorToState(state, theme)};
+    }
+  `};
+`;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/icons.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/icons.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+
+export const NetlifyIcon = props => (
+  <svg width={11} height={11} fill="none" viewBox="0 0 11 11" {...props}>
+    <path
+      fill="#4CAA9F"
+      d="M4.536.293a1 1 0 011.414 0l4.242 4.243a1 1 0 010 1.414L5.95 10.192a1 1 0 01-1.414 0L.293 5.95a1 1 0 010-1.414L4.536.293z"
+    />
+  </svg>
+);
+
+export const ZeitIcon = props => (
+  <svg width={12} height={10} fill="none" viewBox="0 0 12 10" {...props}>
+    <path fill="#fff" d="M6 0l6 10H0L6 0z" />
+  </svg>
+);
+
+export const FileIcon = props => (
+  <svg width={8} height={11} fill="none" viewBox="0 0 8 11" {...props}>
+    <mask id="path-1-inside-1" fill="#fff">
+      <path
+        fillRule="evenodd"
+        d="M4.284 0H.563A.563.563 0 000 .563v9.874c0 .311.252.563.563.563h6.875c.31 0 .562-.252.562-.563V3.58L4.284 0zM3.111.5l3.5 3.5h-3.5V.5z"
+        clipRule="evenodd"
+      />
+    </mask>
+    <path
+      fill="#999"
+      fillRule="evenodd"
+      d="M4.284 0H.563A.563.563 0 000 .563v9.874c0 .311.252.563.563.563h6.875c.31 0 .562-.252.562-.563V3.58L4.284 0zM3.111.5l3.5 3.5h-3.5V.5z"
+      clipRule="evenodd"
+    />
+    <path
+      fill="#999"
+      d="M4.003 0v1.673h.563V0h-.563zM6.19 3.86H8v-.562H6.19v.563zM4.284 0l.39-.405-.163-.157h-.227V0zM8 3.58h.563v-.24l-.173-.166L8 3.58zM6.611 4v.563H7.97l-.96-.96L6.61 4zM3.111.5L3.51.102l-.96-.96V.5h.562zm0 3.5H2.55v.563h.562V4zM.562.562h3.722V-.563H.563V.563zm0 0V-.563c-.62 0-1.125.504-1.125 1.125H.563zm0 9.876V.562H-.563v9.876H.563zm0 0H-.563c0 .62.504 1.124 1.125 1.124v-1.124zm6.875 0H.563v1.124h6.875v-1.124zm0 0v1.124c.622 0 1.125-.503 1.125-1.124H7.438zm0-6.859v6.858h1.125V3.58H7.438zM3.894.405l3.716 3.58.78-.81-3.715-3.58-.78.81zM7.01 3.602l-3.5-3.5-.796.796 3.5 3.5.796-.796zm-3.898.96h3.5V3.438h-3.5v1.126zM2.55.5V4h1.125V.5H2.549z"
+      mask="url(#path-1-inside-1)"
+    />
+  </svg>
+);
+
+export const VisitIcon = props => (
+  <svg width={12} height={12} fill="none" viewBox="0 0 12 12" {...props}>
+    <path
+      fill="#999"
+      d="M11.195 2.988A5.974 5.974 0 009.012.805 5.87 5.87 0 006 0a5.87 5.87 0 00-3.012.805A5.973 5.973 0 00.805 2.988 5.869 5.869 0 000 6a5.87 5.87 0 00.805 3.012 5.976 5.976 0 002.183 2.183A5.87 5.87 0 006 12a5.87 5.87 0 003.012-.805 5.973 5.973 0 002.183-2.183A5.87 5.87 0 0012 6a5.871 5.871 0 00-.805-3.012zM6.751 9.157c-.053-.063-.07-.115-.055-.157-.005.027-.024.05-.055.07a.745.745 0 00-.14-.116.737.737 0 01-.141-.118 3.324 3.324 0 01-.176-.3c-.013-.034-.014-.054-.004-.059-.099.042-.242.013-.43-.086a.768.768 0 01-.163-.164c-.073-.089-.149-.128-.227-.117a1.314 1.314 0 00-.105.027.408.408 0 01-.114.02.357.357 0 01-.125-.032 1.008 1.008 0 01-.168-.09 1.12 1.12 0 00-.144-.081l-.102-.055-.125-.063a.384.384 0 01-.097-.074.248.248 0 01-.067-.105 1.505 1.505 0 01-.039-.188.584.584 0 00-.062-.203.704.704 0 00-.133-.156c-.057-.052-.11-.078-.156-.078.041 0 .041-.035 0-.106a.792.792 0 00-.11-.152 9.858 9.858 0 01-.227-.25.625.625 0 01-.093-.145c-.026-.055-.031-.1-.016-.137.005-.005 0-.013-.015-.023a.404.404 0 00-.059-.031 1.343 1.343 0 00-.066-.028.154.154 0 00-.047-.011c.01.02.022.058.035.113a.45.45 0 00.043.121c.01.021.055.097.133.227.135.218.198.38.187.484-.031.01-.052.005-.062-.015a.284.284 0 01-.024-.086.491.491 0 00-.015-.078c-.016-.032-.056-.066-.121-.102-.066-.036-.106-.073-.122-.11a.036.036 0 00.02-.007.038.038 0 01.02-.008c.005-.047-.023-.107-.082-.18-.06-.073-.085-.125-.075-.156-.041-.031-.078-.092-.11-.183a.69.69 0 00-.077-.176.334.334 0 00-.078-.082 1.542 1.542 0 00-.118-.078 3.437 3.437 0 01-.093-.06.301.301 0 01-.063-.07c-.172-.208-.224-.32-.156-.335-.068.015-.124-.035-.168-.153-.044-.117-.059-.207-.043-.27l-.016-.007a1.16 1.16 0 00.008-.184c0-.101.007-.194.02-.277.013-.083.038-.125.074-.125-.036.005-.064-.027-.082-.098-.018-.07-.02-.118-.004-.144.005-.016.029-.005.07.031a.4.4 0 01.07.07c.068-.036.095-.083.079-.14a1.072 1.072 0 00-.164-.164c-.224-.146-.339-.217-.344-.211.031-.058.023-.107-.023-.149-.052.031-.082.04-.09.024a.303.303 0 01-.02-.086c-.005-.042-.018-.065-.039-.07-.026-.006-.057-.027-.094-.063a4.93 4.93 0 011.836-1.734c.032-.006.089-.008.172-.008.042.005.08.018.117.039.037.02.075.05.114.086.039.036.069.062.09.078.01-.031-.003-.078-.04-.14.01-.032.068-.063.172-.095.12-.015.198-.013.235.008a2.055 2.055 0 00-.157-.195l-.039.039c-.041-.037-.15-.018-.328.055l-.078.043a.911.911 0 01-.101.05.192.192 0 01-.094.008c.25-.135.495-.242.734-.32.016.01.042.032.078.066.037.034.065.059.086.074-.015-.01-.026-.005-.031.016-.02.062-.02.114 0 .156a.145.145 0 00.105.063.581.581 0 00.16-.008.973.973 0 01.126-.016L5 1.625c.166.016.232 0 .195-.047.016.021.034.064.055.13.02.064.044.11.07.136.026-.021.031-.057.016-.11-.016-.052-.016-.088 0-.109.005-.01.02-.02.046-.031a9.163 9.163 0 01.157-.063c.031-.02.01-.057-.063-.11a.533.533 0 00-.066-.023 1.117 1.117 0 01-.09-.03.496.496 0 01-.082-.044c-.029-.018-.042-.039-.039-.062a.211.211 0 01.043-.09c.031-.026.082-.037.152-.031.07.005.124.018.16.039.141.078.162.148.063.21a.56.56 0 01.188.063c.072.037.101.076.085.117.042-.078.084-.117.125-.117.027.005.051.04.075.106.023.065.037.1.043.105.041.057.083.07.125.04a.659.659 0 00.129-.138c.044-.06.068-.087.074-.082-.052-.02-.058-.041-.016-.062.078-.047.149-.06.211-.039.016.01.037.034.062.07.047.094.04.138-.023.133a.17.17 0 01.059.156c-.008.063-.049.091-.122.086a.277.277 0 01-.113-.039.351.351 0 00-.113-.043c-.026-.002-.063.012-.11.043a.988.988 0 00-.082.133.598.598 0 01-.09.133c-.078.078-.208.107-.39.086.015 0 .014.015-.004.047a1.581 1.581 0 01-.129.172.399.399 0 00-.094.18 2.1 2.1 0 01-.008.105.393.393 0 01-.031.136c.062-.015.112.016.148.094.032.073.032.112 0 .117a.922.922 0 01.454.032c.187.067.294.135.32.203.031-.047.107-.05.226-.008.047.026.089.104.126.234.02.078.056.146.105.203.05.058.103.073.16.047l.024-.015c.02-.01.037-.02.05-.028a.33.33 0 00.043-.031c.016-.013.025-.025.028-.035.002-.01-.002-.021-.012-.031a.282.282 0 01-.082-.13.164.164 0 01.012-.144.522.522 0 01.125-.094c.067-.041.11-.083.125-.125.02-.067-.006-.123-.078-.168-.073-.044-.11-.084-.11-.12 0-.027.017-.058.05-.095.035-.036.05-.07.044-.101a.38.38 0 00-.028-.098.537.537 0 01-.03-.11c-.003-.023.009-.05.034-.081.037-.021.123-.02.258.004a.872.872 0 01.266.074c.016.01.05.026.102.047.052.02.097.043.136.066.04.023.061.046.067.066h-.04a.187.187 0 01.067.11c.008.042-.012.073-.059.094a.246.246 0 01.125.023c.084.031.086.06.008.086a.5.5 0 01.067-.016.22.22 0 00.105-.05.129.129 0 01.035-.024.25.25 0 01.035-.008.064.064 0 01.047.012c.005 0 .017-.013.035-.039.018-.026.038-.052.059-.078.02-.026.039-.039.054-.039a.06.06 0 01.043.02.164.164 0 01.031.042 1.026 1.026 0 01.043.094c.01.026.036.054.074.082a.21.21 0 01.075.082l.03.117a.257.257 0 00.063.13.305.305 0 00.117.058c.01.005.034.002.07-.008a.187.187 0 01.09-.008c.024.005.036.026.036.063.03-.032.046-.052.046-.063a.33.33 0 00.051.164c.03.042.075.06.137.055l-.016.172c-.015.026-.054.045-.117.058a.427.427 0 00-.117.036.54.54 0 00-.113.093c-.06.058-.085.092-.075.102-.088-.1-.221-.128-.398-.086a1.966 1.966 0 00-.406.094.568.568 0 00-.172.117.246.246 0 00-.027.055 1.42 1.42 0 01-.04.086c-.013.026-.024.039-.034.039.03-.006.066-.03.105-.075a.452.452 0 01.074-.074c.136-.088.248-.12.337-.093.114.031.132.073.054.125-.01.01-.038.014-.082.012a.282.282 0 00-.09.004c.047.01.086.025.118.043.03.018.039.043.023.074.083.047.1.099.047.156a.282.282 0 01-.242.086c.016 0 .016.01 0 .031l-.133.086a1.64 1.64 0 01-.102.04.265.265 0 00-.117.07.156.156 0 00-.023.093.415.415 0 01-.008.094c-.005.021-.026.026-.062.016-.016.031-.064.056-.145.074-.08.018-.134.046-.16.082.03.042.028.083-.008.125-.063.052-.117.047-.164-.016-.026.01-.046.037-.059.079-.013.041-.032.07-.058.085.036.058.03.1-.016.125.005 0 .017.006.035.016.018.01.038.024.059.04.02.015.034.023.039.023-.02.046-.05.07-.086.07.031.083-.008.174-.117.273a.359.359 0 01-.098.063c-.044.02-.085.038-.121.05a.255.255 0 00-.063.028.53.53 0 00-.117.144.169.169 0 00-.012.145c.019.047.067.078.145.094l.008.062v.14l.008.063a.774.774 0 01.012.207c-.003.045-.015.07-.036.075-.02.005-.05 0-.086-.016-.042-.02-.09-.135-.148-.344a.521.521 0 00-.094-.187.235.235 0 01-.066.05c-.019.008-.032.01-.04.004a.511.511 0 01-.042-.035.52.52 0 00-.055-.043.415.415 0 00-.137-.038c-.065-.01-.105-.024-.12-.04-.126.094-.201.07-.227-.07-.01.026-.01.061.003.106.014.044.02.069.02.074-.036.068-.094.073-.172.015-.031-.03-.103-.035-.215-.011-.112.023-.186.027-.222.011.005 0 .015.008.03.024.016.01.027.018.032.023a.098.098 0 01-.023.047c-.01.01-.021.014-.032.012a.08.08 0 00-.035 0 .132.132 0 00-.035.012.482.482 0 00-.078.081.389.389 0 01-.07.075.516.516 0 01.043.191c-.003.044-.01.11-.024.195-.013.086-.02.155-.02.207 0 .084.025.18.075.29.05.109.108.184.176.226.036.02.099.034.187.039.089.005.151 0 .188-.016a.192.192 0 00.07-.054.264.264 0 00.039-.09c.01-.04.018-.066.023-.082.037-.099.105-.151.203-.156.063-.006.108.001.137.02.029.017.04.042.035.073a.393.393 0 01-.03.098 1.648 1.648 0 01-.06.113.432.432 0 00-.042.094c-.01.042-.02.1-.028.176a.967.967 0 01-.02.137c.011.005.05.008.118.008 0-.01.004-.028.012-.051a.222.222 0 00.011-.043c.026.042.068.065.125.07.058.006.1-.015.126-.062.01.015.041.055.093.117.052.063.081.115.086.156l.031.102c.016.047.021.08.016.098-.005.018-.031.027-.078.027-.02 0-.034.008-.039.023a.106.106 0 000 .059.524.524 0 00.05.133c.014.023.02.037.02.043.094.171.222.218.383.14 0 .151-.036.235-.11.25-.04.01-.087-.016-.14-.078zm.116 1.765a.626.626 0 01-.015-.125c-.005-.042.013-.098.055-.168a.361.361 0 00.062-.16c-.083-.02-.114-.089-.094-.203.01-.078.086-.182.227-.313.099-.088.13-.213.094-.375a2.161 2.161 0 01-.04-.297 2.66 2.66 0 00-.03-.273c0 .015.024.03.074.043.05.013.08.03.09.05a.473.473 0 00.039-.085.397.397 0 01.046-.094.266.266 0 01.067-.059.77.77 0 01.066-.043.599.599 0 00.07-.05c.037-.03.067-.051.09-.067a.26.26 0 01.094-.035c.04-.008.066.004.082.035.026.032.02.08-.016.145-.036.065-.036.11 0 .137a.582.582 0 00.016-.102.189.189 0 01.047-.117.178.178 0 01.09-.055.111.111 0 01.078.012c.023.013.05.03.082.054a.22.22 0 00.086.043.967.967 0 01.28.172c-.004-.005-.004-.012 0-.02a.082.082 0 01.032-.023.586.586 0 00.043-.023.219.219 0 01.043-.02l.023-.008a.269.269 0 00.078-.007c.016-.006.038 0 .067.015a.53.53 0 01.113.078c.026.021.044.037.054.047a5.687 5.687 0 00.184.117c.024.016.045.04.062.07a.154.154 0 01.02.102c.031.005.094.026.188.062a.28.28 0 00.097.028c.05.008.082.02.098.035a4.829 4.829 0 01-2.742 1.477z"
+    />
+  </svg>
+);
+
+export const FlagIcon = props => (
+  <svg width={9} height={11} fill="none" viewBox="0 0 9 11" {...props}>
+    <path
+      fill="#999"
+      fillRule="evenodd"
+      d="M.917 0H0v11h.917V0zm4.291 1.053C4.406-.41 2 .078 2 .078v5.848s2.807 0 3.208.974c.401.975 3.209 0 3.209 0V1.053s-2.407 1.461-3.209 0z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+export const TrashIcon = props => (
+  <svg width={10} height={12} fill="none" viewBox="0 0 10 12" {...props}>
+    <path
+      fill="#999"
+      fillRule="evenodd"
+      d="M5 0C3 0 2 .895 2 2H.312C.14 2 0 2.15 0 2.333v.334C0 2.85.14 3 .313 3h9.374C9.86 3 10 2.85 10 2.667v-.334C10 2.15 9.86 2 9.687 2H8C8 .895 7 0 5 0zM3 2c0-.736.5-1 2-1s2 .264 2 1H3zM.91 4c-.185 0-.329.168-.312.364l.626 7.333c.015.171.15.303.311.303h6.93a.321.321 0 00.31-.303l.51-7.333C9.304 4.168 9.159 4 8.976 4H.909zM3 5.5a.5.5 0 011 0v5a.5.5 0 01-1 0v-5zM6.5 5a.5.5 0 00-.5.5v5a.5.5 0 001 0v-5a.5.5 0 00-.5-.5z"
+      clipRule="evenodd"
+    />
+  </svg>
+);