add active Tile indicator, update delete prompt

Author: kevinkim-ogp

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

@@ -37,6 +37,14 @@ import { toPrettyDateString } from '@/helpers/dateTime'
 
 import { TileConnections } from '..'
 
+import {
+  flexStyles,
+  linkStyles,
+  pulsingDotStyles,
+  tagStyles,
+  textStyles,
+} from './style'
+
 const TileListItem = ({
   isConnectionsLoading,
   numConnections,
@@ -87,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>
@@ -153,7 +147,9 @@ const TileListItem = ({
             <AlertDialogHeader>Delete Tile</AlertDialogHeader>
 
             <AlertDialogBody>
-              {"Are you sure? You can't undo this action afterwards."}
+              {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>

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',
+    },
+  },
+}