add labels to application delete dialog box

Signed-off-by: Harshit Gupta <[email protected]>

Author: atpugtihsrah

web/src/components/applications-page/application-list/delete-application-dialog/index.tsx

@@ -1,34 +1,39 @@
+import { Application, selectById } from "~/modules/applications";
 import {
   Button,
   CircularProgress,
   Dialog,
   DialogActions,
   DialogContent,
   DialogTitle,
-  makeStyles,
   Typography,
+  makeStyles,
 } from "@material-ui/core";
-import { red } from "@material-ui/core/colors";
-import { Skeleton } from "@material-ui/lab";
-import Alert from "@material-ui/lab/Alert";
-import { FC, memo, useCallback } from "react";
-import { shallowEqual } from "react-redux";
-import { DELETE_APPLICATION_SUCCESS } from "~/constants/toast-text";
+import { FC, Fragment, memo, useCallback } from "react";
 import { UI_TEXT_CANCEL, UI_TEXT_DELETE } from "~/constants/ui-text";
-import { useAppSelector, useAppDispatch } from "~/hooks/redux";
-import { Application, selectById } from "~/modules/applications";
 import {
   clearDeletingApp,
   deleteApplication,
 } from "~/modules/delete-application";
+import { useAppDispatch, useAppSelector } from "~/hooks/redux";
+
+import Alert from "@material-ui/lab/Alert";
+import { DELETE_APPLICATION_SUCCESS } from "~/constants/toast-text";
+import { Skeleton } from "@material-ui/lab";
 import { addToast } from "~/modules/toasts";
+import { red } from "@material-ui/core/colors";
+import { shallowEqual } from "react-redux";
 import { useStyles as useButtonStyles } from "~/styles/button";
 
 const useStyles = makeStyles((theme) => ({
   applicationName: {
     color: theme.palette.text.primary,
     fontWeight: theme.typography.fontWeightMedium,
   },
+  applicationLabels: {
+    color: theme.palette.text.primary,
+    fontWeight: theme.typography.fontWeightMedium,
+  },
   description: {
     marginBottom: theme.spacing(2),
   },
@@ -104,6 +109,24 @@ export const DeleteApplicationDialog: FC<DeleteApplicationDialogProps> = memo(
               <Skeleton height={24} width={200} />
             )}
           </Typography>
+          <div style={{ height: 24 }} /> {/* Spacer */}
+          <Typography variant="caption">Labels</Typography>
+          <Typography variant="body1" className={classes.applicationLabels}>
+            {application ? (
+              application.labelsMap.length !== 0 ? (
+                application.labelsMap.map(([key, value]) => (
+                  <Fragment key={key}>
+                    <span>{key + ": " + value}</span>
+                    <br />
+                  </Fragment>
+                ))
+              ) : (
+                "-"
+              )
+            ) : (
+              <Skeleton height={24} width={200} />
+            )}
+          </Typography>
         </DialogContent>
         <DialogActions>
           <Button onClick={handleCancel} disabled={isDeleting}>