chore: fill repo url

web/app/components/plugins/base/key-value-item.tsx

@@ -2,7 +2,6 @@
 import type { FC } from 'react'
 import React, { useCallback, useEffect, useState } from 'react'
 import copy from 'copy-to-clipboard'
-
 import {
   RiClipboardLine,
 } from '@remixicon/react'
@@ -11,16 +10,19 @@ import { ClipboardCheck } from '../../base/icons/src/vender/line/files'
 import Tooltip from '../../base/tooltip'
 import cn from '@/utils/classnames'
 import ActionButton from '@/app/components/base/action-button'
+
 type Props = {
   label: string
   labelWidthClassName?: string
   value: string
+  valueMaxWidthClassName?: string
 }
 
 const KeyValueItem: FC<Props> = ({
   label,
   labelWidthClassName = 'w-10',
   value,
+  valueMaxWidthClassName = 'max-w-[162px]',
 }) => {
   const { t } = useTranslation()
   const [isCopied, setIsCopied] = useState(false)
@@ -46,7 +48,7 @@ const KeyValueItem: FC<Props> = ({
     <div className='flex items-center gap-1'>
       <span className={cn('flex flex-col justify-center items-start text-text-tertiary system-xs-medium', labelWidthClassName)}>{label}</span>
       <div className='flex justify-center items-center gap-0.5'>
-        <span className='max-w-[162px] truncate system-xs-medium text-text-secondary'>
+        <span className={cn(valueMaxWidthClassName, ' truncate system-xs-medium text-text-secondary')}>
           {value}
         </span>
         <Tooltip popupContent={t(`common.operation.${isCopied ? 'copied' : 'copy'}`)} position='top'>

web/app/components/plugins/plugin-page/plugin-info.tsx

@@ -4,6 +4,7 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import KeyValueItem from '../base/key-value-item'
 import Modal from '../../base/modal'
+import { convertRepoToUrl } from '../install-plugin/utils'
 
 const i18nPrefix = 'plugin.pluginInfoModal'
 type Props = {
@@ -30,7 +31,7 @@ const PlugInfo: FC<Props> = ({
       closable
     >
       <div className='mt-5 space-y-3'>
-        {repository && <KeyValueItem label={t(`${i18nPrefix}.repository`)} labelWidthClassName={labelWidthClassName} value={repository} />}
+        {repository && <KeyValueItem label={t(`${i18nPrefix}.repository`)} labelWidthClassName={labelWidthClassName} value={`${convertRepoToUrl(repository)}`} valueMaxWidthClassName='max-w-[190px]' />}
         {release && <KeyValueItem label={t(`${i18nPrefix}.release`)} labelWidthClassName={labelWidthClassName} value={release} />}
         {packageName && <KeyValueItem label={t(`${i18nPrefix}.packageName`)} labelWidthClassName={labelWidthClassName} value={packageName} />}
       </div>