Chore: frontend infrastructure upgrade (#16420)

Co-authored-by: NFish <douxc512@gmail.com>
Co-authored-by: zxhlyh <jasonapring2015@outlook.com>
Co-authored-by: twwu <twwu@dify.ai>
Co-authored-by: jZonG <jzongcode@gmail.com>

web/app/components/workflow/nodes/http/components/api-input.tsx

@@ -53,9 +53,9 @@ const ApiInput: FC<Props> = ({
         onChange={onMethodChange}
         options={MethodOptions}
         trigger={
-          <div className={cn(readonly && 'cursor-pointer', 'h-8 shrink-0 flex items-center px-2.5 bg-gray-100 border-black/5 rounded-lg')} >
-            <div className='w-12 pl-0.5 leading-[18px] text-xs font-medium text-gray-900 uppercase'>{method}</div>
-            {!readonly && <RiArrowDownSLine className='ml-1 w-3.5 h-3.5 text-gray-700' />}
+          <div className={cn(readonly && 'cursor-pointer', 'flex h-8 shrink-0 items-center rounded-lg border-black/5 bg-gray-100 px-2.5')} >
+            <div className='w-12 pl-0.5 text-xs font-medium uppercase leading-[18px] text-gray-900'>{method}</div>
+            {!readonly && <RiArrowDownSLine className='ml-1 h-3.5 w-3.5 text-gray-700' />}
           </div>
         }
         popupClassName='top-[34px] w-[108px]'
@@ -65,7 +65,7 @@ const ApiInput: FC<Props> = ({
 
       <Input
         instanceId='http-api-url'
-        className={cn(isFocus ? 'shadow-xs bg-gray-50 border-gray-300' : 'bg-gray-100 border-gray-100', 'w-0 grow rounded-lg px-3 py-[6px] border')}
+        className={cn(isFocus ? 'border-gray-300 bg-gray-50 shadow-xs' : 'border-gray-100 bg-gray-100', 'w-0 grow rounded-lg border px-3 py-[6px]')}
         value={url}
         onChange={onUrlChange}
         readOnly={readonly}

web/app/components/workflow/nodes/http/components/authorization/index.tsx

@@ -17,7 +17,7 @@ import cn from '@/utils/classnames'
 
 const i18nPrefix = 'workflow.nodes.http.authorization'
 
-interface Props {
+type Props = {
   nodeId: string
   payload: AuthorizationPayloadType
   onChange: (payload: AuthorizationPayloadType) => void
@@ -25,10 +25,10 @@ interface Props {
   onHide: () => void
 }
 
-const Field = ({ title, isRequired, children }: { title: string; isRequired?: boolean; children: JSX.Element }) => {
+const Field = ({ title, isRequired, children }: { title: string; isRequired?: boolean; children: React.JSX.Element }) => {
   return (
     <div>
-      <div className='leading-8 text-[13px] font-medium text-gray-700'>
+      <div className='text-[13px] font-medium leading-8 text-gray-700'>
         {title}
         {isRequired && <span className='ml-0.5 text-[#D92D20]'>*</span>}
       </div>
@@ -158,7 +158,7 @@ const Authorization: FC<Props> = ({
                 <div className='flex'>
                   <Input
                     instanceId='http-api-key'
-                    className={cn(isFocus ? 'shadow-xs bg-gray-50 border-gray-300' : 'bg-gray-100 border-gray-100', 'w-0 grow rounded-lg px-3 py-[6px] border')}
+                    className={cn(isFocus ? 'border-gray-300 bg-gray-50 shadow-xs' : 'border-gray-100 bg-gray-100', 'w-0 grow rounded-lg border px-3 py-[6px]')}
                     value={tempPayload.config?.api_key || ''}
                     onChange={handleAPIKeyChange}
                     nodesOutputVars={availableVars}

web/app/components/workflow/nodes/http/components/authorization/radio-group.tsx

@@ -22,7 +22,7 @@ const Item: FC<ItemProps> = ({
     <div
       className={cn(
         isSelected ? 'border-[2px] border-primary-400 bg-white shadow-xs' : 'border border-gray-100 bg-gray-25',
-        'w-0 grow flex items-center justify-center h-8 cursor-pointer rounded-lg text-[13px] font-normal text-gray-900')
+        'flex h-8 w-0 grow cursor-pointer items-center justify-center rounded-lg text-[13px] font-normal text-gray-900')
       }
       onClick={onClick}
     >

web/app/components/workflow/nodes/http/components/curl-panel.tsx

@@ -143,7 +143,7 @@ const CurlPanel: FC<Props> = ({ nodeId, isShow, onHide, handleCurlImport }) => {
       <div>
         <textarea
           value={inputString}
-          className='w-full my-3 p-3 text-sm text-gray-900 border-0 rounded-lg grow bg-gray-100 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200 h-40'
+          className='my-3 h-40 w-full grow rounded-lg border-0 bg-gray-100 p-3 text-sm text-gray-900 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200'
           onChange={e => setInputString(e.target.value)}
           placeholder={t('workflow.nodes.http.curl.placeholder')!}
         />

web/app/components/workflow/nodes/http/components/edit-body/index.tsx

@@ -15,7 +15,7 @@ import { VarType } from '@/app/components/workflow/types'
 
 const UNIQUE_ID_PREFIX = 'key-value-'
 
-interface Props {
+type Props = {
   readonly: boolean
   nodeId: string
   payload: Body
@@ -135,7 +135,7 @@ const EditBody: FC<Props> = ({
       {/* body type */}
       <div className='flex flex-wrap'>
         {allTypes.map(t => (
-          <label key={t} htmlFor={`body-type-${t}`} className='mr-4 flex items-center h-7 space-x-2'>
+          <label key={t} htmlFor={`body-type-${t}`} className='mr-4 flex h-7 items-center space-x-2'>
             <input
               type="radio"
               id={`body-type-${t}`}
@@ -144,7 +144,7 @@ const EditBody: FC<Props> = ({
               onChange={handleTypeChange}
               disabled={readonly}
             />
-            <div className='leading-[18px] text-[13px] font-normal text-gray-700'>{bodyTextMap[t]}</div>
+            <div className='text-[13px] font-normal leading-[18px] text-gray-700'>{bodyTextMap[t]}</div>
           </label>
         ))}
       </div>

web/app/components/workflow/nodes/http/components/key-value/bulk-edit/index.tsx

@@ -43,15 +43,15 @@ const BulkEdit: FC<Props> = ({
         onChange={handleChange}
         onBlur={handleBlur}
         headerRight={
-          <div className='flex items-center h-[18px]'>
+          <div className='flex h-[18px] items-center'>
             <div
-              className='flex items-center space-x-1 cursor-pointer'
+              className='flex cursor-pointer items-center space-x-1'
               onClick={handleSwitchToKeyValueEdit}
             >
-              <LayoutGrid02 className='w-3 h-3 text-gray-500' />
-              <div className='leading-[18px] text-xs font-normal text-gray-500'>{t(`${i18nPrefix}.keyValueEdit`)}</div>
+              <LayoutGrid02 className='h-3 w-3 text-gray-500' />
+              <div className='text-xs font-normal leading-[18px] text-gray-500'>{t(`${i18nPrefix}.keyValueEdit`)}</div>
             </div>
-            <div className='ml-3 mr-1.5 w-px h-3 bg-gray-200'></div>
+            <div className='ml-3 mr-1.5 h-3 w-px bg-gray-200'></div>
           </div>
         }
         minHeight={150}

web/app/components/workflow/nodes/http/components/key-value/index.tsx

@@ -4,7 +4,7 @@ import React from 'react'
 import type { KeyValue } from '../../types'
 import KeyValueEdit from './key-value-edit'
 
-interface Props {
+type Props = {
   readonly: boolean
   nodeId: string
   list: KeyValue[]

web/app/components/workflow/nodes/http/components/key-value/key-value-edit/index.tsx

@@ -9,7 +9,7 @@ import cn from '@/utils/classnames'
 
 const i18nPrefix = 'workflow.nodes.http'
 
-interface Props {
+type Props = {
   readonly: boolean
   nodeId: string
   list: KeyValue[]
@@ -56,11 +56,11 @@ const KeyValueList: FC<Props> = ({
     return null
 
   return (
-    <div className='border border-divider-regular rounded-lg overflow-hidden'>
-      <div className={cn('flex items-center h-7 leading-7 text-text-tertiary system-xs-medium-uppercase')}>
-        <div className={cn('h-full pl-3 border-r border-divider-regular', isSupportFile ? 'w-[140px]' : 'w-1/2')}>{t(`${i18nPrefix}.key`)}</div>
-        {isSupportFile && <div className='shrink-0 w-[70px] h-full pl-3 border-r border-divider-regular'>{t(`${i18nPrefix}.type`)}</div>}
-        <div className={cn('h-full pl-3 pr-1 items-center justify-between', isSupportFile ? 'grow' : 'w-1/2')}>{t(`${i18nPrefix}.value`)}</div>
+    <div className='overflow-hidden rounded-lg border border-divider-regular'>
+      <div className={cn('system-xs-medium-uppercase flex h-7 items-center leading-7 text-text-tertiary')}>
+        <div className={cn('h-full border-r border-divider-regular pl-3', isSupportFile ? 'w-[140px]' : 'w-1/2')}>{t(`${i18nPrefix}.key`)}</div>
+        {isSupportFile && <div className='h-full w-[70px] shrink-0 border-r border-divider-regular pl-3'>{t(`${i18nPrefix}.type`)}</div>}
+        <div className={cn('h-full items-center justify-between pl-3 pr-1', isSupportFile ? 'grow' : 'w-1/2')}>{t(`${i18nPrefix}.value`)}</div>
       </div>
       {
         list.map((item, index) => (

web/app/components/workflow/nodes/http/components/key-value/key-value-edit/input-item.tsx

@@ -8,7 +8,7 @@ import RemoveButton from '@/app/components/workflow/nodes/_base/components/remov
 import Input from '@/app/components/workflow/nodes/_base/components/input-support-select-var'
 import type { Var } from '@/app/components/workflow/types'
 import { VarType } from '@/app/components/workflow/types'
-interface Props {
+type Props = {
   className?: string
   instanceId?: string
   nodeId: string
@@ -57,7 +57,7 @@ const InputItem: FC<Props> = ({
   }, [onRemove])
 
   return (
-    <div className={cn(className, 'hover:bg-gray-50 hover:cursor-text', 'relative flex h-full')}>
+    <div className={cn(className, 'hover:cursor-text hover:bg-gray-50', 'relative flex h-full')}>
       {(!readOnly)
         ? (
           <Input
@@ -76,13 +76,13 @@ const InputItem: FC<Props> = ({
           />
         )
         : <div
-          className="pl-0.5 w-full h-[18px] leading-[18px]"
+          className="h-[18px] w-full pl-0.5 leading-[18px]"
         >
-          {!hasValue && <div className='text-gray-300 text-xs font-normal'>{placeholder}</div>}
+          {!hasValue && <div className='text-xs font-normal text-gray-300'>{placeholder}</div>}
           {hasValue && (
             <Input
               instanceId={instanceId}
-              className={cn(isFocus ? 'shadow-xs bg-gray-50 border-gray-300' : 'bg-gray-100 border-gray-100', 'w-0 grow rounded-lg px-3 py-[6px] border')}
+              className={cn(isFocus ? 'border-gray-300 bg-gray-50 shadow-xs' : 'border-gray-100 bg-gray-100', 'w-0 grow rounded-lg border px-3 py-[6px]')}
               value={value}
               onChange={onChange}
               readOnly={readOnly}
@@ -99,7 +99,7 @@ const InputItem: FC<Props> = ({
         </div>}
       {hasRemove && !isFocus && (
         <RemoveButton
-          className='group-hover:block hidden absolute right-1 top-0.5'
+          className='absolute right-1 top-0.5 hidden group-hover:block'
           onClick={handleRemove}
         />
       )}

web/app/components/workflow/nodes/http/components/key-value/key-value-edit/item.tsx

@@ -14,7 +14,7 @@ import { VarType } from '@/app/components/workflow/types'
 
 const i18nPrefix = 'workflow.nodes.http'
 
-interface Props {
+type Props = {
   instanceId: string
   className?: string
   nodeId: string
@@ -62,7 +62,7 @@ const KeyValueItem: FC<Props> = ({
 
   return (
     // group class name is for hover row show remove button
-    <div className={cn(className, 'group flex h-min-7 border-t border-gray-200')}>
+    <div className={cn(className, 'h-min-7 group flex border-t border-gray-200')}>
       <div className={cn('shrink-0 border-r border-divider-regular', isSupportFile ? 'w-[140px]' : 'w-1/2')}>
         {!keyNotSupportVar
           ? (
@@ -79,14 +79,14 @@ const KeyValueItem: FC<Props> = ({
           )
           : (
             <input
-              className='appearance-none outline-none rounded-none bg-white border-none system-sm-regular focus:ring-0 focus:bg-gray-100! hover:bg-gray-50'
+              className='system-sm-regular focus:bg-gray-100! appearance-none rounded-none border-none bg-white outline-none hover:bg-gray-50 focus:ring-0'
               value={payload.key}
               onChange={e => handleChange('key')(e.target.value)}
             />
           )}
       </div>
       {isSupportFile && (
-        <div className='shrink-0 w-[70px] border-r border-divider-regular'>
+        <div className='w-[70px] shrink-0 border-r border-divider-regular'>
           <PortalSelect
             value={payload.type!}
             onSelect={item => handleChange('type')(item.value as string)}

web/app/components/workflow/nodes/http/components/timeout/index.tsx

@@ -6,7 +6,7 @@ import type { Timeout as TimeoutPayloadType } from '../../types'
 import Input from '@/app/components/base/input'
 import { FieldCollapse } from '@/app/components/workflow/nodes/_base/components/collapse'
 
-interface Props {
+type Props = {
   readonly: boolean
   nodeId: string
   payload: TimeoutPayloadType
@@ -27,7 +27,7 @@ const InputField: FC<{
 }> = ({ title, description, placeholder, value, onChange, readOnly, min, max }) => {
   return (
     <div className="space-y-1">
-      <div className="flex items-center h-[18px] space-x-2">
+      <div className="flex h-[18px] items-center space-x-2">
         <span className="text-[13px] font-medium text-gray-900">{title}</span>
         <span className="text-xs font-normal text-gray-500">{description}</span>
       </div>

web/app/components/workflow/nodes/http/node.tsx

@@ -13,8 +13,8 @@ const Node: FC<NodeProps<HttpNodeType>> = ({
 
   return (
     <div className='mb-1 px-3 py-1'>
-      <div className='flex items-start p-1 rounded-md bg-gray-100'>
-        <div className='flex items-center h-4 shrink-0 px-1 rounded bg-gray-25 text-xs font-semibold text-gray-700 uppercase'>{method}</div>
+      <div className='flex items-start rounded-md bg-gray-100 p-1'>
+        <div className='flex h-4 shrink-0 items-center rounded bg-gray-25 px-1 text-xs font-semibold uppercase text-gray-700'>{method}</div>
         <div className='pl-1 pt-1'>
           <ReadonlyInputWithSelectVar
             value={url}

web/app/components/workflow/nodes/http/panel.tsx

@@ -66,16 +66,16 @@ const Panel: FC<NodePanelProps<HttpNodeType>> = ({
 
   return (
     <div className='pt-2'>
-      <div className='px-4 pb-4 space-y-4'>
+      <div className='space-y-4 px-4 pb-4'>
         <Field
           title={t(`${i18nPrefix}.api`)}
           operations={
             <div className='flex'>
               <div
                 onClick={showAuthorization}
-                className={cn(!readOnly && 'cursor-pointer hover:bg-gray-50', 'flex items-center h-6 space-x-1 px-2 rounded-md ')}
+                className={cn(!readOnly && 'cursor-pointer hover:bg-gray-50', 'flex h-6 items-center space-x-1 rounded-md px-2 ')}
               >
-                {!readOnly && <Settings01 className='w-3 h-3 text-gray-500' />}
+                {!readOnly && <Settings01 className='h-3 w-3 text-gray-500' />}
                 <div className='text-xs font-medium text-gray-500'>
                   {t(`${i18nPrefix}.authorization.authorization`)}
                   <span className='ml-1 text-gray-700'>{t(`${i18nPrefix}.authorization.${inputs.authorization.type}`)}</span>
@@ -83,9 +83,9 @@ const Panel: FC<NodePanelProps<HttpNodeType>> = ({
               </div>
               <div
                 onClick={showCurlPanel}
-                className={cn(!readOnly && 'cursor-pointer hover:bg-gray-50', 'flex items-center h-6 space-x-1 px-2 rounded-md ')}
+                className={cn(!readOnly && 'cursor-pointer hover:bg-gray-50', 'flex h-6 items-center space-x-1 rounded-md px-2 ')}
               >
-                {!readOnly && <FileArrow01 className='w-3 h-3 text-gray-500' />}
+                {!readOnly && <FileArrow01 className='h-3 w-3 text-gray-500' />}
                 <div className='text-xs font-medium text-gray-500'>
                   {t(`${i18nPrefix}.curl.title`)}
                 </div>

web/app/components/workflow/nodes/http/types.ts

@@ -18,7 +18,7 @@ export enum BodyType {
   binary = 'binary',
 }
 
-export interface KeyValue {
+export type KeyValue = {
   id?: string
   key: string
   value: string
@@ -38,7 +38,7 @@ export type BodyPayload = {
   file?: ValueSelector // when type is file
   value?: string // when type is text
 }[]
-export interface Body {
+export type Body = {
   type: BodyType
   data: string | BodyPayload // string is deprecated, it would convert to BodyPayload after loaded
 }
@@ -54,7 +54,7 @@ export enum APIType {
   custom = 'custom',
 }
 
-export interface Authorization {
+export type Authorization = {
   type: AuthorizationType
   config?: {
     type: APIType
@@ -63,7 +63,7 @@ export interface Authorization {
   } | null
 }
 
-export interface Timeout {
+export type Timeout = {
   connect?: number
   read?: number
   write?: number