CA-XXX Add Distros tab (#4579)

* Working prototype * Just refactor FIC after all
linode · Mar 20, 2019 · 8b625cd · 8b625cd
1 parent 74d8c6f
commit 8b625cd
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 3 deletions.
diff --git a/src/features/linodes/LinodesCreate/CALinodeCreate.tsx b/src/features/linodes/LinodesCreate/CALinodeCreate.tsx
@@ -25,6 +25,8 @@ import {
 import { ApplicationState } from 'src/store';
 import { MapState } from 'src/store/types';
 import { ExtendedType } from './SelectPlanPanel';
+import FromImageContent from './TabbedContent/FromImageContent';
+import { Info } from './util';
 
 export type TypeInfo =
   | {
@@ -90,7 +92,22 @@ export class LinodeCreate extends React.Component<CombinedProps, State> {
     {
       title: 'Distros',
       render: () => {
-        return <React.Fragment />;
+        return (
+          <FromImageContent
+            publicOnly
+            imagePanelTitle="Choose a Distribution"
+            getBackupsMonthlyPrice={this.getBackupsMonthlyPrice}
+            regions={this.props.regionsData}
+            images={this.props.imagesData}
+            types={this.props.typesData}
+            getTypeInfo={this.getTypeInfo}
+            getRegionInfo={this.getRegionInfo}
+            history={this.props.history}
+            accountBackups={this.props.accountBackupsEnabled}
+            handleDisablePasswordField={this.handleDisablePasswordField}
+            disabled={this.props.userCannotCreateLinode}
+          />
+        );
       }
     },
     {
@@ -111,6 +128,68 @@ export class LinodeCreate extends React.Component<CombinedProps, State> {
     this.mounted = false;
   }
 
+  getBackupsMonthlyPrice = (selectedTypeID: string | null): number | null => {
+    if (!selectedTypeID || !this.props.typesData) {
+      return null;
+    }
+    const type = this.getTypeInfo(selectedTypeID);
+    if (!type) {
+      return null;
+    }
+    return type.backupsMonthly;
+  };
+
+  getImageInfo = (image: Linode.Image | undefined): Info => {
+    return (
+      image && {
+        title: `${image.vendor || image.label}`,
+        details: `${image.vendor ? image.label : ''}`
+      }
+    );
+  };
+
+  getTypeInfo = (selectedTypeID: string | null): TypeInfo => {
+    const typeInfo = this.reshapeTypeInfo(
+      this.props.typesData.find(type => type.id === selectedTypeID)
+    );
+
+    return typeInfo;
+  };
+
+  reshapeTypeInfo = (type: ExtendedType | undefined): TypeInfo => {
+    return (
+      type && {
+        title: type.label,
+        details: `${typeLabelDetails(type.memory, type.disk, type.vcpus)}`,
+        monthly: type.price.monthly,
+        backupsMonthly: type.addons.backups.price.monthly
+      }
+    );
+  };
+
+  getRegionInfo = (selectedRegionID?: string | null): Info => {
+    const selectedRegion = this.props.regionsData.find(
+      region => region.id === selectedRegionID
+    );
+
+    return (
+      selectedRegion && {
+        title: selectedRegion.country.toUpperCase(),
+        details: selectedRegion.display
+      }
+    );
+  };
+
+  handleDisablePasswordField = (imageSelected: boolean) => {
+    if (!imageSelected) {
+      return {
+        disabled: true,
+        reason: 'You must first select an image to enter a root password'
+      };
+    }
+    return;
+  };
+
   render() {
     const { selectedTab } = this.state;
 

diff --git a/src/features/linodes/LinodesCreate/SelectImagePanel.tsx b/src/features/linodes/LinodesCreate/SelectImagePanel.tsx
@@ -57,6 +57,7 @@ const distroIcons = {
 
 interface Props {
   images: Linode.Image[];
+  title?: string;
   error?: string;
   selectedImageID: string | null;
   handleSelection: (id: string) => void;
@@ -211,7 +212,7 @@ const CreateFromImage: React.StatelessComponent<CombinedProps> = props => {
         >
           {error && <Notice text={error} error />}
           <Typography role="header" variant="h2" data-qa-tp="Select Image">
-            Select Image
+            {props.title || 'Select an Image'}
           </Typography>
           <Grid className={props.classes.flatImagePanelSelections} container>
             {renderPublicImages()}

diff --git a/src/features/linodes/LinodesCreate/TabbedContent/FromImageContent.tsx b/src/features/linodes/LinodesCreate/TabbedContent/FromImageContent.tsx
@@ -58,6 +58,8 @@ interface Notice {
 interface Props {
   errors?: Linode.ApiFieldError[];
   notice?: Notice;
+  publicOnly?: boolean;
+  imagePanelTitle?: string;
   images: Linode.Image[];
   regions: ExtendedRegion[];
   types: ExtendedType[];
@@ -294,9 +296,11 @@ export class FromImageContent extends React.Component<CombinedProps, State> {
       getBackupsMonthlyPrice,
       getRegionInfo,
       getTypeInfo,
+      publicOnly,
       updateCustomLabel,
       userSSHKeys,
-      disabled
+      disabled,
+      imagePanelTitle
     } = this.props;
 
     const hasErrorFor = getAPIErrorsFor(errorResources, errors);
@@ -327,6 +331,8 @@ export class FromImageContent extends React.Component<CombinedProps, State> {
           <CreateLinodeDisabled isDisabled={disabled} />
           {generalError && <Notice text={generalError} error={true} />}
           <SelectImagePanel
+            hideMyImages={publicOnly}
+            title={imagePanelTitle}
             images={images}
             handleSelection={this.handleSelectImage}
             selectedImageID={selectedImageID}