add active Tile indicator, update delete prompt

Author: kevinkim-ogp

packages/frontend/src/pages/Tiles/components/TileList.tsx

@@ -5,7 +5,14 @@ import { MdOutlineRemoveRedEye } from 'react-icons/md'
 import { Link } from 'react-router-dom'
 import { useMutation } from '@apollo/client'
 import {
+  AlertDialog,
+  AlertDialogBody,
+  AlertDialogContent,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
   Box,
+  Button,
   Divider,
   Flex,
   Icon,
@@ -22,7 +29,6 @@ import {
   useToast,
 } from '@opengovsg/design-system-react'
 
-import MenuAlertDialog from '@/components/MenuAlertDialog'
 import * as URLS from '@/config/urls'
 import type { TableMetadata } from '@/graphql/__generated__/graphql'
 import { DELETE_TABLE } from '@/graphql/mutations/tiles/delete-table'
@@ -31,6 +37,14 @@ import { toPrettyDateString } from '@/helpers/dateTime'
 
 import { TileConnections } from '..'
 
+import {
+  flexStyles,
+  linkStyles,
+  pulsingDotStyles,
+  tagStyles,
+  textStyles,
+} from './style'
+
 const TileListItem = ({
   isConnectionsLoading,
   numConnections,
@@ -81,46 +95,32 @@ const TileListItem = ({
 
   return (
     <Link to={URLS.TILE(table.id)}>
-      <Flex
-        px={8}
-        py={6}
-        w="100%"
-        justifyContent="space-between"
-        alignItems="center"
-        _hover={{
-          bg: 'interaction.muted.neutral.hover',
-          '& .hover-remove-button': {
-            visibility: 'visible',
-          },
-        }}
-        _active={{
-          bg: 'interaction.muted.neutral.active',
-        }}
-      >
+      <Flex {...linkStyles}>
         <Box>
-          <Text textStyle="h6">{table.name}</Text>
-          <Flex gap={1} textStyle="body-2" color="base.content.medium">
-            <Text>Last opened {toPrettyDateString(+table.lastAccessedAt)}</Text>
-            {table.role !== 'viewer' && numConnections && (
-              <>
-                <Icon as={BsDot} fontSize="1.5em" />
-                <Skeleton isLoaded={!isConnectionsLoading}>
+          <Flex alignItems="center">
+            <Text textStyle="h6">{table.name}</Text>
+          </Flex>
+          <Flex {...flexStyles.container}>
+            <Text {...textStyles.lastOpened}>
+              Last opened {toPrettyDateString(+table.lastAccessedAt)}
+            </Text>
+            {table.role !== 'viewer' && numConnections > 0 && (
+              <Skeleton isLoaded={!isConnectionsLoading}>
+                <Flex {...flexStyles.usedInPipes}>
+                  <Icon
+                    as={BsDot}
+                    color="interaction.success.default"
+                    sx={pulsingDotStyles}
+                  />
                   <Text>Used in {numConnections} pipes</Text>
-                </Skeleton>
-              </>
+                </Flex>
+              </Skeleton>
             )}
           </Flex>
         </Box>
         <Flex alignItems="center" gap={4}>
           {table.role === 'viewer' && (
-            <Tag
-              colorScheme="secondary"
-              size="xs"
-              variant="subtle"
-              py={2}
-              gap={1}
-              pointerEvents="none"
-            >
+            <Tag {...tagStyles}>
               <TagLeftIcon as={MdOutlineRemoveRedEye} />
               <TagLabel>View only</TagLabel>
             </Tag>
@@ -137,15 +137,42 @@ const TileListItem = ({
           )}
         </Flex>
       </Flex>
-      <MenuAlertDialog
-        isDialogOpen={isDialogOpen}
-        cancelRef={cancelRef}
-        onDialogClose={onDialogClose}
-        dialogHeader="Tile"
-        dialogType="delete"
-        onClick={deleteTile}
-        isLoading={isDeletingTable}
-      />
+      <AlertDialog
+        isOpen={isDialogOpen}
+        leastDestructiveRef={cancelRef}
+        onClose={onDialogClose}
+      >
+        <AlertDialogOverlay>
+          <AlertDialogContent>
+            <AlertDialogHeader>Delete Tile</AlertDialogHeader>
+
+            <AlertDialogBody>
+              {numConnections > 0
+                ? `Are you sure? This Tile is used in ${numConnections} pipe(s). You can't undo this action afterwards.`
+                : "Are you sure? You can't undo this action afterwards."}
+            </AlertDialogBody>
+
+            <AlertDialogFooter>
+              <Button
+                ref={cancelRef}
+                onClick={onDialogClose}
+                variant="clear"
+                colorScheme="secondary"
+              >
+                Cancel
+              </Button>
+              <Button
+                colorScheme="critical"
+                onClick={deleteTile}
+                ml={3}
+                isLoading={isDeletingTable}
+              >
+                Delete
+              </Button>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialogOverlay>
+      </AlertDialog>
     </Link>
   )
 }

packages/frontend/src/pages/Tiles/components/style.ts

@@ -0,0 +1,64 @@
+import { FlexProps } from '@chakra-ui/react'
+
+export const flexStyles = {
+  container: {
+    color: 'base.content.medium',
+    direction: {
+      base: 'column',
+      md: 'row',
+    } as FlexProps['direction'],
+    textStyle: 'body-2',
+  },
+  usedInPipes: {
+    alignItems: 'center',
+    marginLeft: { base: 0, md: '-0.25em' },
+  },
+}
+
+export const linkStyles = {
+  px: 8,
+  py: 6,
+  w: '100%',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  _hover: {
+    bg: 'interaction.muted.neutral.hover',
+    '& .hover-remove-button': {
+      visibility: 'visible',
+    },
+  },
+  _active: {
+    bg: 'interaction.muted.neutral.active',
+  },
+}
+
+export const pulsingDotStyles = {
+  animation: 'pulse 2s infinite',
+  fontSize: '3em',
+  marginLeft: { base: '-0.4em', md: 0 },
+  marginTop: '-0.5em',
+  marginBottom: '-0.5em',
+  '@keyframes pulse': {
+    '0%': { opacity: 0.4 },
+    '50%': { opacity: 1 },
+    '100%': { opacity: 0.4 },
+  },
+}
+
+export const tagStyles = {
+  colorScheme: 'secondary',
+  size: 'xs',
+  variant: 'subtle',
+  py: 2,
+  gap: 1,
+  pointerEvents: 'none' as const,
+}
+
+export const textStyles = {
+  lastOpened: {
+    width: {
+      base: 'full',
+      md: '17.5em',
+    },
+  },
+}