PMM-11148 Jump straight to add instance page & reorder

percona · Aug 22, 2023 · 3511995 · 3511995
1 parent e7488c4
commit 3511995
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 27 deletions.
diff --git a/public/app/percona/add-instance/components/AddInstance/AddInstance.tsx b/public/app/percona/add-instance/components/AddInstance/AddInstance.tsx
@@ -17,12 +17,7 @@ export const SelectInstance: FC<SelectInstanceProps> = ({ type, isSelected, icon
   const styles = useStyles2(getStyles);
 
   return (
-    <Card
-      data-testid={`${type}-instance`}
-      isSelected={isSelected}
-      onClick={selectInstanceType(type)}
-      className={styles.InstanceCard}
-    >
+    <Card data-testid={`${type}-instance`} onClick={selectInstanceType(type)} className={styles.InstanceCard}>
       <Card.Heading>{title}</Card.Heading>
       <Card.Description>{Messages.titles.addInstance}</Card.Description>
       <Card.Figure>
@@ -36,12 +31,12 @@ export const AddInstance: FC<AddInstanceProps> = ({ selectedInstanceType, onSele
   const styles2 = useStyles2(getStyles);
   const instanceList = useMemo<InstanceListItem[]>(
     () => [
-      { type: Databases.postgresql, title: Messages.titles.postgresql, icon: 'percona-database-postgresql' },
+      { type: InstanceTypesExtra.rds, title: Messages.titles.rds },
       { type: Databases.mysql, title: Messages.titles.mysql, icon: 'percona-database-mysql' },
       { type: Databases.mongodb, title: Messages.titles.mongodb, icon: 'percona-database-mongodb' },
+      { type: Databases.postgresql, title: Messages.titles.postgresql, icon: 'percona-database-postgresql' },
       { type: Databases.proxysql, title: Messages.titles.proxysql, icon: 'percona-database-proxysql' },
       { type: Databases.haproxy, title: Messages.titles.haproxy, icon: 'percona-database-haproxy' },
-      { type: InstanceTypesExtra.rds, title: Messages.titles.rds },
       { type: InstanceTypesExtra.external, title: Messages.titles.external },
       { type: InstanceTypesExtra.azure, title: Messages.titles.azure, isHidden: !showAzure },
     ],

diff --git a/public/app/percona/add-instance/panel.tsx b/public/app/percona/add-instance/panel.tsx
@@ -37,7 +37,6 @@ const AddInstancePanel = () => {
   const [selectedInstance, selectInstance] = useState<InstanceAvailable>({
     type: availableInstanceTypes.includes(instanceType as AvailableTypes) ? instanceType : '',
   });
-  const [formName, setFormName] = useState(instanceType ? ADD_INSTANCE_FORM_NAME : '');
   const [showSelection, setShowSelection] = useState(!instanceType);
   const [submitting, setSubmitting] = useState(false);
   const history = useHistory();
@@ -77,25 +76,20 @@ const AddInstancePanel = () => {
     [showSelection, selectedInstance]
   );
 
-  const handleCancel: MouseEventHandler = () => {
+  const handleCancel: MouseEventHandler = (e) => {
     if (showSelection) {
       history.push('/inventory/services');
     } else {
       history.push('/add-instance');
     }
     selectInstance({ type: '' });
     setShowSelection(true);
-    setFormName('');
   };
 
-  const handleShowConfiguration: MouseEventHandler = (e) => {
+  const handleSelectInstance = (instance: InstanceAvailable) => {
+    history.push('/add-instance/' + instance.type);
+    selectInstance(instance);
     setShowSelection(false);
-    history.push('/add-instance/' + selectedInstance.type);
-
-    if (showSelection) {
-      e.preventDefault();
-      setFormName(ADD_INSTANCE_FORM_NAME);
-    }
   };
 
   return (
@@ -107,22 +101,19 @@ const AddInstancePanel = () => {
         <ToolbarButton onClick={handleCancel}>
           {showSelection ? Messages.selectionStep.cancel : Messages.configurationStep.cancel}
         </ToolbarButton>
-        <ToolbarButton
-          form={formName}
-          disabled={!selectedInstance.type || submitting}
-          variant="primary"
-          onClick={handleShowConfiguration}
-        >
-          {submitLabel}
-        </ToolbarButton>
+        {!showSelection && (
+          <ToolbarButton form={ADD_INSTANCE_FORM_NAME} disabled={submitting} variant="primary">
+            {submitLabel}
+          </ToolbarButton>
+        )}
       </PageToolbar>
       <Page.Contents className={styles.page}>
         <FeatureLoader>
           {showSelection ? (
             <AddInstance
               showAzure={!!azureDiscoverEnabled}
               selectedInstanceType={selectedInstance}
-              onSelectInstanceType={selectInstance}
+              onSelectInstanceType={handleSelectInstance}
             />
           ) : (
             <InstanceForm />