From e9e1b68caf61a98ab2fee64e8782afc678b31a9d Mon Sep 17 00:00:00 2001
From: bogdannechyporenko <bogdannechiporenko@gmail.com>
Date: Mon, 30 Jan 2023 19:03:02 +0100
Subject: [PATCH] Aligning buttons to the same line

Signed-off-by: bogdannechyporenko <bogdannechiporenko@gmail.com>
---
 .../UnregisterEntityDialog.tsx                | 43 ++++++++++++-------
 1 file changed, 28 insertions(+), 15 deletions(-)

diff --git a/plugins/catalog-react/src/components/UnregisterEntityDialog/UnregisterEntityDialog.tsx b/plugins/catalog-react/src/components/UnregisterEntityDialog/UnregisterEntityDialog.tsx
index 48aa2f4012..6c4984129e 100644
--- a/plugins/catalog-react/src/components/UnregisterEntityDialog/UnregisterEntityDialog.tsx
+++ b/plugins/catalog-react/src/components/UnregisterEntityDialog/UnregisterEntityDialog.tsx
@@ -39,14 +39,19 @@ const useStyles = makeStyles({
   advancedButton: {
     fontSize: '0.7em',
   },
+  dialogActions: {
+    display: 'inline-block',
+  },
 });
 
 const Contents = ({
   entity,
   onConfirm,
+  onClose,
 }: {
   entity: Entity;
   onConfirm: () => any;
+  onClose: () => any;
 }) => {
   const alertApi = useApi(alertApiRef);
   const configApi = useApi(configApiRef);
@@ -92,6 +97,14 @@ const Contents = ({
     [alertApi, onConfirm, state],
   );
 
+  const DialogActionsPanel = () => (
+    <DialogActions className={classes.dialogActions}>
+      <Button onClick={onClose} color="primary">
+        Cancel
+      </Button>
+    </DialogActions>
+  );
+
   if (state.type === 'loading') {
     return <Progress />;
   }
@@ -112,15 +125,18 @@ const Contents = ({
 
         <Box marginTop={2}>
           {!showDelete && (
-            <Button
-              variant="text"
-              size="small"
-              color="primary"
-              className={classes.advancedButton}
-              onClick={() => setShowDelete(true)}
-            >
-              Advanced Options
-            </Button>
+            <>
+              <Button
+                variant="text"
+                size="small"
+                color="primary"
+                className={classes.advancedButton}
+                onClick={() => setShowDelete(true)}
+              >
+                Advanced Options
+              </Button>
+              <DialogActionsPanel />
+            </>
           )}
 
           {showDelete && (
@@ -140,6 +156,7 @@ const Contents = ({
               >
                 Delete Entity
               </Button>
+              <DialogActionsPanel />
             </>
           )}
         </Box>
@@ -162,6 +179,7 @@ const Contents = ({
         >
           Delete Entity
         </Button>
+        <DialogActionsPanel />
       </>
     );
   }
@@ -258,13 +276,8 @@ export const UnregisterEntityDialog = (props: UnregisterEntityDialogProps) => {
         Are you sure you want to unregister this entity?
       </DialogTitle>
       <DialogContent>
-        <Contents entity={entity} onConfirm={onConfirm} />
+        <Contents entity={entity} onConfirm={onConfirm} onClose={onClose} />
       </DialogContent>
-      <DialogActions>
-        <Button onClick={onClose} color="primary">
-          Cancel
-        </Button>
-      </DialogActions>
     </Dialog>
   );
 };