[INS-901] Empty state for Dashboard (#5157)

* [INS-901] Empty state for Dashboard

* add typings

Co-authored-by: Mark Kim <mark.kim@konghq.com>

packages/insomnia/src/ui/components/panes/wrapper-home-empty-state-pane.tsx

@@ -0,0 +1,110 @@
+import { Button, Dropdown, DropdownItem } from 'insomnia-components';
+import React, { FC } from 'react';
+import styled from 'styled-components';
+
+import { superFaint, ultraFaint } from '../../css/css-in-js';
+
+const Wrapper = styled.div({
+  maxHeight: '100%',
+  height: 'calc(100% - 4 * var(--padding-xl))',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: 'var(--padding-xl) var(--padding-xl)',
+  textAlign: 'center',
+  ...superFaint,
+});
+
+const Divider = styled.div({
+  color: 'var(--color-font)',
+  maxWidth: 500,
+  width: '100%',
+  margin: 'var(--padding-md) 0',
+  display: 'flex',
+  alignItems: 'center',
+  fontSize: 'var(--text-sm)',
+  '&::before': {
+    content: '""',
+    height: '1px',
+    backgroundColor: 'var(--color-font)',
+    flexGrow: '1',
+    ...ultraFaint,
+    marginRight: '1rem',
+  },
+  '&::after': {
+    content: '""',
+    height: '1px',
+    backgroundColor: 'var(--color-font)',
+    flexGrow: '1',
+    ...ultraFaint,
+    marginLeft: '1rem',
+  },
+});
+
+const Title = styled.div({
+  fontWeight: 'bold',
+});
+
+interface Props {
+  createRequestCollection: () => void;
+  createDesignDocument: () => void;
+  importFromFile: () => void;
+  importFromURL: () => void;
+  importFromClipboard: () => void;
+  importFromGit: () => void;
+}
+
+export const WrapperHomeEmptyStatePane: FC<Props> = ({ createRequestCollection, createDesignDocument, importFromFile, importFromURL, importFromClipboard, importFromGit }) => {
+  return (
+    <Wrapper>
+      <Title>This is an empty project, to get started create your first resource:</Title>
+      <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', marginTop: 'var(--padding-md)' }}>
+        <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', marginTop: 'var(--padding-md)', gap: 'var(--padding-md)' }}>
+          <Button
+            onClick={createRequestCollection}
+          >
+            New Collection
+          </Button>
+          <Button
+            onClick={createDesignDocument}
+          >
+            New Document
+          </Button>
+        </div>
+        <Divider>or</Divider>
+        <Dropdown
+          style={{ alignSelf: 'stretch' }}
+          renderButton={<Button style={{ width: '100%' }}>
+            Import From <i className="fa fa-caret-down pad-left-sm" />
+          </Button>}
+        >
+          <DropdownItem
+            icon={<i className="fa fa-plus" />}
+            onClick={importFromFile}
+          >
+            File
+          </DropdownItem>
+          <DropdownItem
+            icon={<i className="fa fa-link" />}
+            onClick={importFromURL}
+          >
+            URL
+          </DropdownItem>
+          <DropdownItem
+            icon={<i className="fa fa-clipboard" />}
+            onClick={importFromClipboard}
+          >
+            Clipboard
+          </DropdownItem>
+          <DropdownItem
+            icon={<i className="fa fa-code-fork" />}
+            onClick={importFromGit}
+          >
+            Git Clone
+          </DropdownItem>
+        </Dropdown>
+      </div>
+    </Wrapper>
+  );
+};

packages/insomnia/src/ui/components/wrapper-home.tsx

@@ -41,6 +41,7 @@ import { RemoteWorkspacesDropdown } from './dropdowns/remote-workspaces-dropdown
 import { KeydownBinder } from './keydown-binder';
 import { showPrompt } from './modals';
 import { PageLayout } from './page-layout';
+import { WrapperHomeEmptyStatePane } from './panes/wrapper-home-empty-state-pane';
 import { WorkspaceCard, WorkspaceCardProps } from './workspace-card';
 
 const CreateButton = styled(Button)({
@@ -206,7 +207,7 @@ const WrapperHome: FC<Props> = (({ vcs }) => {
     handleCreateWorkspace({
       scope: WorkspaceScopeKeys.collection,
       onCreate: async (workspace: Workspace) => {
-      // Don't mark for sync if not logged in at the time of creation
+        // Don't mark for sync if not logged in at the time of creation
         if (isLoggedIn && vcs && isRemoteProject(activeProject)) {
           await initializeLocalBackendProjectAndMarkForSync({ vcs: vcs.newInstance(), workspace });
         }
@@ -342,6 +343,16 @@ const WrapperHome: FC<Props> = (({ vcs }) => {
                 No documents found for <strong>{filter}</strong>
               </p>
             )}
+            {!filter && !cards.length && (
+              <WrapperHomeEmptyStatePane
+                createRequestCollection={createRequestCollection}
+                createDesignDocument={createDesignDocument}
+                importFromFile={importFromFile}
+                importFromURL={importFromURL}
+                importFromClipboard={importFromClipboard}
+                importFromGit={importFromGit}
+              />
+            )}
           </div>
           <div className="document-listing__footer vertically-center">
             <a className="made-with-love" href="https://konghq.com/">