Move "Empty Trash" to header

There was a visual glitch with scroll bars when there's a subheader due to my react-virtualized code that assumes to have the full height. This is a quick fix until we find a better way.

Author: CompuIves

packages/app/src/app/pages/Dashboard/Content/Sandboxes/Actions/elements.ts

@@ -0,0 +1,36 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  display: flex;
+  align-items: center;
+  font-size: 0.875rem;
+  color: rgba(255, 255, 255, 0.8);
+  margin-right: 3rem;
+`;
+
+export const VanillaButton = styled.button`
+  transition: 0.3s ease color;
+  background-color: transparent;
+  display: flex;
+  border: 0;
+  outline: 0;
+  padding: 0;
+  margin: 0;
+  color: rgba(255, 255, 255, 0.8);
+  vertical-align: middle;
+  align-items: center;
+
+  cursor: pointer;
+
+  &:focus {
+    color: white;
+  }
+
+  &:hover {
+    color: white;
+  }
+
+  svg {
+    margin-left: 0.5rem;
+  }
+`;

packages/app/src/app/pages/Dashboard/Content/Sandboxes/Actions/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { Container, VanillaButton } from './elements';
+
+export interface IAction {
+  name: string;
+  run: () => void;
+  Icon: React.FunctionComponentElement<any>;
+}
+
+interface Props {
+  actions: IAction[];
+}
+
+export function DashboardActions({ actions }: Props) {
+  return (
+    <Container>
+      {actions.map(action => (
+        <VanillaButton key={action.name} onClick={() => action.run()}>
+          {action.name} {action.Icon}
+        </VanillaButton>
+      ))}
+    </Container>
+  );
+}

packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/elements.js

@@ -1,11 +1,8 @@
 import styled from 'styled-components';
 
 export const Container = styled.div`
-  position: absolute;
-  right: 2rem;
-  top: 0;
-  bottom: 0;
   display: flex;
+  margin-right: 2rem;
   align-items: center;
 
   @media (max-width: 1000px) {

packages/app/src/app/pages/Dashboard/Content/Sandboxes/index.js

@@ -5,6 +5,7 @@ import SandboxGrid from '../SandboxGrid';
 import Filters from './Filters';
 
 import { Container, HeaderContainer, HeaderTitle } from '../elements';
+import { DashboardActions } from './Actions';
 
 // eslint-disable-next-line react/prefer-stateless-function
 class Content extends React.Component {
@@ -19,6 +20,7 @@ class Content extends React.Component {
       hideFilters,
       possibleTemplates = [],
       page,
+      actions = [],
     } = this.props;
 
     return (
@@ -40,6 +42,7 @@ class Content extends React.Component {
                 </span>
               )}
           </HeaderTitle>
+          <DashboardActions actions={actions} />
           <Filters
             hideOrder={hideOrder}
             hideFilters={hideFilters}

packages/app/src/app/pages/Dashboard/Content/elements.js

@@ -9,6 +9,7 @@ export const Container = styled.div`
 
 export const HeaderContainer = styled.div`
   position: relative;
+  display: flex;
   font-size: 1.25rem;
   color: white;
 
@@ -33,6 +34,8 @@ export const Description = styled.p`
 
 export const HeaderTitle = styled.div`
   display: flex;
+  flex: 1;
+  width: 100%;
   vertical-align: middle;
   align-items: center;
 `;

packages/app/src/app/pages/Dashboard/Content/routes/DeletedSandboxes/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { inject, Observer } from 'mobx-react';
 import { uniq } from 'lodash-es';
 import { Query } from 'react-apollo';
-import { Button } from 'common/lib/components/Button';
+import RemoveIcon from 'react-icons/lib/md/highlight-remove';
 
 import Sandboxes from '../../Sandboxes';
 
@@ -38,32 +38,27 @@ const DeletedSandboxes = ({ store, signals }) => {
               sandboxIds: orderedSandboxes.map(i => i.id),
             });
 
-            const DeleteButton = () =>
-              orderedSandboxes.length ? (
-                <Button
-                  css={`
-                    width: 200px;
-                    margin: 20px 0;
-                  `}
-                  small
-                  danger
-                  onClick={() => {
-                    signals.modalOpened({
-                      modal: 'emptyTrash',
-                    });
-                  }}
-                >
-                  Empty Trash
-                </Button>
-              ) : null;
-
             return (
               <Sandboxes
                 isLoading={loading}
                 Header="Deleted Sandboxes"
-                SubHeader={<DeleteButton />}
                 sandboxes={orderedSandboxes}
                 possibleTemplates={possibleTemplates}
+                actions={
+                  orderedSandboxes.length
+                    ? [
+                        {
+                          name: 'Empty Trash',
+                          Icon: <RemoveIcon />,
+                          run: () => {
+                            signals.modalOpened({
+                              modal: 'emptyTrash',
+                            });
+                          },
+                        },
+                      ]
+                    : []
+                }
               />
             );
           }}