feat: update uploaded assets table

Signed-off-by: Jeroen Branje <[email protected]>

apps/design-system/src/components/Atoms/IconButtonWithTooltip/IconButtonWithTooltip.stories.tsx

@@ -0,0 +1,23 @@
+import { Meta, Story } from '@storybook/react'
+import React from 'react'
+
+import IconButtonWithTooltip from './IconButtonWithTooltip'
+
+export default {
+  component: IconButtonWithTooltip,
+  title: 'Components/IconButtonWithTooltip',
+} as Meta
+
+const Template: Story = ({ icon, onClick, description }) => (
+  <IconButtonWithTooltip icon={icon} onClick={() => onClick()}>
+    {description}
+  </IconButtonWithTooltip>
+)
+
+export const IconButtonWithTooltipStory = Template.bind({})
+
+IconButtonWithTooltipStory.args = {
+  icon: <span>ICON</span>,
+  onClick: () => console.log('action'),
+  description: 'Tooltip content',
+}

apps/design-system/src/components/Atoms/IconButtonWithTooltip/IconButtonWithTooltip.tsx

@@ -0,0 +1,47 @@
+import React, { FC, ReactNode, useState } from 'react'
+
+import { TooltipType } from '../../../types'
+
+interface Props {
+  icon: JSX.Element
+  type?: TooltipType
+  children: ReactNode
+  disabled?: boolean
+  onClick: () => void
+}
+
+const IconButtonWithTooltip: FC<Props> = ({ icon, children, disabled = false, onClick }) => {
+  const [hover, setHover] = useState(false)
+
+  const handleMouseIn = () => !disabled && setHover(true)
+
+  const handleMouseOut = () => !disabled && setHover(false)
+
+  const styles = hover ? 'opacity-100 visible duration-100' : 'delay-300 opacity-0 invisible'
+
+  return (
+    <div className="relative flex items-center justify-center">
+      <button
+        onMouseOver={handleMouseIn}
+        onMouseOut={handleMouseOut}
+        onFocus={handleMouseIn}
+        onBlur={handleMouseOut}
+        disabled={disabled}
+        type="button"
+        onClick={() => !disabled && onClick()}
+        className={`inline-flex items-center text-gray-600 hover:text-gray-800 text-sm font-semibold disabled:cursor-not-allowed disabled:text-gray-400 disabled:hover:text-gray-400`}
+      >
+        {icon}
+      </button>
+      <div
+        role="tooltip"
+        className={`${styles} flex justify-center absolute z-30 bottom-full py-2 px-3 text-xs font-medium rounded-lg shadow-lg tracking-wide text-white bg-gray-700 transition mb-3 border border-gray-600`}
+      >
+        {children}
+        <div className="block w-3 h-3 bg-gray-700 absolute -bottom-1.5 mx-auto transform rotate-45 z-0 border-r border-b border-gray-600" />
+      </div>
+    </div>
+  )
+}
+
+export default IconButtonWithTooltip

apps/design-system/src/components/Atoms/IconButtonWithTooltip/IconButtonWithTooltip.ui.test.tsx

@@ -0,0 +1,22 @@
+import { render, screen } from '@testing-library/react'
+import React from 'react'
+
+import IconButtonWithTooltip from './IconButtonWithTooltip'
+
+describe('atoms/IconButtonWithTooltip', () => {
+  describe('render', () => {
+    it('should render IconButtonWithTooltip with content', () => {
+      const content = 'Tooltip content'
+      // when ... rendering component
+      render(
+        <IconButtonWithTooltip icon={<span>Button</span>} onClick={() => {}}>
+          {content}
+        </IconButtonWithTooltip>,
+      )
+      const IconButtonWithTooltipElement = screen.getByText(content)
+
+      // then ... should render as expected
+      expect(IconButtonWithTooltipElement).toBeInTheDocument()
+    })
+  })
+})

apps/design-system/src/components/Atoms/IconButtonWithTooltip/index.ts

@@ -0,0 +1 @@
+export { default as IconButtonWithTooltip } from './IconButtonWithTooltip'

apps/design-system/src/index.ts

@@ -18,6 +18,7 @@ export {
 export { Grid, GridRow } from './components/Atoms/Grid'
 export { Heading } from './components/Atoms/Heading'
 export { HeadingWithTooltip } from './components/Atoms/HeadingWithTooltip'
+export { IconButtonWithTooltip } from './components/Atoms/IconButtonWithTooltip'
 export { LoadingIndicator } from './components/Atoms/LoadingIndicator'
 export { MemberProfileCard } from './components/Molecules/MemberProfileCard'
 export { Nav, NavItem } from './components/Atoms/Nav'

apps/envited.ascs.digital/common/serverActions/assets/insert.ts

@@ -11,7 +11,7 @@ import { forbiddenError, formatError, internalServerErrorError, unauthorizedErro
 
 export const _insert =
   ({ db, getServerSession, log }: { db: Database; getServerSession: () => Promise<Session | null>; log: Log }) =>
-  async ({ cid, name }: { cid: string, name: string }) => {
+  async ({ cid, name }: { cid: string; name: string }) => {
     try {
       const session = await getServerSession()
       if (isNil(session)) {

apps/envited.ascs.digital/common/types/index.ts

@@ -1,4 +1,15 @@
-export { Language, AssetStatus, ButtonType, Columns, Size, ColorScheme, Role, CredentialType, FileType } from './types'
+export {
+  Language,
+  AssetAction,
+  AssetStatus,
+  ButtonType,
+  Columns,
+  Size,
+  ColorScheme,
+  Role,
+  CredentialType,
+  FileType,
+} from './types'
 export type {
   Action,
   Asset,

apps/envited.ascs.digital/common/types/types.ts

@@ -18,6 +18,12 @@ export enum AssetStatus {
   completed = 'completed',
 }
 
+export enum AssetAction {
+  mint = 'mint',
+  view = 'view',
+  delete = 'delete',
+}
+
 export enum Columns {
   two = 'two',
   three = 'three',
@@ -78,6 +84,7 @@ export interface Asset {
   metadata: AssetMetadata
   status: AssetStatus
   userId: string
+  createdAt: Date
 }
 
 export interface AssetMetadata {

apps/envited.ascs.digital/common/utils/index.ts

@@ -18,6 +18,7 @@ export {
   extractIdFromCredential,
   extractIssuerIdFromCredential,
   extractTypeFromCredential,
+  formatDate,
   formatTokenAttributes,
   getImageUrl,
   slugify,
@@ -27,5 +28,6 @@ export {
   slugToLabel,
   isTrustAnchor,
   truncateDID,
+  truncateCID,
   isServer,
 } from './utils'

apps/envited.ascs.digital/common/utils/utils.ts

@@ -76,6 +76,8 @@ export const truncate = (length: number) =>
 
 export const truncateDID = truncate(20)
 
+export const truncateCID = truncate(10)
+
 export const isServer = () => typeof window === 'undefined'
 
 export const addUrn = (type: string) => (uuid: string) => `urn:${type}:${uuid}`
@@ -106,3 +108,7 @@ export const formatTokenAttributes = (data: any) => {
 
   return result
 }
+
+export const formatDate = (date: Date) => {
+  return new Date(date).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })
+}

apps/envited.ascs.digital/modules/AddAssets/AddAssets.actions.ts

@@ -3,13 +3,13 @@
 import { revalidatePath } from 'next/cache'
 import { isNil } from 'ramda'
 
+import { createFilename } from '../../common/asset/utils'
 import { getServerSession } from '../../common/auth'
-import { getAssetUploadUrl, getUniqueFilename } from '../../common/aws'
+import { getAssetUploadUrl } from '../../common/aws'
 import { ERRORS } from '../../common/constants'
 import { log } from '../../common/logger'
 import { insertAsset } from '../../common/serverActions'
 import { badRequestError, formatError, internalServerErrorError, slugify, unauthorizedError } from '../../common/utils'
-import { createFilename } from 'apps/envited.ascs.digital/common/asset/utils'
 
 export async function addAssetsForm(formData: FormData) {
   const assets = formData.getAll('assets') as File[]
@@ -44,7 +44,7 @@ export async function addAssetsForm(formData: FormData) {
 
       await insertAsset({
         cid,
-        name: asset.name, 
+        name: asset.name,
       })
 
       return uploadResult

apps/envited.ascs.digital/modules/Assets/Assets.tsx

@@ -169,46 +169,39 @@ export const Assets: FC<AssetsProps> = ({ items }) => {
         </form>
         <div className="lg:col-span-3">
           <div className="grid grid-cols-1 gap-y-4 sm:grid-cols-2 sm:gap-x-6 sm:gap-y-10 lg:gap-x-8 xl:grid-cols-3">
-            {map(
-              ({
-                id,
-                displayUri,
-                name,
-                description,
-              }: Token) => (
-                <div
-                  key={id}
-                  className="group relative flex flex-col overflow-hidden rounded-lg border border-gray-200 bg-white"
-                >
-                  <div className="aspect-h-3 aspect-w-4 bg-gray-200 sm:aspect-none group-hover:opacity-75 sm:h-48">
-                    <img
-                      src={displayUri}
-                      alt={name}
-                      className="h-48 w-full object-cover object-center sm:h-48 sm:w-full"
-                    />
-                  </div>
-                  <div className="flex flex-1 flex-col space-y-2 p-4">
-                    <p className="text-sm italic text-gray-500">{id}</p>
-                    <h3 className="text-sm font-medium text-gray-900">
-                      <a href={`/assets/${id}`} className="break-all">
-                        <span aria-hidden="true" className="absolute inset-0" />
-                        {name}
-                      </a>
-                    </h3>
-                    <p className="text-sm text-gray-500">{description}</p>
-                    <div className="flex justify-between pt-4">
-                      <a
-                        href={`/assets/${id}`}
-                        className="whitespace-nowrap text-sm font-medium text-blue-900 hover:text-blue-800"
-                      >
-                        View
-                        <span aria-hidden="true"> &rarr;</span>
-                      </a>
-                    </div>
+            {map(({ id, displayUri, name, description }: Token) => (
+              <div
+                key={id}
+                className="group relative flex flex-col overflow-hidden rounded-lg border border-gray-200 bg-white"
+              >
+                <div className="aspect-h-3 aspect-w-4 bg-gray-200 sm:aspect-none group-hover:opacity-75 sm:h-48">
+                  <img
+                    src={displayUri}
+                    alt={name}
+                    className="h-48 w-full object-cover object-center sm:h-48 sm:w-full"
+                  />
+                </div>
+                <div className="flex flex-1 flex-col space-y-2 p-4">
+                  <p className="text-sm italic text-gray-500">{id}</p>
+                  <h3 className="text-sm font-medium text-gray-900">
+                    <a href={`/assets/${id}`} className="break-all">
+                      <span aria-hidden="true" className="absolute inset-0" />
+                      {name}
+                    </a>
+                  </h3>
+                  <p className="text-sm text-gray-500">{description}</p>
+                  <div className="flex justify-between pt-4">
+                    <a
+                      href={`/assets/${id}`}
+                      className="whitespace-nowrap text-sm font-medium text-blue-900 hover:text-blue-800"
+                    >
+                      View
+                      <span aria-hidden="true"> &rarr;</span>
+                    </a>
                   </div>
                 </div>
-              ),
-            )(items)}
+              </div>
+            ))(items)}
           </div>
         </div>
       </div>

apps/envited.ascs.digital/modules/Mint/Mint.tsx

@@ -1,5 +1,7 @@
 'use client'
 
+import { IconButtonWithTooltip } from '@envited-x-data-space/design-system'
+import { RocketLaunchIcon } from '@heroicons/react/24/outline'
 import React, { FC } from 'react'
 
 import { useTranslation } from '../../common/i18n'
@@ -10,9 +12,10 @@ import { ShowSpecificBeaconWallets } from './Mint.utils'
 
 interface MintProps {
   assetId: string
+  disabled: boolean
 }
 
-export const Mint: FC<MintProps> = ({ assetId }) => {
+export const Mint: FC<MintProps> = ({ assetId, disabled }) => {
   const { t } = useTranslation('Mint')
   const { error, success } = useNotification()
 
@@ -40,12 +43,12 @@ export const Mint: FC<MintProps> = ({ assetId }) => {
     }
   }
   return (
-    <button
-      type="button"
-      className="inline-flex items-center rounded-md bg-blue-900 hover:bg-blue-800 px-2.5 py-1.5 text-sm font-semibold text-white disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-gray-300"
+    <IconButtonWithTooltip
+      disabled={disabled}
+      icon={<RocketLaunchIcon className="h-4 w-4" aria-hidden="true" />}
       onClick={() => mintAsset(assetId)}
     >
       {t('[Button] mint')}
-    </button>
+    </IconButtonWithTooltip>
   )
 }

apps/envited.ascs.digital/modules/UploadedAsset/UploadAsset.constants.ts

@@ -0,0 +1,9 @@
+import { AssetAction, AssetStatus } from '../../common/types'
+
+export const enabledActionsMap = {
+  [AssetStatus.processing]: [],
+  [AssetStatus.rejected]: [AssetAction.delete],
+  [AssetStatus.minted]: [AssetAction.view],
+  [AssetStatus.completed]: [AssetAction.view],
+  [AssetStatus.pending]: [AssetAction.mint, AssetAction.delete],
+}