Add the "Clear console" action for the console preview panel (codesandbox#697)

Author: ValentinH

packages/app/src/app/pages/Sandbox/Editor/Content/Preview/DevTools/Console.js

@@ -1,15 +1,29 @@
 import React from 'react';
 import Console from 'app/components/Preview/DevTools/Console';
 
+import VerticalAlign from 'app/src/app/components/Preview/Navigator/VerticalAlign';
+import HorizontalAlign from 'app/src/app/components/Preview/Navigator/HorizontalAlign';
+
 import Navigator from './Navigator';
 
-export default ({ alignRight, alignBottom }) => (
-  <div style={{ height: '100%' }}>
-    <Navigator
-      alignRight={alignRight}
-      alignBottom={alignBottom}
-      title="Console"
-    />
-    <Console.Content />
-  </div>
-);
+export default ({ alignRight, alignBottom }) => {
+  const actions = [
+    ...Console.actions,
+    {
+      title: 'Align To Bottom',
+      onClick: alignBottom,
+      Icon: HorizontalAlign,
+    },
+    {
+      title: 'Align To Right',
+      onClick: alignRight,
+      Icon: VerticalAlign,
+    },
+  ];
+  return (
+    <div style={{ height: '100%' }}>
+      <Navigator title="Console" actions={actions} />
+      <Console.Content />
+    </div>
+  );
+};

packages/app/src/app/pages/Sandbox/Editor/Content/Preview/DevTools/Navigator.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import VerticalAlign from 'app/src/app/components/Preview/Navigator/VerticalAlign';
-import HorizontalAlign from 'app/src/app/components/Preview/Navigator/HorizontalAlign';
+import Tooltip from 'common/components/Tooltip';
 
 const Container = styled.div`
   display: flex;
@@ -24,7 +23,7 @@ const Title = styled.div`
   flex: 1;
 `;
 
-const Icons = styled.div`
+const Actions = styled.div`
   z-index: 20;
   svg {
     transition: 0.3s ease color;
@@ -37,12 +36,15 @@ const Icons = styled.div`
   }
 `;
 
-export default ({ title, alignBottom, alignRight }) => (
+export default ({ title, actions }) => (
   <Container className="flying-container-handler">
     <Title>{title}</Title>
-    <Icons>
-      <HorizontalAlign onClick={alignBottom} />
-      <VerticalAlign onClick={alignRight} />
-    </Icons>
+    <Actions>
+      {actions.map(({ title: actionTitle, onClick, Icon }) => (
+        <Tooltip title={actionTitle} key={actionTitle}>
+          <Icon onClick={onClick} key={actionTitle} />
+        </Tooltip>
+      ))}
+    </Actions>
   </Container>
 );

packages/app/src/app/pages/Sandbox/Editor/Content/Preview/DevTools/Tests.js

@@ -1,15 +1,28 @@
 import React from 'react';
 import Tests from 'app/components/Preview/DevTools/Tests';
 
+import VerticalAlign from 'app/src/app/components/Preview/Navigator/VerticalAlign';
+import HorizontalAlign from 'app/src/app/components/Preview/Navigator/HorizontalAlign';
+
 import Navigator from './Navigator';
 
-export default ({ alignRight, alignBottom }) => (
-  <div>
-    <Navigator
-      alignRight={alignRight}
-      alignBottom={alignBottom}
-      title="Tests"
-    />
-    <Tests.Content standalone />
-  </div>
-);
+export default ({ alignRight, alignBottom }) => {
+  const actions = [
+    {
+      title: 'Align To Bottom',
+      onClick: alignBottom,
+      Icon: HorizontalAlign,
+    },
+    {
+      title: 'Align To Right',
+      onClick: alignRight,
+      Icon: VerticalAlign,
+    },
+  ];
+  return (
+    <div>
+      <Navigator title="Tests" actions={actions} />
+      <Tests.Content standalone />
+    </div>
+  );
+};