feat: add file image previews (#212)

* add file image previews

* simple styling improvements

Author: kenjinp

src/shared/App.less

@@ -3,6 +3,25 @@
 @import 'styles/close-button.less';
 @import 'styles/project-banner.less';
 
+.resource-view {
+  padding: 2em 0;
+}
+
+.project-view {
+}
+
+.projects-view {
+  max-width: @maxConstrainedItemWidth;
+  margin: 0 auto;
+  padding: 2em 0;
+}
+
+.orgs-view {
+  max-width: @maxConstrainedItemWidth;
+  margin: 0 auto;
+  padding: 2em 0;
+}
+
 .ant-pagination-prev,
 .ant-pagination-jump-prev,
 .ant-pagination-jump-next,

src/shared/components/Animations/ListItem.stories.tsx

@@ -16,19 +16,44 @@ const exampleItems = [
   {
     label: 'nexus',
     projectNumber: 1200,
+    avatar: {
+      src:
+        'https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Morocco_Africa_Flickr_Rosino_December_2005_84514010.jpg/800px-Morocco_Africa_Flickr_Rosino_December_2005_84514010.jpg',
+    },
     description:
       "Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should. You're a very talented young man, with your own clever thoughts and ideas. Do you need a manager? They're using our own satellites against us. And the clock is ticking.",
   },
-  { label: 'bbp', projectNumber: 300, deprecated: true, action: true },
-  { label: 'hbp', projectNumber: 1 },
+  {
+    label: 'bbp',
+    projectNumber: 300,
+    deprecated: true,
+    action: true,
+    avatar: {
+      src: 'https://i.gifer.com/embedded/download/7U30.gif',
+    },
+  },
+  {
+    label: 'hbp',
+    projectNumber: 1,
+    avatar: {
+      src:
+        'https://upload.wikimedia.org/wikipedia/commons/3/34/Gusev_Crater%2C_Mars.jpg',
+    },
+  },
   {
     label: 'nasa',
     projectNumber: 912839,
     description:
       "God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs. Hey, you know how I'm, like, always trying to save the planet? Here's my chance. You really think you can fly that thing? Did he just throw my cat out of the window?",
   },
   { label: 'tesla', projectNumber: 3, deprecated: true },
-  { label: 'rolex', projectNumber: 3424 },
+  {
+    label: 'rolex',
+    projectNumber: 3424,
+    avatar: {
+      src: 'https://cdn.jsdelivr.net/emojione/assets/3.1/png/32/1f31e.png',
+    },
+  },
 ];
 
 storiesOf('Components/ListItem', module)
@@ -48,6 +73,7 @@ storiesOf('Components/ListItem', module)
           <ul style={{ margin: 0, padding: 0 }}>
             {exampleItems.map((element, index) => {
               const {
+                avatar,
                 label,
                 action: elementAction,
                 projectNumber,
@@ -57,6 +83,7 @@ storiesOf('Components/ListItem', module)
               return (
                 <ListItem
                   id={`element-${index}`}
+                  avatar={avatar}
                   label={label}
                   onClick={action('element-clicked')}
                   details={

src/shared/components/Animations/ListItem.tsx

@@ -1,11 +1,13 @@
 import * as React from 'react';
 import './list-item.less';
+import useMeasure from '../hooks/useMeasure';
 
 export interface ListItemProps {
   label: React.ReactComponentElement<any> | string;
   id: string;
   description?: string;
   details?: React.ReactComponentElement<any> | null;
+  avatar?: { src: string } | null;
   action?: React.ReactComponentElement<any> | null;
   onClick?: (id: string, event: React.MouseEvent) => void;
 }
@@ -17,10 +19,13 @@ const ListItem: React.FunctionComponent<ListItemProps> = ({
   onClick,
   details,
   action,
+  avatar,
 }) => {
+  const [bind, bounds] = useMeasure();
+  const avatarClassSwitch = bounds && bounds.height > 100 ? `-big` : `-small`;
   return (
     <li
-      className="list-item -compact"
+      className={`list-item -compact ${avatar ? avatarClassSwitch : ''}`}
       tabIndex={1}
       onClick={
         onClick
@@ -29,6 +34,17 @@ const ListItem: React.FunctionComponent<ListItemProps> = ({
       }
       key={id}
     >
+      {avatar && (
+        // @ts-ignore can't bothered to figure out which HTMLELEMENT type I need for this
+        <div {...bind} className={`avatar ${avatarClassSwitch}`}>
+          <div
+            className="wrapper"
+            style={{ backgroundImage: `url(${avatar.src})` }}
+          >
+            <img src={avatar.src} />
+          </div>
+        </div>
+      )}
       <div className="content">
         <span className="label">{label}</span>
         {details && <div className="details">{details}</div>}

src/shared/components/Animations/list-item.less

@@ -14,6 +14,8 @@
 
 .list-item {
   .listItemLike();
+  display: flex;
+  flex-direction: column;
   &:focus,
   &:focus-within {
     background-color: fade(@primary-color, 5%);
@@ -24,10 +26,33 @@
   &:hover > .content > .actions {
     display: block;
   }
+  > .avatar {
+    background-color: @header-background-color;
+    margin-bottom: @default-pad;
+    border-radius: @border-radius-base;
+  }
+  > .avatar.-small {
+    margin: 0;
+    width: fit-content;
+    height: 100%;
+    margin: 0 1em 0 0;
+  }
+  > .avatar > .wrapper {
+    background-size: contain;
+    background-position: 50%;
+    background-repeat: no-repeat;
+    max-height: 260px;
+  }
+  > .avatar > .wrapper > img {
+    visibility: hidden;
+    max-height: 100%;
+    max-width: 100%;
+  }
   > .content {
     display: flex;
     justify-content: space-between;
     height: 24px;
+    flex-grow: 1;
   }
   > .content > .label {
     .ellipsis();
@@ -51,4 +76,7 @@
     z-index: 1;
     .ellipsis();
   }
+  &.-small {
+    flex-direction: row;
+  }
 }

src/shared/components/Workspace/Queries/QueriesBoard.tsx

@@ -10,29 +10,16 @@ interface QueriesComponentProps extends QueriesContainerProps {}
 const QueriesComponent: React.FunctionComponent<
   QueriesComponentProps
 > = props => {
-  const {
-    lists,
-    pageSize,
-    queryResources,
-    goToResource,
-    goToQuery,
-    updateList,
-    deleteList,
-    cloneList,
-    createList,
-  } = props;
+  const { lists, updateList, deleteList, cloneList, createList } = props;
   return (
     <div className="queries-board">
       <div className="wrapper">
         {lists.map((list: List, index: number) => {
           return (
             <Query
               {...{
+                ...props,
                 list,
-                pageSize,
-                queryResources,
-                goToResource,
-                goToQuery,
                 updateList: (list: List) => updateList(index, list),
                 deleteList: () => deleteList(index),
                 cloneList: (list: List) => cloneList(index, list),

src/shared/components/Workspace/Queries/QueriesContainer.tsx

@@ -5,6 +5,7 @@ import {
   Project,
   Resource,
   PaginationSettings,
+  NexusFile,
 } from '@bbp/nexus-sdk';
 import { RootState } from '../../../store/reducers';
 import { List } from '../../../store/reducers/lists';
@@ -36,6 +37,7 @@ export interface QueriesContainerProps {
   deleteList: (listIndex: number) => void;
   cloneList: (listIndex: number, list: List) => void;
   createList: () => void;
+  getFilePreview: (selfUrl: string) => Promise<NexusFile>;
   queryResources: (
     id: string,
     paginationSettings: PaginationSettings,
@@ -103,6 +105,7 @@ const mapDispatchToProps = (
     dispatch(cloneList(makeOrgProjectFilterKey(org, project), listIndex, list)),
   initialize: () =>
     dispatch(initializeProjectList(makeOrgProjectFilterKey(org, project))),
+  getFilePreview: (selfUrl: string) => NexusFile.getSelf(selfUrl, true),
   queryResources: (
     id: string,
     paginationSettings: PaginationSettings,

src/shared/components/Workspace/Queries/Query/QueryComponent.tsx

@@ -4,7 +4,7 @@ import './query-component.less';
 import InfiniteScroll from '../../../Animations/InfiniteScroll';
 import ListItem from '../../../Animations/ListItem';
 import { FetchableState } from '../../../../store/reducers/utils';
-import { PaginatedList, Resource } from '@bbp/nexus-sdk';
+import { PaginatedList, Resource, NexusFile } from '@bbp/nexus-sdk';
 import ResourceMetadataCard from '../../../Resources/MetadataCard';
 import { Popover, Icon, Tooltip, Button, Spin } from 'antd';
 import TypesIconList from '../../../Types/TypesIcon';
@@ -18,6 +18,7 @@ const MOUSE_ENTER_DELAY = 0.5;
 interface QueryComponentProps {
   list: List;
   goToResource: (resource: Resource) => void;
+  getFilePreview: (selfUrl: string) => Promise<NexusFile>;
   goToQuery: (list: List) => void;
   next: VoidFunction;
   updateList: (list: List) => void;
@@ -40,6 +41,7 @@ const QueryComponent: React.FunctionComponent<QueryComponentProps> = props => {
     updateList,
     deleteList,
     cloneList,
+    getFilePreview,
     next,
     showSpinner,
   } = props;
@@ -95,6 +97,7 @@ const QueryComponent: React.FunctionComponent<QueryComponentProps> = props => {
   };
   const total =
     (fetchablePaginatedList.data && fetchablePaginatedList.data.total) || 0;
+
   return (
     <div className="query-component">
       <h3 className="header">

src/shared/components/Workspace/Queries/Query/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PaginationSettings, Resource } from '@bbp/nexus-sdk';
+import { PaginationSettings, Resource, NexusFile } from '@bbp/nexus-sdk';
 import { FilterQuery } from '../../../../store/actions/queryResource';
 import { List } from '../../../../store/reducers/lists';
 import QueryComponent from './QueryComponent';
@@ -12,6 +12,7 @@ interface QueryContainerProps {
   cloneList: (list: List) => void;
   goToResource: (resource: Resource) => void;
   goToQuery: (list: List) => void;
+  getFilePreview: (selfUrl: string) => Promise<NexusFile>;
   queryResources: (
     id: string,
     paginationSettings: PaginationSettings,

src/shared/store/actions/project.ts

@@ -153,10 +153,10 @@ const pollProjectCreated = async (project: Project): Promise<void> => {
       // TODO: maybe do something if not 404?
       await asyncTimeout(pollingTimeInMilliseconds);
       iterations += 1;
-      if (iterations >= shortCircuitIterationCount) {
+      if (iterations > shortCircuitIterationCount) {
         projectReady = true;
         notification.warning({
-          message: `Project ${project.label} is taking too long to set up`,
+          message: `Project is taking too long to set up`,
           description:
             'This process is taking longer than usual. You might have to grab a coffee and come back later.',
           duration: 0,

src/shared/views/Home.tsx

@@ -235,7 +235,7 @@ const Home: React.FunctionComponent<HomeProps> = ({
   }
 
   return (
-    <>
+    <div className="projects-view">
       <h1 style={{ marginBottom: 0, marginRight: 8 }}>{activeOrg.label}</h1>
       {activeOrg.description && <p>{activeOrg.description}</p>}
       <div style={{ display: 'flex', alignItems: 'center', marginBottom: 20 }}>
@@ -312,7 +312,7 @@ const Home: React.FunctionComponent<HomeProps> = ({
           />
         )}
       </Drawer>
-    </>
+    </div>
   );
 };