From 01fe2ae79ded831114729f6693d5d0a95e6d3dfd Mon Sep 17 00:00:00 2001
From: Jared <jaredkobos@gmail.com>
Date: Mon, 4 Mar 2019 17:07:35 -0500
Subject: [PATCH] CLAPPS: Add Images subtab (#4599)

* WIP

* WIP 2

* Fix styling

* Fix StackScripts to use new SelectImagePanel

* Fix tab labels

* Add empty state for private images

* Review feedback

- Combine renderPublicImages and renderOlderPublicImages into a single function
- Use <span> instead of <Typography> for placeholder message
- Only pass needed props to FromImageContent

* Pass fewer props to other FromImagesContent instance

* Clean up post-rebase
---
 .../linodes/LinodesCreate/CALinodeCreate.tsx  |  47 ++++-
 src/features/linodes/LinodesCreate/Panel.tsx  |  48 +++++
 .../linodes/LinodesCreate/PrivateImages.tsx   |  51 ++++++
 .../linodes/LinodesCreate/PublicImages.tsx    |  89 ++++++++++
 .../LinodesCreate/SelectImagePanel.tsx        | 165 ++++--------------
 .../TabbedContent/FromImageContent.tsx        |  28 ++-
 .../TabbedContent/FromStackScriptContent.tsx  |   2 +-
 .../linodeCreate/linodeCreate.reducer.ts      |   2 -
 8 files changed, 287 insertions(+), 145 deletions(-)
 create mode 100644 src/features/linodes/LinodesCreate/Panel.tsx
 create mode 100644 src/features/linodes/LinodesCreate/PrivateImages.tsx
 create mode 100644 src/features/linodes/LinodesCreate/PublicImages.tsx

diff --git a/src/features/linodes/LinodesCreate/CALinodeCreate.tsx b/src/features/linodes/LinodesCreate/CALinodeCreate.tsx
index 1f05f8d80bd..d243849e532 100644
--- a/src/features/linodes/LinodesCreate/CALinodeCreate.tsx
+++ b/src/features/linodes/LinodesCreate/CALinodeCreate.tsx
@@ -93,11 +93,21 @@ export class LinodeCreate extends React.PureComponent<
           linodesData,
           linodesError,
           linodesLoading,
+          handleSelectUDFs,
+          selectedUDFs,
+          updateStackScript,
+          availableStackScriptImages,
+          availableUserDefinedFields,
+          selectedStackScriptID,
+          selectedDiskSize,
+          selectedStackScriptUsername,
+          selectedStackScriptLabel,
+          selectedLinodeID,
           ...rest
         } = this.props;
         return (
           <FromImageContent
-            publicOnly
+            variant="public"
             imagePanelTitle="Choose a Distribution"
             {...rest}
           />
@@ -136,14 +146,45 @@ export class LinodeCreate extends React.PureComponent<
 
   myImagesTabs = (): Tab[] => [
     {
-      title: 'Backups and My Images',
+      title: 'Images',
+      type: 'fromImage',
+      render: () => {
+        const {
+          history,
+          linodesData,
+          linodesError,
+          linodesLoading,
+          handleSelectUDFs,
+          selectedUDFs,
+          updateStackScript,
+          availableStackScriptImages,
+          availableUserDefinedFields,
+          selectedStackScriptID,
+          selectedDiskSize,
+          selectedStackScriptUsername,
+          selectedStackScriptLabel,
+          selectedLinodeID,
+          ...rest
+        } = this.props;
+
+        return (
+          <FromImageContent
+            variant={'private'}
+            imagePanelTitle="Choose an Image"
+            {...rest}
+          />
+        );
+      }
+    },
+    {
+      title: 'Backups',
       type: 'fromBackup',
       render: () => {
         return <React.Fragment />;
       }
     },
     {
-      title: 'Clone from Existing Linode',
+      title: 'Clone Linode',
       type: 'fromLinode',
       render: () => {
         /**
diff --git a/src/features/linodes/LinodesCreate/Panel.tsx b/src/features/linodes/LinodesCreate/Panel.tsx
new file mode 100644
index 00000000000..7c85cece145
--- /dev/null
+++ b/src/features/linodes/LinodesCreate/Panel.tsx
@@ -0,0 +1,48 @@
+import * as React from 'react';
+
+import {
+  StyleRulesCallback,
+  withStyles,
+  WithStyles
+} from 'src/components/core/styles';
+
+import Paper from 'src/components/core/Paper';
+import Typography from 'src/components/core/Typography';
+import Notice from 'src/components/Notice';
+
+type ClassNames = 'root' | 'flatImagePanel';
+
+const styles: StyleRulesCallback<ClassNames> = theme => ({
+  flatImagePanel: {
+    padding: theme.spacing.unit * 3
+  },
+  root: {}
+});
+
+interface Props {
+  children: React.ReactElement;
+  error?: string;
+  title?: string;
+}
+
+type CombinedProps = Props & WithStyles<ClassNames>;
+
+const Panel: React.StatelessComponent<CombinedProps> = (props) => {
+  const { classes, children, error, title } = props;
+  return (
+    <Paper
+      className={classes.flatImagePanel}
+      data-qa-tp="Select Image"
+    >
+      {error && <Notice text={error} error />}
+      <Typography role="header" variant="h2" data-qa-tp="Select Image">
+        {title || 'Select an Image'}
+      </Typography>
+      {children}
+    </Paper>
+  )
+}
+
+const styled = withStyles(styles);
+
+export default styled(Panel);
\ No newline at end of file
diff --git a/src/features/linodes/LinodesCreate/PrivateImages.tsx b/src/features/linodes/LinodesCreate/PrivateImages.tsx
new file mode 100644
index 00000000000..1ba1de7edf4
--- /dev/null
+++ b/src/features/linodes/LinodesCreate/PrivateImages.tsx
@@ -0,0 +1,51 @@
+import * as React from 'react';
+
+import {
+  StyleRulesCallback,
+  withStyles,
+  WithStyles
+} from 'src/components/core/styles';
+import Grid from 'src/components/Grid';
+import SelectionCard from 'src/components/SelectionCard';
+
+type ClassNames = 'root' | 'flatImagePanelSelections';
+
+const styles: StyleRulesCallback<ClassNames> = theme => ({
+  flatImagePanelSelections: {
+    marginTop: theme.spacing.unit * 2,
+    padding: `${theme.spacing.unit}px 0`
+  },
+  root: {}
+});
+interface Props {
+  images: Linode.Image[];
+  disabled?: boolean;
+  selectedImageID?: string;
+  handleSelection: (id: string) => void;
+}
+
+type CombinedProps = Props & WithStyles<ClassNames>;
+
+const PrivateImages: React.StatelessComponent<CombinedProps> = (props) => {
+  const { classes, disabled, handleSelection, images, selectedImageID } = props;
+  return (
+    <Grid container className={classes.flatImagePanelSelections} >
+      {images &&
+        images.map((image: Linode.Image, idx: number) => (
+          <SelectionCard
+            key={idx}
+            checked={image.id === String(selectedImageID)}
+            onClick={() => handleSelection(image.id)}
+            renderIcon={() => <span className="fl-tux" />}
+            heading={image.label as string}
+            subheadings={[image.description as string]}
+            disabled={disabled}
+          />
+      ))}
+    </Grid>
+  )
+}
+
+const styled = withStyles(styles);
+
+export default styled(PrivateImages);
\ No newline at end of file
diff --git a/src/features/linodes/LinodesCreate/PublicImages.tsx b/src/features/linodes/LinodesCreate/PublicImages.tsx
new file mode 100644
index 00000000000..a6d4335b22c
--- /dev/null
+++ b/src/features/linodes/LinodesCreate/PublicImages.tsx
@@ -0,0 +1,89 @@
+import * as React from 'react';
+
+import {
+  StyleRulesCallback,
+  withStyles,
+  WithStyles
+} from 'src/components/core/styles';
+import Grid from 'src/components/Grid';
+import SelectionCard from 'src/components/SelectionCard';
+import ShowMoreExpansion from 'src/components/ShowMoreExpansion';
+
+type ClassNames = 'root' | 'flatImagePanelSelections';
+
+const styles: StyleRulesCallback<ClassNames> = theme => ({
+  flatImagePanelSelections: {
+    marginTop: theme.spacing.unit * 2,
+    padding: `${theme.spacing.unit}px 0`
+  },
+  root: {}
+});
+interface Props {
+  images: Linode.Image[];
+  oldImages: Linode.Image[];
+  selectedImageID?: string;
+  disabled?: boolean;
+  handleSelection: (id: string) => void;
+}
+
+type CombinedProps = Props & WithStyles<ClassNames>;
+
+const distroIcons = {
+  Arch: 'archlinux',
+  CentOS: 'centos',
+  CoreOS: 'coreos',
+  Debian: 'debian',
+  Fedora: 'fedora',
+  Gentoo: 'gentoo',
+  openSUSE: 'opensuse',
+  Slackware: 'slackware',
+  Ubuntu: 'ubuntu'
+};
+
+const PublicImages: React.StatelessComponent<CombinedProps> = props => {
+  const {
+    classes,
+    disabled,
+    images,
+    handleSelection,
+    oldImages,
+    selectedImageID
+  } = props;
+  const renderImages = (images: Linode.Image[]) =>
+    images.length &&
+    images.map((image: Linode.Image, idx: number) => (
+      <SelectionCard
+        key={idx}
+        checked={image.id === String(selectedImageID)}
+        onClick={() => handleSelection(image.id)}
+        renderIcon={() => {
+          return (
+            <span className={`fl-${distroIcons[image.vendor as string]}`} />
+          );
+        }}
+        heading={image.vendor as string}
+        subheadings={[image.label]}
+        data-qa-selection-card
+        disabled={disabled}
+      />
+    ));
+
+  return (
+    <>
+      <Grid className={classes.flatImagePanelSelections} container>
+        {renderImages(images)}
+      </Grid>
+      {oldImages.length > 0 && (
+        <ShowMoreExpansion name="Show Older Images">
+          <Grid container spacing={16} style={{ marginTop: 16 }}>
+            {renderImages(oldImages)}
+          </Grid>
+        </ShowMoreExpansion>
+      )}
+    </>
+  );
+};
+
+const styled = withStyles(styles);
+
+export default styled(PublicImages);
diff --git a/src/features/linodes/LinodesCreate/SelectImagePanel.tsx b/src/features/linodes/LinodesCreate/SelectImagePanel.tsx
index dd09c768d88..7f1acb84cc4 100644
--- a/src/features/linodes/LinodesCreate/SelectImagePanel.tsx
+++ b/src/features/linodes/LinodesCreate/SelectImagePanel.tsx
@@ -15,44 +15,12 @@ import {
   values
 } from 'ramda';
 import * as React from 'react';
-import Paper from 'src/components/core/Paper';
-import {
-  StyleRulesCallback,
-  withStyles,
-  WithStyles
-} from 'src/components/core/styles';
-import Typography from 'src/components/core/Typography';
-import Grid from 'src/components/Grid';
-import Notice from 'src/components/Notice';
 import RenderGuard from 'src/components/RenderGuard';
-import SelectionCard from 'src/components/SelectionCard';
-import ShowMoreExpansion from 'src/components/ShowMoreExpansion';
 import TabbedPanel from 'src/components/TabbedPanel';
 
-type ClassNames = 'root' | 'flatImagePanel' | 'flatImagePanelSelections';
-
-const styles: StyleRulesCallback<ClassNames> = theme => ({
-  flatImagePanel: {
-    padding: theme.spacing.unit * 3
-  },
-  flatImagePanelSelections: {
-    marginTop: theme.spacing.unit * 2,
-    padding: `${theme.spacing.unit}px 0`
-  },
-  root: {}
-});
-
-const distroIcons = {
-  Arch: 'archlinux',
-  CentOS: 'centos',
-  CoreOS: 'coreos',
-  Debian: 'debian',
-  Fedora: 'fedora',
-  Gentoo: 'gentoo',
-  openSUSE: 'opensuse',
-  Slackware: 'slackware',
-  Ubuntu: 'ubuntu'
-};
+import Panel from './Panel';
+import PrivateImages from './PrivateImages';
+import PublicImages from './PublicImages';
 
 interface Props {
   images: Linode.Image[];
@@ -60,7 +28,7 @@ interface Props {
   error?: string;
   selectedImageID?: string;
   handleSelection: (id: string) => void;
-  hideMyImages?: boolean;
+  variant?: 'public' | 'private' | 'all';
   initTab?: number;
   disabled?: boolean;
 }
@@ -105,130 +73,57 @@ export const getMyImages = compose<any, any, any>(
   filter(propSatisfies(startsWith('private'), 'id'))
 );
 
-type CombinedProps = Props & WithStyles<ClassNames>;
+type CombinedProps = Props;
 
 const CreateFromImage: React.StatelessComponent<CombinedProps> = props => {
-  const { images, error, handleSelection, disabled } = props;
+  const { images, error, handleSelection, disabled, title, variant, selectedImageID } = props;
   const publicImages = getPublicImages(images);
   const olderPublicImages = getOlderPublicImages(images);
   const myImages = getMyImages(images);
 
-  const renderPublicImages = () =>
-    publicImages.length &&
-    publicImages.map((image: Linode.Image, idx: number) => (
-      <SelectionCard
-        key={idx}
-        checked={image.id === String(props.selectedImageID)}
-        onClick={() => handleSelection(image.id)}
-        renderIcon={() => {
-          return (
-            <span className={`fl-${distroIcons[image.vendor as string]}`} />
-          );
-        }}
-        heading={image.vendor as string}
-        subheadings={[image.label]}
-        data-qa-selection-card
-        disabled={disabled}
-      />
-    ));
+  const Public = (
+    <Panel error={error} title={title}>
+      <PublicImages images={publicImages} oldImages={olderPublicImages} disabled={disabled} handleSelection={handleSelection} selectedImageID={selectedImageID} />
+    </Panel>
+  )
 
-  const renderOlderPublicImages = () =>
-    olderPublicImages.length &&
-    olderPublicImages.map((image: Linode.Image, idx: number) => (
-      <SelectionCard
-        key={idx}
-        checked={image.id === String(props.selectedImageID)}
-        onClick={() => handleSelection(image.id)}
-        renderIcon={() => {
-          return (
-            <span className={`fl-${distroIcons[image.vendor as string]}`} />
-          );
-        }}
-        heading={image.vendor as string}
-        subheadings={[image.label]}
-        disabled={disabled}
-      />
-    ));
+  const Private = (
+    <Panel error={error} title={title}>
+      <PrivateImages images={myImages} disabled={disabled} handleSelection={handleSelection} selectedImageID={selectedImageID} />
+    </Panel>
+  )
 
   const tabs = [
     {
       title: 'Public Images',
       render: () => (
-        <React.Fragment>
-          <Grid container spacing={16}>
-            {renderPublicImages()}
-          </Grid>
-          <ShowMoreExpansion name="Show Older Images">
-            <Grid container spacing={16} style={{ marginTop: 16 }}>
-              {renderOlderPublicImages()}
-            </Grid>
-          </ShowMoreExpansion>
-        </React.Fragment>
+        Public
       )
     },
     {
       title: 'My Images',
       render: () => (
-        <Grid container>
-          {myImages &&
-            myImages.map((image: Linode.Image, idx: number) => (
-              <SelectionCard
-                key={idx}
-                checked={image.id === String(props.selectedImageID)}
-                onClick={() => handleSelection(image.id)}
-                renderIcon={() => <span className="fl-tux" />}
-                heading={image.label as string}
-                subheadings={[image.description as string]}
-                disabled={disabled}
-              />
-            ))}
-        </Grid>
+        Private
       )
     }
   ];
 
-  const renderTabs = () => {
-    const { hideMyImages } = props;
-    if (hideMyImages) {
-      return tabs;
-    }
-    return tabs;
-  };
-
-  return (
-    <React.Fragment>
-      {props.hideMyImages !== true ? ( // if we have no olderPublicImage, hide the dropdown
+  switch (variant) {
+    case 'private':
+      return Private;
+    case 'public':
+      return Public;
+    case 'all':
+    default:
+      return (
         <TabbedPanel
           error={error}
           header="Select Image"
-          tabs={renderTabs()}
+          tabs={tabs}
           initTab={props.initTab}
         />
-      ) : (
-        <Paper
-          className={props.classes.flatImagePanel}
-          data-qa-tp="Select Image"
-        >
-          {error && <Notice text={error} error />}
-          <Typography role="header" variant="h2" data-qa-tp="Select Image">
-            {props.title || 'Select an Image'}
-          </Typography>
-          <Grid className={props.classes.flatImagePanelSelections} container>
-            {renderPublicImages()}
-          </Grid>
-          {olderPublicImages.length > 0 && (
-            <ShowMoreExpansion name="Show Older Images">
-              <Grid container spacing={16} style={{ marginTop: 16 }}>
-                {renderOlderPublicImages()}
-              </Grid>
-            </ShowMoreExpansion>
-          )}
-        </Paper>
-      )}
-    </React.Fragment>
-  );
+      )
+  }
 };
 
-const styled = withStyles(styles);
-
-export default styled(RenderGuard<Props>(CreateFromImage));
+export default (RenderGuard<Props>(CreateFromImage));
diff --git a/src/features/linodes/LinodesCreate/TabbedContent/FromImageContent.tsx b/src/features/linodes/LinodesCreate/TabbedContent/FromImageContent.tsx
index a06b1ce0180..cb328d13e53 100644
--- a/src/features/linodes/LinodesCreate/TabbedContent/FromImageContent.tsx
+++ b/src/features/linodes/LinodesCreate/TabbedContent/FromImageContent.tsx
@@ -1,5 +1,6 @@
 import { pathOr } from 'ramda';
 import * as React from 'react';
+import { Link } from 'react-router-dom';
 import { Sticky, StickyProps } from 'react-sticky';
 import { compose } from 'recompose';
 import AccessPanel from 'src/components/AccessPanel';
@@ -13,6 +14,7 @@ import CreateLinodeDisabled from 'src/components/CreateLinodeDisabled';
 import Grid from 'src/components/Grid';
 import LabelAndTagsPanel from 'src/components/LabelAndTagsPanel';
 import Notice from 'src/components/Notice';
+import Placeholder from 'src/components/Placeholder';
 import SelectRegionPanel from 'src/components/SelectRegionPanel';
 import getAPIErrorsFor from 'src/utilities/getAPIErrorFor';
 import AddonsPanel from '../AddonsPanel';
@@ -41,7 +43,7 @@ interface Notice {
 
 interface Props extends BaseFormStateAndHandlers {
   notice?: Notice;
-  publicOnly?: boolean;
+  variant?: 'public' | 'private' | 'all';
   imagePanelTitle?: string;
 }
 
@@ -97,17 +99,35 @@ export class FromImageContent extends React.PureComponent<CombinedProps> {
       regionDisplayInfo,
       typeDisplayInfo,
       backupsMonthlyPrice,
-      publicOnly,
       userSSHKeys,
       userCannotCreateLinode,
       errors,
-      imagePanelTitle
+      imagePanelTitle,
+      variant
     } = this.props;
 
     const hasErrorFor = getAPIErrorsFor(errorResources, errors);
     const generalError = hasErrorFor('none');
 
     const hasBackups = this.props.backupsEnabled || accountBackupsEnabled;
+    const privateImages = images.filter(image => !image.is_public);
+
+    if (variant === 'private' && privateImages.length === 0) {
+      return (
+        <Grid item className={`${classes.main} mlMain`}>
+          <Placeholder
+            title="My Images"
+            copy={
+              <span>
+                You don't have any private Images. Visit the{' '}
+                <Link to="/images">Images section</Link> to create an Image from
+                one of your Linode's disks.
+              </span>
+            }
+          />
+        </Grid>
+      );
+    }
 
     return (
       <React.Fragment>
@@ -122,7 +142,7 @@ export class FromImageContent extends React.PureComponent<CombinedProps> {
           <CreateLinodeDisabled isDisabled={userCannotCreateLinode} />
           {generalError && <Notice text={generalError} error={true} />}
           <SelectImagePanel
-            hideMyImages={publicOnly}
+            variant={variant}
             title={imagePanelTitle}
             images={images}
             handleSelection={this.props.updateImageID}
diff --git a/src/features/linodes/LinodesCreate/TabbedContent/FromStackScriptContent.tsx b/src/features/linodes/LinodesCreate/TabbedContent/FromStackScriptContent.tsx
index 4f38c795598..e46ebaba896 100644
--- a/src/features/linodes/LinodesCreate/TabbedContent/FromStackScriptContent.tsx
+++ b/src/features/linodes/LinodesCreate/TabbedContent/FromStackScriptContent.tsx
@@ -252,7 +252,7 @@ export class FromStackScriptContent extends React.PureComponent<CombinedProps> {
               updateFor={[selectedImageID, compatibleImages, errors]}
               selectedImageID={selectedImageID}
               error={hasErrorFor('image')}
-              hideMyImages={true}
+              variant="public"
             />
           ) : (
             <Paper className={classes.emptyImagePanel}>
diff --git a/src/store/linodeCreate/linodeCreate.reducer.ts b/src/store/linodeCreate/linodeCreate.reducer.ts
index ebc2ab45e8c..a7bb1990a55 100644
--- a/src/store/linodeCreate/linodeCreate.reducer.ts
+++ b/src/store/linodeCreate/linodeCreate.reducer.ts
@@ -54,8 +54,6 @@ const reducer: Reducer<State> = reducerWithInitialState(
 ).caseWithAction(handleChangeCreateType, (state, action) => {
   const { payload } = action;
 
-  console.log(payload);
-
   return {
     ...state,
     type: payload