hotfix: Timezone Form Styles and revert FromStrackScriptContent to a …

…class component (#9573) * fix timezone styles * changeset * fix styles more * bump version and changelog * Delete pr-9573-fixed-1692642029020.md * hotfix: revert FromStrackScriptContent to a class component * update changelog --------- Co-authored-by: Banks Nussman <banks@nussman.us> Co-authored-by: Alban Bailly <abailly@akamai.com>
linode · Aug 22, 2023 · 90f42bb · 90f42bb
1 parent 41bcc15
commit 90f42bb
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 89 deletions.
diff --git a/packages/manager/CHANGELOG.md b/packages/manager/CHANGELOG.md
@@ -4,6 +4,14 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [2023-08-22] - v1.100.1
+
+### Fixed:
+
+- Incorrect timezone form styles on profile page ([#9573](https://github.com/linode/manager/pull/9573))
+- Create Linode from Stackscript field state bug ([#9573](https://github.com/linode/manager/pull/9573))
+
+
 ## [2023-08-21] - v1.100.0
 
 

diff --git a/packages/manager/package.json b/packages/manager/package.json
@@ -2,7 +2,7 @@
   "name": "linode-manager",
   "author": "Linode",
   "description": "The Linode Manager website",
-  "version": "1.100.0",
+  "version": "1.100.1",
   "private": true,
   "bugs": {
     "url": "https://github.com/Linode/manager/issues"

diff --git a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromStackScriptContent.tsx b/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromStackScriptContent.tsx
@@ -1,7 +1,6 @@
 import { Image } from '@linode/api-v4/lib/images';
 import { UserDefinedField } from '@linode/api-v4/lib/stackscripts';
 import { styled } from '@mui/material/styles';
-import { StyledGrid } from './CommonTabbedContent.styles';
 import { assocPath, equals } from 'ramda';
 import * as React from 'react';
 
@@ -19,6 +18,7 @@ import {
   StackScriptFormStateHandlers,
   WithTypesRegionsAndImages,
 } from '../types';
+import { StyledGrid } from './CommonTabbedContent.styles';
 import { filterUDFErrors } from './formUtilities';
 
 interface Props {
@@ -42,45 +42,100 @@ export type CombinedProps = Props &
   StackScriptFormStateHandlers &
   WithTypesRegionsAndImages;
 
-export const FromStackScriptContent = React.memo((props: CombinedProps) => {
-  const {
-    availableStackScriptImages: compatibleImages,
-    availableUserDefinedFields: userDefinedFields,
-    category,
-    errors,
-    handleSelectUDFs,
-    header,
-    imagesData,
-    request,
-    selectedImageID,
-    selectedStackScriptID,
-    selectedStackScriptLabel,
-    selectedStackScriptUsername,
-    selectedUDFs: udf_data,
-    updateImageID,
-    updateStackScript,
-    userCannotCreateLinode,
-  } = props;
-
-  const showAllImages = equals(compatibleImages, Object.values(imagesData));
-
-  const hasErrorFor = getAPIErrorsFor(errorResources, errors);
-
-  const handleChangeUDF = (key: string, value: string) => {
+export class FromStackScriptContent extends React.PureComponent<CombinedProps> {
+  render() {
+    const {
+      availableStackScriptImages: compatibleImages,
+      availableUserDefinedFields: userDefinedFields,
+      errors,
+      header,
+      imagesData,
+      request,
+      selectedImageID,
+      selectedStackScriptID,
+      selectedStackScriptLabel,
+      selectedStackScriptUsername,
+      selectedUDFs: udf_data,
+      updateImageID,
+      userCannotCreateLinode,
+    } = this.props;
+
+    // If all of the StackScript's compatibleImages match the full array of images,
+    // we can assume that the StackScript specified any/all
+    const showAllImages = equals(compatibleImages, Object.values(imagesData));
+
+    const hasErrorFor = getAPIErrorsFor(errorResources, errors);
+
+    return (
+      <React.Fragment>
+        <StyledGrid data-qa-panel={header}>
+          <SelectStackScriptPanel
+            category={this.props.category}
+            data-qa-select-stackscript
+            disabled={userCannotCreateLinode}
+            error={hasErrorFor('stackscript_id')}
+            header={header}
+            isOnCreate
+            onSelect={this.handleSelectStackScript}
+            publicImages={filterImagesByType(imagesData, 'public')}
+            request={request}
+            resetSelectedStackScript={() => null}
+            selectedId={selectedStackScriptID}
+            selectedUsername={selectedStackScriptUsername}
+            updateFor={[selectedStackScriptID, errors]}
+          />
+          {!userCannotCreateLinode &&
+            userDefinedFields &&
+            userDefinedFields.length > 0 && (
+              <UserDefinedFieldsPanel
+                data-qa-udf-panel
+                errors={filterUDFErrors(errorResources, this.props.errors)}
+                handleChange={this.handleChangeUDF}
+                selectedLabel={selectedStackScriptLabel || ''}
+                selectedUsername={selectedStackScriptUsername || ''}
+                udf_data={udf_data || {}}
+                updateFor={[userDefinedFields, udf_data, errors]}
+                userDefinedFields={userDefinedFields}
+              />
+            )}
+          {!userCannotCreateLinode &&
+          compatibleImages &&
+          compatibleImages.length > 0 ? (
+            <ImageSelect
+              data-qa-select-image-panel
+              error={hasErrorFor('image')}
+              handleSelectImage={updateImageID}
+              images={compatibleImages}
+              selectedImageID={selectedImageID}
+              title="Select an Image"
+              variant={showAllImages ? 'all' : 'public'}
+            />
+          ) : (
+            <StyledImageEmptyState errorText={hasErrorFor('image')} />
+          )}
+        </StyledGrid>
+
+        <StackScriptDialog />
+      </React.Fragment>
+    );
+  }
+
+  handleChangeUDF = (key: string, value: string) => {
     // either overwrite or create new selection
-    const newUDFData = assocPath([key], value, udf_data);
+    const newUDFData = assocPath([key], value, this.props.selectedUDFs);
 
-    handleSelectUDFs({ ...udf_data, ...newUDFData });
+    this.props.handleSelectUDFs({ ...this.props.selectedUDFs, ...newUDFData });
   };
 
-  const handleSelectStackScript = (
+  handleSelectStackScript = (
     id: number,
     label: string,
     username: string,
     stackScriptImages: string[],
     userDefinedFields: UserDefinedField[]
   ) => {
     const allowAllImages = stackScriptImages.includes('any/all');
+    const { imagesData } = this.props;
 
     /**
      * based on the list of images we get back from the API, compare those
@@ -109,7 +164,7 @@ export const FromStackScriptContent = React.memo((props: CombinedProps) => {
       return accum;
     }, {});
 
-    updateStackScript(
+    this.props.updateStackScript(
       id,
       label,
       username,
@@ -118,63 +173,12 @@ export const FromStackScriptContent = React.memo((props: CombinedProps) => {
       defaultUDFData
     );
   };
-
-  return (
-    <React.Fragment>
-      <StyledGrid data-qa-panel={header}>
-        <SelectStackScriptPanel
-          category={category}
-          data-qa-select-stackscript
-          disabled={userCannotCreateLinode}
-          error={hasErrorFor('stackscript_id')}
-          header={header}
-          isOnCreate
-          onSelect={handleSelectStackScript}
-          publicImages={filterImagesByType(imagesData, 'public')}
-          request={request}
-          resetSelectedStackScript={() => null}
-          selectedId={selectedStackScriptID}
-          selectedUsername={selectedStackScriptUsername}
-          updateFor={[selectedStackScriptID, errors]}
-        />
-        {!userCannotCreateLinode &&
-          userDefinedFields &&
-          userDefinedFields.length > 0 && (
-            <UserDefinedFieldsPanel
-              data-qa-udf-panel
-              errors={filterUDFErrors(errorResources, errors)}
-              handleChange={handleChangeUDF}
-              selectedLabel={selectedStackScriptLabel || ''}
-              selectedUsername={selectedStackScriptUsername || ''}
-              udf_data={udf_data || {}}
-              updateFor={[userDefinedFields, udf_data, errors]}
-              userDefinedFields={userDefinedFields}
-            />
-          )}
-        {!userCannotCreateLinode &&
-        compatibleImages &&
-        compatibleImages.length > 0 ? (
-          <ImageSelect
-            data-qa-select-image-panel
-            error={hasErrorFor('image')}
-            handleSelectImage={updateImageID}
-            images={compatibleImages}
-            selectedImageID={selectedImageID}
-            title="Select an Image"
-            variant={showAllImages ? 'all' : 'public'}
-          />
-        ) : (
-          <StyledImageEmptyState errorText={hasErrorFor('image')} />
-        )}
-      </StyledGrid>
-
-      <StackScriptDialog />
-    </React.Fragment>
-  );
-});
+}
 
 const StyledImageEmptyState = styled(ImageEmptyState, {
   label: 'StyledImageEmptyState',
 })(({ theme }) => ({
   padding: theme.spacing(3),
 }));
+
+export default FromStackScriptContent;
diff --git a/packages/manager/src/features/Profile/DisplaySettings/TimezoneForm.tsx b/packages/manager/src/features/Profile/DisplaySettings/TimezoneForm.tsx
@@ -99,15 +99,12 @@ export const TimezoneForm = (props: Props) => {
         />
         <ActionsPanel
           primaryButtonProps={{
-            'data-testid': 'tz-submit',
             disabled,
             label: 'Update Timezone',
             loading: isLoading,
             onClick: onSubmit,
             sx: {
-              backgroundColor: 'red',
-              color: 'white',
-              marginTop: (theme: Theme) => theme.breakpoints.up('md') && 16,
+              marginTop: (theme: Theme) => (theme.breakpoints.up('md') ? 2 : 0),
               minWidth: 180,
             },
           }}