feat: support app rename and make app card ui better (#766)

Co-authored-by: Gillian97 <jinling.sunshine@gmail.com>

web/app/components/base/confirm-ui/index.tsx

@@ -41,8 +41,8 @@ const ConfirmUI: FC<IConfirmUIProps> = ({
       </div>
 
       <div className='flex gap-3 mt-4 ml-12'>
-        <div onClick={onConfirm} className='w-20 leading-9 text-center text-white border rounded-lg cursor-pointer h-9 border-color-primary-700 bg-primary-700'>{confirmText || t('common.operation.confirm')}</div>
-        <div onClick={onCancel} className='w-20 leading-9 text-center text-gray-500 border rounded-lg cursor-pointer h-9 border-color-gray-200'>{cancelText || t('common.operation.cancel')}</div>
+        <div onClick={onConfirm} className='w-20 leading-[34px] text-center text-white border rounded-lg cursor-pointer h-9 border-color-primary-700 bg-primary-700'>{confirmText || t('common.operation.confirm')}</div>
+        <div onClick={onCancel} className='w-20 leading-[34px] text-center text-gray-500 border rounded-lg cursor-pointer h-9 border-color-gray-200'>{cancelText || t('common.operation.cancel')}</div>
       </div>
     </div>
 

web/app/components/base/confirm/index.tsx

@@ -1,7 +1,7 @@
 import { Dialog, Transition } from '@headlessui/react'
 import { Fragment } from 'react'
-import ConfirmUI from '../confirm-ui'
 import { useTranslation } from 'react-i18next'
+import ConfirmUI from '../confirm-ui'
 
 // https://headlessui.com/react/dialog
 

web/app/components/base/copy-feedback/index.tsx

@@ -0,0 +1,56 @@
+'use client'
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { debounce } from 'lodash-es'
+import copy from 'copy-to-clipboard'
+import Tooltip from '../tooltip'
+import copyStyle from './style.module.css'
+
+type Props = {
+  content: string
+  selectorId: string
+  className?: string
+}
+
+const prefixEmbedded = 'appOverview.overview.appInfo.embedded'
+
+const CopyFeedback = ({ content, selectorId, className }: Props) => {
+  const { t } = useTranslation()
+  const [isCopied, setIsCopied] = useState<boolean>(false)
+
+  const onClickCopy = debounce(() => {
+    copy(content)
+    setIsCopied(true)
+  }, 100)
+
+  const onMouseLeave = debounce(() => {
+    setIsCopied(false)
+  }, 100)
+
+  return (
+    <Tooltip
+      selector={`common-copy-feedback-${selectorId}`}
+      content={
+        (isCopied
+          ? t(`${prefixEmbedded}.copied`)
+          : t(`${prefixEmbedded}.copy`)) || ''
+      }
+    >
+      <div
+        className={`w-8 h-8 cursor-pointer hover:bg-gray-100 rounded-lg ${
+          className ?? ''
+        }`}
+        onMouseLeave={onMouseLeave}
+      >
+        <div
+          onClick={onClickCopy}
+          className={`w-full h-full ${copyStyle.copyIcon} ${
+            isCopied ? copyStyle.copied : ''
+          }`}
+        ></div>
+      </div>
+    </Tooltip>
+  )
+}
+
+export default CopyFeedback

web/app/components/base/copy-feedback/style.module.css

@@ -0,0 +1,15 @@
+.copyIcon {
+  background-image: url(~@/app/components/develop/secret-key/assets/copy.svg);
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.copyIcon:hover {
+  background-image: url(~@/app/components/develop/secret-key/assets/copy-hover.svg);
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.copyIcon.copied {
+  background-image: url(~@/app/components/develop/secret-key/assets/copied.svg);
+}

web/app/components/base/popover/index.tsx

@@ -46,47 +46,49 @@ export default function CustomPopover({
                 : {
                   onMouseLeave: () => onMouseLeave(open),
                   onMouseEnter: () => onMouseEnter(open),
-                })
-              }
+                })}
             >
               <Popover.Button
                 ref={buttonRef}
-                className={`group ${s.popupBtn} ${open ? '' : 'bg-gray-100'} ${!btnClassName ? '' : typeof btnClassName === 'string' ? btnClassName : btnClassName?.(open)}`}
+                className={`group ${s.popupBtn} ${open ? '' : 'bg-gray-100'} ${
+                  !btnClassName
+                    ? ''
+                    : typeof btnClassName === 'string'
+                      ? btnClassName
+                      : btnClassName?.(open)
+                }`}
               >
                 {btnElement}
               </Popover.Button>
-              <Transition
-                as={Fragment}
-                enter="transition ease-out duration-200"
-                enterFrom="opacity-0 translate-y-1"
-                enterTo="opacity-100 translate-y-0"
-                leave="transition ease-in duration-150"
-                leaveFrom="opacity-100 translate-y-0"
-                leaveTo="opacity-0 translate-y-1"
-              >
+              <Transition as={Fragment}>
                 <Popover.Panel
-                  className={`${s.popupPanel} ${position === 'br' ? 'right-0' : 'transform -translate-x-1/2 left-1/2'} ${className}`}
+                  className={`${s.popupPanel} ${
+                    position === 'br'
+                      ? 'right-0'
+                      : 'transform -translate-x-1/2 left-1/2'
+                  } ${className}`}
                   {...(trigger !== 'hover'
                     ? {}
                     : {
                       onMouseLeave: () => onMouseLeave(open),
                       onMouseEnter: () => onMouseEnter(open),
-                    })
-                  }>
-                  <div
-                    className={s.panelContainer}
-                    {...(trigger !== 'hover'
-                      ? {}
-                      : {
-                        onMouseLeave: () => onMouseLeave(open),
-                        onMouseEnter: () => onMouseEnter(open),
-                      })
-                    }
-                  >
-                    {cloneElement(htmlContent as React.ReactElement, {
-                      onClose: () => onMouseLeave(open),
                     })}
-                  </div>
+                >
+                  {({ close }) => (
+                    <div
+                      className={s.panelContainer}
+                      {...(trigger !== 'hover'
+                        ? {}
+                        : {
+                          onMouseLeave: () => onMouseLeave(open),
+                          onMouseEnter: () => onMouseEnter(open),
+                        })}
+                    >
+                      {cloneElement(htmlContent as React.ReactElement, {
+                        onClose: () => close(),
+                      })}
+                    </div>
+                  )}
                 </Popover.Panel>
               </Transition>
             </div>