Extract Environment

Author: MichaelDeBoey

packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Environment/elements.ts

@@ -0,0 +1,10 @@
+import styled, { css } from 'styled-components';
+
+export const BundlerLink = styled.a.attrs({
+  target: '_blank',
+  rel: 'noreferrer noopener',
+})`
+  ${({ theme }) => css`
+    color: ${theme.templateColor} !important;
+  `}
+`;

packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Environment/index.tsx

@@ -0,0 +1,48 @@
+import Tooltip from '@codesandbox/common/lib/components/Tooltip';
+import getTemplateDefinition from '@codesandbox/common/lib/templates';
+import React, { FunctionComponent } from 'react';
+
+import { useOvermind } from 'app/overmind';
+
+import { Icon, Item, PropertyName, PropertyValue } from '../elements';
+
+import { BundlerLink } from './elements';
+
+export const Environment: FunctionComponent = () => {
+  const {
+    state: {
+      editor: {
+        currentSandbox: { template },
+      },
+    },
+  } = useOvermind();
+  const { url } = getTemplateDefinition(template);
+
+  return (
+    <Item>
+      <PropertyName>
+        Environment{' '}
+        <Tooltip
+          boundary="viewport"
+          content={
+            <>
+              The environment determines how a sandbox is executed, you can find
+              more info{' '}
+              <a href="/docs/environment" target="_blank">
+                here
+              </a>
+              .
+            </>
+          }
+          interactive
+        >
+          <Icon />
+        </Tooltip>
+      </PropertyName>
+
+      <PropertyValue>
+        <BundlerLink href={url}>{template}</BundlerLink>
+      </PropertyValue>
+    </Item>
+  );
+};

packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/elements.ts

@@ -81,15 +81,6 @@ export const Icon = styled(Question)`
   cursor: pointer;
 `;
 
-export const BundlerLink = styled.a.attrs({
-  target: '_blank',
-  rel: 'noreferrer noopener',
-})`
-  ${({ theme }) => css`
-    color: ${theme.templateColor} !important;
-  `}
-`;
-
 export const Explanation = styled.span`
   ${({ theme }) => css`
     display: block;

packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/index.tsx

@@ -1,5 +1,3 @@
-import Tooltip from '@codesandbox/common/lib/components/Tooltip';
-import getTemplateDefinition from '@codesandbox/common/lib/templates';
 import React, { FunctionComponent } from 'react';
 
 import { useOvermind } from 'app/overmind';
@@ -8,17 +6,8 @@ import { Stats } from 'app/pages/common/Stats';
 // import { Alias } from './Alias';
 import { Author } from './Author';
 import { Description } from './Description';
-import {
-  BasicInfo,
-  BundlerLink,
-  Container,
-  Group,
-  Icon,
-  Item,
-  PropertyName,
-  PropertyValue,
-  StatsContainer,
-} from './elements';
+import { BasicInfo, Container, Group, StatsContainer } from './elements';
+import { Environment } from './Environment';
 import { ForkedFrom } from './ForkedFrom';
 import { Frozen } from './Frozen';
 import { Git } from './Git';
@@ -37,12 +26,11 @@ export const Project: FunctionComponent<Props> = ({ editable = false }) => {
     state: {
       editor: {
         currentSandbox,
-        currentSandbox: { author, forkedFromSandbox, git, team, template },
+        currentSandbox: { author, forkedFromSandbox, git, team },
       },
       isPatron,
     },
   } = useOvermind();
-  const { url } = getTemplateDefinition(template);
 
   return (
     <Container>
@@ -76,31 +64,7 @@ export const Project: FunctionComponent<Props> = ({ editable = false }) => {
 
         {forkedFromSandbox && <ForkedFrom />}
 
-        <Item>
-          <PropertyName>
-            Environment{' '}
-            <Tooltip
-              boundary="viewport"
-              content={
-                <>
-                  The environment determines how a sandbox is executed, you can
-                  find more info{' '}
-                  <a href="/docs/environment" target="_blank">
-                    here
-                  </a>
-                  .
-                </>
-              }
-              interactive
-            >
-              <Icon />
-            </Tooltip>
-          </PropertyName>
-
-          <PropertyValue>
-            <BundlerLink href={url}>{template}</BundlerLink>
-          </PropertyValue>
-        </Item>
+        <Environment />
       </Group>
 
       {editable && <SandboxConfig />}