🔨 Switch VSCodePlaceholder to use useOvermind (codesandbox#3118)

* 🔨 Switch VSCodePlaceholder to use useOvermind

* Fix types

Author: MichaelDeBoey

packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/index.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from 'react';
 
 import { PreferenceContainer, SubContainer, Title } from '../elements';
-import VSCodePlaceholder from '../VSCodePlaceholder';
+import { VSCodePlaceholder } from '../VSCodePlaceholder';
 
 import { EditorTheme } from './EditorTheme';
 

packages/app/src/app/pages/common/Modals/PreferencesModal/EditorPageSettings/EditorSettings/index.tsx

@@ -7,9 +7,8 @@ import {
   PreferenceContainer,
   PaddedPreference,
   SubDescription,
-  Rule,
 } from '../../elements';
-import VSCodePlaceholder from '../../VSCodePlaceholder';
+import { VSCodePlaceholder } from '../../VSCodePlaceholder';
 
 const isSafari: boolean = /^((?!chrome|android).)*safari/i.test(
   navigator.userAgent
@@ -36,50 +35,8 @@ export const EditorSettings: React.FC = () => {
       <Title>Editor</Title>
 
       <SubContainer>
-        <VSCodePlaceholder>
-          <PreferenceContainer>
-            <PaddedPreference
-              title="Use CodeMirror"
-              type="boolean"
-              {...bindValue('codeMirror')}
-            />
-            <SubDescription>
-              Use CodeMirror instead of Monaco editor.
-            </SubDescription>
-            <Rule />
-            <PaddedPreference
-              title="Automatic Type Acquisition"
-              type="boolean"
-              {...bindValue('autoDownloadTypes')}
-            />
-            <SubDescription>
-              Automatically download type definitions for dependencies.
-            </SubDescription>
-            <Rule />
-            <PaddedPreference
-              title="ESLint"
-              type="boolean"
-              tooltip="Made possible by ESLint"
-              {...bindValue('lintEnabled')}
-            />
-            <SubDescription>
-              Whether linting as you type should be enabled.
-            </SubDescription>
-            <Rule />
-            <VSCodePlaceholder hideTitle>
-              <PaddedPreference
-                title="Prettify On Save"
-                type="boolean"
-                tooltip="Made possible by Prettier"
-                {...bindValue('prettifyOnSaveEnabled')}
-              />
-              <SubDescription>
-                Format all code on save with prettier.
-              </SubDescription>
-              <Rule />
-            </VSCodePlaceholder>
-          </PreferenceContainer>
-        </VSCodePlaceholder>
+        <VSCodePlaceholder />
+
         {/* {Vim mode does not work on FF or Safari */}
         <PreferenceContainer disabled={isSafari || isFF}>
           <PaddedPreference

packages/app/src/app/pages/common/Modals/PreferencesModal/KeyMapping/elements.js

@@ -0,0 +1,5 @@
+import React, { FunctionComponent } from 'react';
+
+import { VSCodePlaceholder } from '../VSCodePlaceholder';
+
+export const KeyMapping: FunctionComponent = () => <VSCodePlaceholder />;

packages/app/src/app/pages/common/Modals/PreferencesModal/KeyMapping/index.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  margin-top: 1rem;
+`;

packages/app/src/app/pages/common/Modals/PreferencesModal/KeyMapping/index.tsx

@@ -0,0 +1,27 @@
+import { Button } from '@codesandbox/common/lib/components/Button';
+import React, { FunctionComponent } from 'react';
+
+import { useOvermind } from 'app/overmind';
+
+import { Container } from './elements';
+
+export const OpenVSCodeSettingsButton: FunctionComponent = () => {
+  const {
+    actions: { modalClosed },
+    effects: { vscode },
+  } = useOvermind();
+
+  const openCommand = () => {
+    vscode
+      .runCommand('workbench.action.openSettings2')
+      .then(() => modalClosed());
+  };
+
+  return (
+    <Container>
+      <Button onClick={openCommand} small>
+        Open VSCode Settings
+      </Button>
+    </Container>
+  );
+};

packages/app/src/app/pages/common/Modals/PreferencesModal/VSCodePlaceholder.tsx

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  font-size: 0.875rem;
+  font-style: italic;
+  color: rgba(255, 255, 255, 0.5);
+  line-height: 1.4;
+  font-weight: 500;
+  margin-bottom: 1.5rem;
+`;

packages/app/src/app/pages/common/Modals/PreferencesModal/VSCodePlaceholder/OpenVSCodeSettingsButton/elements.ts

@@ -0,0 +1,24 @@
+import { editorUrl } from '@codesandbox/common/lib/utils/url-generator';
+import React, { FunctionComponent } from 'react';
+import { Route } from 'react-router-dom';
+
+import { Container } from './elements';
+import { OpenVSCodeSettingsButton } from './OpenVSCodeSettingsButton';
+
+type Props = {
+  hideTitle?: boolean;
+};
+export const VSCodePlaceholder: FunctionComponent<Props> = ({
+  hideTitle = false,
+}) =>
+  hideTitle ? null : (
+    <Container>
+      Some options are disabled because they are handled by VSCode. You can open
+      the settings of VSCode by pressing {"'"}
+      CTRL/CMD + ,{"'"}.
+      <Route
+        path={editorUrl()}
+        render={({ match }) => match && <OpenVSCodeSettingsButton />}
+      />
+    </Container>
+  );