refactor: [M3-8813] - Remove use of Redux for viewing StackScript det…

…ails (#11192) * use normal dialog without redux * add changeset * just use one state --------- Co-authored-by: Banks Nussman <banks@nussman.us>
linode · Nov 4, 2024 · 06f54a5 · 06f54a5
1 parent ae20325
commit 06f54a5
Show file tree

Hide file tree

Showing 9 changed files with 49 additions and 192 deletions.
diff --git a/packages/manager/.changeset/pr-11192-tech-stories-1730318704149.md b/packages/manager/.changeset/pr-11192-tech-stories-1730318704149.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Remove use of Redux for viewing StackScript details ([#11192](https://github.com/linode/manager/pull/11192))
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/RebuildFromStackScript.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/RebuildFromStackScript.tsx
@@ -12,7 +12,6 @@ import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { ImageSelect } from 'src/components/ImageSelect/ImageSelect';
 import { TypeToConfirm } from 'src/components/TypeToConfirm/TypeToConfirm';
 import SelectStackScriptPanel from 'src/features/StackScripts/SelectStackScriptPanel/SelectStackScriptPanel';
-import StackScriptDialog from 'src/features/StackScripts/StackScriptDialog';
 import {
   getCommunityStackscripts,
   getMineAndAccountStackScripts,
@@ -32,6 +31,7 @@ import {
 import { scrollErrorIntoView } from 'src/utilities/scrollErrorIntoView';
 import { extendValidationSchema } from 'src/utilities/validatePassword';
 
+import { StackScriptDetailsDialog } from '../../LinodeCreate/Tabs/StackScripts/StackScriptDetailsDialog';
 import { ImageEmptyState } from './ImageEmptyState';
 
 import type { UserDefinedField } from '@linode/api-v4/lib/stackscripts';
@@ -118,6 +118,15 @@ export const RebuildFromStackScript = (props: Props) => {
     Object.keys(_imagesData).map((eachKey) => _imagesData[eachKey])
   );
 
+  const [
+    selectedStackScriptIdForDetailsDialog,
+    setSelectedStackScriptIdForDetailsDialog,
+  ] = React.useState<number | undefined>();
+
+  const onOpenStackScriptDetailsDialog = (stackscriptId: number) => {
+    setSelectedStackScriptIdForDetailsDialog(stackscriptId);
+  };
+
   // In this component, most errors are handled by Formik. This is not
   // possible with UDFs, since they are dynamic. Their errors need to
   // be handled separately.
@@ -291,6 +300,7 @@ export const RebuildFromStackScript = (props: Props) => {
                 error={errors.stackscript_id}
                 header="Select StackScript"
                 onSelect={handleSelect}
+                openStackScriptDetailsDialog={onOpenStackScriptDetailsDialog}
                 publicImages={filterImagesByType(_imagesData, 'public')}
                 resetSelectedStackScript={resetStackScript}
                 selectedId={ss.id}
@@ -380,7 +390,13 @@ export const RebuildFromStackScript = (props: Props) => {
                 />
               </Grid>
             </form>
-            <StackScriptDialog />
+            <StackScriptDetailsDialog
+              onClose={() =>
+                setSelectedStackScriptIdForDetailsDialog(undefined)
+              }
+              id={selectedStackScriptIdForDetailsDialog}
+              open={selectedStackScriptIdForDetailsDialog !== undefined}
+            />
           </Grid>
         );
       }}

diff --git a/packages/manager/src/features/StackScripts/SelectStackScriptPanel/SelectStackScriptPanel.tsx b/packages/manager/src/features/StackScripts/SelectStackScriptPanel/SelectStackScriptPanel.tsx
@@ -52,6 +52,7 @@ interface Props extends RenderGuardProps {
     images: string[],
     userDefinedFields: UserDefinedField[]
   ) => void;
+  openStackScriptDetailsDialog: (stackscriptId: number) => void;
   publicImages: Record<string, Image>;
   request: (
     username: string,
@@ -139,6 +140,9 @@ class SelectStackScriptPanel extends React.Component<
               />
               <tbody>
                 <StackScriptSelectionRow
+                  openStackScriptDetailsDialog={
+                    this.props.openStackScriptDetailsDialog
+                  }
                   updated={formatDate(stackScript.updated, {
                     displayTime: false,
                     timezone: profile.data?.timezone,
@@ -183,6 +187,9 @@ class SelectStackScriptPanel extends React.Component<
           )}
           <StyledSelectingPaper>
             <SelectStackScriptPanelContent
+              openStackScriptDetailsDialog={
+                this.props.openStackScriptDetailsDialog
+              }
               category={category}
               currentUser={profile.data?.username || ''}
               disabled={this.props.disabled}

diff --git a/...anager/src/features/StackScripts/SelectStackScriptPanel/SelectStackScriptPanelContent.tsx b/...anager/src/features/StackScripts/SelectStackScriptPanel/SelectStackScriptPanelContent.tsx
@@ -21,6 +21,7 @@ interface Props {
     images: string[],
     userDefinedFields: UserDefinedField[]
   ) => void;
+  openStackScriptDetailsDialog: (stackscriptId: number) => void;
   publicImages: Record<string, Image>;
   request: StackScriptsRequest;
   resetStackScriptSelection: () => void;
@@ -47,6 +48,7 @@ class SelectStackScriptPanelContent extends React.Component<
         disabled={this.props.disabled}
         isSorting={this.props.isSorting}
         onSelect={this.handleSelectStackScript}
+        openStackScriptDetailsDialog={this.props.openStackScriptDetailsDialog}
         publicImages={this.props.publicImages}
         selectedId={selected}
       />

diff --git a/...es/manager/src/features/StackScripts/SelectStackScriptPanel/SelectStackScriptsSection.tsx b/...es/manager/src/features/StackScripts/SelectStackScriptPanel/SelectStackScriptsSection.tsx
@@ -18,12 +18,20 @@ interface Props {
   disabled?: boolean;
   isSorting: boolean;
   onSelect: (s: StackScript) => void;
+  openStackScriptDetailsDialog: (stackscriptId: number) => void;
   publicImages: Record<string, Image>;
   selectedId?: number;
 }
 
 export const SelectStackScriptsSection = (props: Props) => {
-  const { data, disabled, isSorting, onSelect, selectedId } = props;
+  const {
+    data,
+    disabled,
+    isSorting,
+    onSelect,
+    openStackScriptDetailsDialog,
+    selectedId,
+  } = props;
 
   const { data: profile } = useProfile();
 
@@ -40,6 +48,7 @@ export const SelectStackScriptsSection = (props: Props) => {
       key={s.id}
       label={s.label}
       onSelect={() => onSelect(s)}
+      openStackScriptDetailsDialog={openStackScriptDetailsDialog}
       stackScriptID={s.id}
       stackScriptUsername={s.username}
       updateFor={[selectedId === s.id]}

diff --git a/...ages/manager/src/features/StackScripts/SelectStackScriptPanel/StackScriptSelectionRow.tsx b/...ages/manager/src/features/StackScripts/SelectStackScriptPanel/StackScriptSelectionRow.tsx
@@ -1,13 +1,10 @@
 import * as React from 'react';
-import { MapDispatchToProps, connect } from 'react-redux';
-import { compose as recompose } from 'recompose';
 
 import { Radio } from 'src/components/Radio/Radio';
-import { RenderGuard, RenderGuardProps } from 'src/components/RenderGuard';
+import { RenderGuard } from 'src/components/RenderGuard';
 import { TableCell } from 'src/components/TableCell';
 import { TableRow } from 'src/components/TableRow';
 import { Typography } from 'src/components/Typography';
-import { openStackScriptDialog as openStackScriptDialogAction } from 'src/store/stackScriptDialog';
 
 import {
   StyledDetailsButton,
@@ -20,32 +17,21 @@ import {
   StyledUsernameLabel,
 } from '../CommonStackScript.styles';
 
-export interface Props {
+interface Props {
   checked?: boolean;
   deploymentsActive: number;
   description: string;
   disabled?: boolean;
   disabledCheckedSelect?: boolean;
   label: string;
   onSelect?: (e: React.ChangeEvent<HTMLElement>, value: boolean) => void;
+  openStackScriptDetailsDialog: (stackscriptId: number) => void;
   stackScriptID: number;
   stackScriptUsername: string;
   updated: string;
 }
 
-interface DispatchProps {
-  openStackScriptDialog: (stackScriptId: number) => void;
-}
-
-export interface StackScriptSelectionRowProps
-  extends Props,
-    DispatchProps,
-    RenderGuardProps {}
-
-export class StackScriptSelectionRow extends React.Component<
-  StackScriptSelectionRowProps,
-  {}
-> {
+export class StackScriptSelectionRow extends React.Component<Props, {}> {
   render() {
     const {
       checked,
@@ -54,15 +40,15 @@ export class StackScriptSelectionRow extends React.Component<
       disabledCheckedSelect,
       label,
       onSelect,
-      openStackScriptDialog,
+      openStackScriptDetailsDialog,
       stackScriptID,
       stackScriptUsername,
     } = this.props;
 
     const renderLabel = () => {
       const openDialog = (event: React.MouseEvent<HTMLElement>) => {
         event.stopPropagation();
-        openStackScriptDialog(stackScriptID);
+        openStackScriptDetailsDialog(stackScriptID);
       };
       return (
         <StyledSelectionGrid alignItems="center" container>
@@ -110,18 +96,4 @@ export class StackScriptSelectionRow extends React.Component<
   }
 }
 
-const mapDispatchToProps: MapDispatchToProps<DispatchProps, Props> = (
-  dispatch
-) => {
-  return {
-    openStackScriptDialog: (stackScriptId: number) =>
-      dispatch(openStackScriptDialogAction(stackScriptId)),
-  };
-};
-
-interface ExportProps extends Props, RenderGuardProps {}
-
-export default recompose<StackScriptSelectionRowProps, ExportProps>(
-  connect(undefined, mapDispatchToProps),
-  RenderGuard
-)(StackScriptSelectionRow);
+export default RenderGuard(StackScriptSelectionRow);
diff --git a/packages/manager/src/features/StackScripts/StackScriptDialog.tsx b/packages/manager/src/features/StackScripts/StackScriptDialog.tsx
diff --git a/packages/manager/src/store/index.ts b/packages/manager/src/store/index.ts
@@ -16,10 +16,6 @@ import longviewStats, {
   State as LongviewStatsState,
   defaultState as defaultLongviewStatsState,
 } from 'src/store/longviewStats/longviewStats.reducer';
-import stackScriptDialog, {
-  State as StackScriptDialogState,
-  defaultState as stackScriptDialogDefaultState,
-} from 'src/store/stackScriptDialog';
 
 import mockFeatureFlags, {
   MockFeatureFlagState,
@@ -38,7 +34,6 @@ export interface ApplicationState {
   longviewStats: LongviewStatsState;
   mockFeatureFlags: MockFeatureFlagState;
   pendingUpload: PendingUploadState;
-  stackScriptDialog: StackScriptDialogState;
 }
 
 export const defaultState: ApplicationState = {
@@ -48,7 +43,6 @@ export const defaultState: ApplicationState = {
   longviewStats: defaultLongviewStatsState,
   mockFeatureFlags: defaultMockFeatureFlagState,
   pendingUpload: pendingUploadState,
-  stackScriptDialog: stackScriptDialogDefaultState,
 };
 
 /**
@@ -61,7 +55,6 @@ const reducers = combineReducers<ApplicationState>({
   longviewStats,
   mockFeatureFlags,
   pendingUpload,
-  stackScriptDialog,
 });
 
 export const storeFactory = () =>