web: Add style CI workflow to enforce eslint checks on web module (#1910)

.github/workflows/style.yml

+name: Style check
+
+on:
+  pull_request:
+    branches:
+      - main
+  push:
+    branches:
+      - deploy/dev
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v4
+
+    - name: Setup NodeJS
+      uses: actions/setup-node@v4
+      with:
+        node-version: 18
+        cache: yarn
+        cache-dependency-path: ./web/package.json
+
+    - name: Web dependencies
+      run: |
+        cd ./web
+        yarn install --frozen-lockfile
+
+    - name: Web style check
+      run: |
+        cd ./web
+        yarn run lint

web/.eslintrc.json

@@ -23,6 +23,7 @@
         ]
       }
     ],
-    "react-hooks/exhaustive-deps": "warn"
+    "react-hooks/exhaustive-deps": "warn",
+    "react/display-name": "warn"
   }
 }

web/app/(commonLayout)/datasets/DatasetFooter.tsx

 'use client'
 
-import { useTranslation } from "react-i18next"
+import { useTranslation } from 'react-i18next'
 
 const DatasetFooter = () => {
   const { t } = useTranslation()

web/app/components/app/chat/loading-anim/index.tsx

 'use client'
-import React, { FC } from 'react'
+import type { FC } from 'react'
+import React from 'react'
 import s from './style.module.css'
 
-export interface ILoaidingAnimProps {
+export type ILoaidingAnimProps = {
   type: 'text' | 'avatar'
 }
 
 const LoaidingAnim: FC<ILoaidingAnimProps> = ({
-  type
+  type,
 }) => {
   return (
     <div className={`${s['dot-flashing']} ${s[type]}`}></div>

web/app/components/app/chat/mermaid/index.tsx

@@ -23,7 +23,6 @@ const style = {
   overflow: 'auto',
 }
 
-// eslint-disable-next-line react/display-name
 const Flowchart = React.forwardRef((props: {
   PrimitiveCode: string
 }, ref) => {

web/app/components/app/configuration/base/group-name/index.tsx

 'use client'
-import React, { FC } from 'react'
+import type { FC } from 'react'
+import React from 'react'
 
-export interface IGroupNameProps {
+export type IGroupNameProps = {
   name: string
 }
 
 const GroupName: FC<IGroupNameProps> = ({
-  name
+  name,
 }) => {
   return (
     <div className='flex items-center mb-1'>

web/app/components/app/configuration/base/icons/more-like-this-icon.tsx

 'use client'
-import React, { FC } from 'react'
+import type { FC } from 'react'
+import React from 'react'
 
-const MoreLikeThisIcon: FC = ({ }) => {
+const MoreLikeThisIcon: FC = () => {
   return (
     <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path fillRule="evenodd" clipRule="evenodd" d="M5.83914 0.666748H10.1609C10.6975 0.666741 11.1404 0.666734 11.5012 0.696212C11.8759 0.726829 12.2204 0.792538 12.544 0.957399C13.0457 1.21306 13.4537 1.62101 13.7093 2.12277C13.8742 2.44633 13.9399 2.7908 13.9705 3.16553C14 3.52633 14 3.96923 14 4.50587V7.41171C14 7.62908 14 7.73776 13.9652 7.80784C13.9303 7.87806 13.8939 7.91566 13.8249 7.95288C13.756 7.99003 13.6262 7.99438 13.3665 8.00307C12.8879 8.01909 12.4204 8.14633 11.997 8.36429C10.9478 7.82388 9.62021 7.82912 8.53296 8.73228C7.15064 9.88056 6.92784 11.8645 8.0466 13.2641C8.36602 13.6637 8.91519 14.1949 9.40533 14.6492C9.49781 14.7349 9.54405 14.7777 9.5632 14.8041C9.70784 15.003 9.5994 15.2795 9.35808 15.3271C9.32614 15.3334 9.26453 15.3334 9.14129 15.3334H5.83912C5.30248 15.3334 4.85958 15.3334 4.49878 15.304C4.12405 15.2733 3.77958 15.2076 3.45603 15.0428C2.95426 14.7871 2.54631 14.3792 2.29065 13.8774C2.12579 13.5538 2.06008 13.2094 2.02946 12.8346C1.99999 12.4738 1.99999 12.0309 2 11.4943V4.50587C1.99999 3.96924 1.99999 3.52632 2.02946 3.16553C2.06008 2.7908 2.12579 2.44633 2.29065 2.12277C2.54631 1.62101 2.95426 1.21306 3.45603 0.957399C3.77958 0.792538 4.12405 0.726829 4.49878 0.696212C4.85957 0.666734 5.3025 0.666741 5.83914 0.666748ZM4.66667 5.33342C4.29848 5.33342 4 5.63189 4 6.00008C4 6.36827 4.29848 6.66675 4.66667 6.66675H8.66667C9.03486 6.66675 9.33333 6.36827 9.33333 6.00008C9.33333 5.63189 9.03486 5.33342 8.66667 5.33342H4.66667ZM4 8.66675C4 8.29856 4.29848 8.00008 4.66667 8.00008H6C6.36819 8.00008 6.66667 8.29856 6.66667 8.66675C6.66667 9.03494 6.36819 9.33342 6 9.33342H4.66667C4.29848 9.33342 4 9.03494 4 8.66675ZM4.66667 2.66675C4.29848 2.66675 4 2.96523 4 3.33342C4 3.7016 4.29848 4.00008 4.66667 4.00008H10.6667C11.0349 4.00008 11.3333 3.7016 11.3333 3.33342C11.3333 2.96523 11.0349 2.66675 10.6667 2.66675H4.66667Z" fill="#DD2590" />

web/app/components/app/configuration/base/operation-btn/index.tsx

 'use client'
-import React, { FC } from 'react'
+import type { FC } from 'react'
+import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { PlusIcon } from '@heroicons/react/20/solid'
 
-export interface IOperationBtnProps {
+export type IOperationBtnProps = {
   type: 'add' | 'edit'
   actionName?: string
   onClick: () => void
@@ -14,13 +15,13 @@ const iconMap = {
   edit: (<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M6.99998 11.6666H12.25M1.75 11.6666H2.72682C3.01217 11.6666 3.15485 11.6666 3.28912 11.6344C3.40816 11.6058 3.52196 11.5587 3.62635 11.4947C3.74408 11.4226 3.84497 11.3217 4.04675 11.1199L11.375 3.79164C11.8583 3.30839 11.8583 2.52488 11.375 2.04164C10.8918 1.55839 10.1083 1.55839 9.62501 2.04164L2.29674 9.3699C2.09496 9.57168 1.99407 9.67257 1.92192 9.7903C1.85795 9.89469 1.81081 10.0085 1.78224 10.1275C1.75 10.2618 1.75 10.4045 1.75 10.6898V11.6666Z" stroke="#344054" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
   </svg>
-  )
+  ),
 }
 
 const OperationBtn: FC<IOperationBtnProps> = ({
   type,
   actionName,
-  onClick
+  onClick,
 }) => {
   const { t } = useTranslation()
   return (

web/app/components/app/configuration/base/var-highlight/index.tsx

 'use client'
-import React, { FC } from 'react'
+import type { FC } from 'react'
+import React from 'react'
 
 import s from './style.module.css'
 
-export interface IVarHighlightProps {
+export type IVarHighlightProps = {
   name: string
 }
 
@@ -31,6 +32,4 @@ export const varHighlightHTML = ({ name }: IVarHighlightProps) => {
   return html
 }
 
-
-
 export default React.memo(VarHighlight)

web/app/components/app/configuration/base/warning-mask/has-not-set-api.tsx

 'use client'
-import React, { FC } from 'react'
+import type { FC } from 'react'
+import React from 'react'
 import { useTranslation } from 'react-i18next'
 import WarningMask from '.'
 import Button from '@/app/components/base/button'
 
-export interface IHasNotSetAPIProps {
+export type IHasNotSetAPIProps = {
   isTrailFinished: boolean
   onSetting: () => void
 }
@@ -18,7 +19,7 @@ const icon = (
 
 const HasNotSetAPI: FC<IHasNotSetAPIProps> = ({
   isTrailFinished,
-  onSetting
+  onSetting,
 }) => {
   const { t } = useTranslation()
 

web/app/components/app/configuration/base/warning-mask/index.tsx

 'use client'
-import React, { FC } from 'react'
+import type { FC } from 'react'
+import React from 'react'
 
 import s from './style.module.css'
 
-export interface IWarningMaskProps {
+export type IWarningMaskProps = {
   title: string
   description: string
   footer: React.ReactNode

web/app/components/app/configuration/config-var/modal-foot.tsx

 'use client'
-import React, { FC } from 'react'
+import type { FC } from 'react'
+import React from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 
-export interface IModalFootProps {
+export type IModalFootProps = {
   onConfirm: () => void
   onCancel: () => void
 }
 
 const ModalFoot: FC<IModalFootProps> = ({
   onConfirm,
-  onCancel
+  onCancel,
 }) => {
   const { t } = useTranslation()
   return (

web/app/components/app/configuration/config/feature/feature-group/index.tsx

 'use client'
-import React, { FC } from 'react'
+import type { FC } from 'react'
+import React from 'react'
 import GroupName from '@/app/components/app/configuration/base/group-name'
 
-export interface IFeatureGroupProps {
+export type IFeatureGroupProps = {
   title: string
   description?: string
   children: React.ReactNode
@@ -11,7 +12,7 @@ export interface IFeatureGroupProps {
 const FeatureGroup: FC<IFeatureGroupProps> = ({
   title,
   description,
-  children
+  children,
 }) => {
   return (
     <div className='mb-6'>

web/app/components/app/configuration/dataset-config/type-icon/index.tsx

 'use client'
-import React, { FC } from 'react'
+import type { FC } from 'react'
+import React from 'react'
 
-export interface ITypeIconProps {
+export type ITypeIconProps = {
   type: 'upload_file'
   size?: 'md' | 'lg'
 }
 
 // data_source_type: current only support upload_file
-const Icon = ({ type, size = "lg" }: ITypeIconProps) => {
-  const len = size === "lg" ? 32 : 24
+const Icon = ({ type, size = 'lg' }: ITypeIconProps) => {
+  const len = size === 'lg' ? 32 : 24
   const iconMap = {
     upload_file: (
       <svg width={len} height={len} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -16,10 +17,9 @@ const Icon = ({ type, size = "lg" }: ITypeIconProps) => {
         <path fillRule="evenodd" clipRule="evenodd" d="M8.66669 12.1078C8.66668 11.7564 8.66667 11.4532 8.68707 11.2035C8.7086 10.9399 8.75615 10.6778 8.88468 10.4255C9.07642 10.0492 9.38238 9.74322 9.75871 9.55147C10.011 9.42294 10.2731 9.3754 10.5367 9.35387C10.7864 9.33346 11.0896 9.33347 11.441 9.33349L14.0978 9.33341C14.4935 9.33289 14.8415 9.33243 15.1615 9.4428C15.4417 9.53946 15.697 9.69722 15.9087 9.90465C16.1506 10.1415 16.3058 10.4529 16.4823 10.8071L17.0786 12H19.4942C20.0309 12 20.4738 12 20.8346 12.0295C21.2093 12.0601 21.5538 12.1258 21.8773 12.2907C22.3791 12.5463 22.787 12.9543 23.0427 13.456C23.2076 13.7796 23.2733 14.1241 23.3039 14.4988C23.3334 14.8596 23.3334 15.3025 23.3334 15.8391V18.8276C23.3334 19.3642 23.3334 19.8071 23.3039 20.1679C23.2733 20.5426 23.2076 20.8871 23.0427 21.2107C22.787 21.7124 22.3791 22.1204 21.8773 22.376C21.5538 22.5409 21.2093 22.6066 20.8346 22.6372C20.4738 22.6667 20.0309 22.6667 19.4942 22.6667H12.5058C11.9692 22.6667 11.5263 22.6667 11.1655 22.6372C10.7907 22.6066 10.4463 22.5409 10.1227 22.376C9.62095 22.1204 9.213 21.7124 8.95734 21.2107C8.79248 20.8871 8.72677 20.5426 8.69615 20.1679C8.66667 19.8071 8.66668 19.3642 8.66669 18.8276V12.1078ZM14.0149 10.6668C14.5418 10.6668 14.6463 10.6755 14.7267 10.7033C14.8201 10.7355 14.9052 10.7881 14.9758 10.8572C15.0366 10.9167 15.0911 11.0063 15.3267 11.4776L15.5879 12L10.0001 12C10.0004 11.69 10.0024 11.4781 10.016 11.312C10.0308 11.1309 10.0559 11.0638 10.0727 11.0308C10.1366 10.9054 10.2386 10.8034 10.364 10.7395C10.397 10.7227 10.4641 10.6976 10.6452 10.6828C10.8341 10.6673 11.0823 10.6668 11.4667 10.6668H14.0149Z" fill="#444CE7" />
         <rect x="0.25" y="0.25" width="31.5" height="31.5" rx="7.75" stroke="#E0EAFF" strokeWidth="0.5" />
       </svg>
-    )
+    ),
   }
   return iconMap[type]
-
 }
 
 const TypeIcon: FC<ITypeIconProps> = ({

web/app/components/app/configuration/features/experience-enchance-group/index.tsx

 'use client'
-import React, { FC } from 'react'
+import type { FC } from 'react'
+import React from 'react'
 import { useTranslation } from 'react-i18next'
 import GroupName from '../../base/group-name'
 import MoreLikeThis from './more-like-this'

web/app/components/app/configuration/features/experience-enchance-group/more-like-this/index.tsx

 'use client'
-import React, { FC } from 'react'
-import Panel from '@/app/components/app/configuration/base/feature-panel'
+import type { FC } from 'react'
+import React from 'react'
 import { useTranslation } from 'react-i18next'
-import MoreLikeThisIcon from '../../../base/icons/more-like-this-icon'
 import { XMarkIcon } from '@heroicons/react/24/outline'
 import { useLocalStorageState } from 'ahooks'
+import MoreLikeThisIcon from '../../../base/icons/more-like-this-icon'
+import Panel from '@/app/components/app/configuration/base/feature-panel'
 
 const GENERATE_NUM = 1
 

web/app/components/app/text-generate/index.tsx

 'use client'
 import type { FC } from 'react'
-import { format } from '@/service/base'
 import React from 'react'
+import { format } from '@/service/base'
 
 export type ITextGenerationProps = {
   value: string
@@ -16,7 +16,7 @@ const TextGeneration: FC<ITextGenerationProps> = ({
     <div
       className={className}
       dangerouslySetInnerHTML={{
-        __html: format(value)
+        __html: format(value),
       }}
     >
     </div>

web/app/components/base/app-unavailable.tsx

 'use client'
-import React, { FC } from 'react'
+import type { FC } from 'react'
+import React from 'react'
 import { useTranslation } from 'react-i18next'
 
-interface IAppUnavailableProps {
+type IAppUnavailableProps = {
   code?: number
   isUnknwonReason?: boolean
   unknownReason?: string

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

 'use client'
-import React, { FC, useEffect } from 'react'
+import type { FC } from 'react'
+import React, { useEffect } from 'react'
 import cn from 'classnames'
 import { useBoolean } from 'ahooks'
 import { ChevronRightIcon } from '@heroicons/react/24/outline'
 
-
-export interface IPanelProps {
+export type IPanelProps = {
   className?: string
   headerIcon: React.ReactNode
   title: React.ReactNode
@@ -30,23 +30,21 @@ const Panel: FC<IPanelProps> = ({
   foldDisabled = false,
   onFoldChange,
   controlUnFold,
-  controlFold
+  controlFold,
 }) => {
-  const [fold, { setTrue: setFold, setFalse: setUnFold, toggle: toggleFold }] = useBoolean(keepUnFold ? false : true)
+  const [fold, { setTrue: setFold, setFalse: setUnFold, toggle: toggleFold }] = useBoolean(!keepUnFold)
   useEffect(() => {
     onFoldChange?.(fold)
   }, [fold])
 
   useEffect(() => {
-    if (controlUnFold) {
+    if (controlUnFold)
       setUnFold()
-    }
   }, [controlUnFold])
 
   useEffect(() => {
-    if (controlFold) {
+    if (controlFold)
       setFold()
-    }
   }, [controlFold])
 
   // overflow-hidden

web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx

@@ -3,6 +3,8 @@ import React, { useState } from 'react'
 import { useRouter } from 'next/navigation'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
+import cn from 'classnames'
+import s from './index.module.css'
 import Modal from '@/app/components/base/modal'
 import Input from '@/app/components/base/input'
 import Button from '@/app/components/base/button'
@@ -10,12 +12,9 @@ import Button from '@/app/components/base/button'
 import { ToastContext } from '@/app/components/base/toast'
 import { createEmptyDataset } from '@/service/datasets'
 
-import cn from 'classnames'
-import s from './index.module.css'
-
 type IProps = {
-  show: boolean,
-  onHide: () => void,
+  show: boolean
+  onHide: () => void
 }
 
 const EmptyDatasetCreationModal = ({
@@ -43,7 +42,6 @@ const EmptyDatasetCreationModal = ({
     }
     catch (err) {
       notify({ type: 'error', message: t('datasetCreation.stepOne.modal.failed') })
-      return
     }
   }
 

web/app/components/datasets/create/stop-embedding-modal/index.tsx

 'use client'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import Modal from '@/app/components/base/modal'
-import Button from '@/app/components/base/button'
-
 import cn from 'classnames'
 import s from './index.module.css'
+import Modal from '@/app/components/base/modal'
+import Button from '@/app/components/base/button'
 
 type IProps = {
-  show: boolean,
-  onConfirm: () => void,
-  onHide: () => void,
+  show: boolean
+  onConfirm: () => void
+  onHide: () => void
 }
 
 const StopEmbeddingModal = ({

web/app/components/develop/code.tsx

@@ -257,7 +257,7 @@ const CodeGroupContext = createContext(false)
 
 export function CodeGroup({ children, title, inputs, targetCode, ...props }: IChildrenProps) {
   const languages = Children.map(children, child =>
-    getPanelTitle(child.props.children.props)
+    getPanelTitle(child.props.children.props),
   )
   const tabGroupProps = useTabGroupProps(languages)
   const hasTabs = Children.count(children) > 1

web/app/components/develop/doc.tsx

 'use client'
+import { useContext } from 'use-context-selector'
 import TemplateEn from './template/template.en.mdx'
 import TemplateZh from './template/template.zh.mdx'
 import TemplateChatEn from './template/template_chat.en.mdx'
 import TemplateChatZh from './template/template_chat.zh.mdx'
-import { useContext } from 'use-context-selector'
 import I18n from '@/context/i18n'
 
 type IDocProps = {
@@ -14,20 +14,21 @@ const Doc = ({ appDetail }: IDocProps) => {
   const { locale } = useContext(I18n)
   const variables = appDetail?.model_config?.configs?.prompt_variables || []
   const inputs = variables.reduce((res: any, variable: any) => {
-    res[variable.key] = variable.name || '';
+    res[variable.key] = variable.name || ''
     return res
   }, {})
 
   return (
     <article className="prose prose-xl" >
-      {appDetail?.mode === 'completion' ? (
+      {appDetail?.mode === 'completion'
+        ? (
           locale === 'en' ? <TemplateEn appDetail={appDetail} variables={variables} inputs={inputs} /> : <TemplateZh appDetail={appDetail} variables={variables} inputs={inputs} />
-      ) : (
+        )
+        : (
           locale === 'en' ? <TemplateChatEn appDetail={appDetail} variables={variables} inputs={inputs} /> : <TemplateChatZh appDetail={appDetail} variables={variables} inputs={inputs} />
         )}
     </article>
   )
-
 }
 
 export default Doc

web/app/components/develop/md.tsx

@@ -22,20 +22,20 @@ export const Heading = function H2({
   title,
   name,
 }: IHeaderingProps) {
-  let style = '';
+  let style = ''
   switch (method) {
     case 'PUT':
-      style = 'ring-amber-300 bg-amber-400/10 text-amber-500 dark:ring-amber-400/30 dark:bg-amber-400/10 dark:text-amber-400';
-      break;
+      style = 'ring-amber-300 bg-amber-400/10 text-amber-500 dark:ring-amber-400/30 dark:bg-amber-400/10 dark:text-amber-400'
+      break
     case 'DELETE':
-      style = 'ring-rose-200 bg-rose-50 text-red-500 dark:ring-rose-500/20 dark:bg-rose-400/10 dark:text-rose-400';
-      break;
+      style = 'ring-rose-200 bg-rose-50 text-red-500 dark:ring-rose-500/20 dark:bg-rose-400/10 dark:text-rose-400'
+      break
     case 'POST':
-      style = 'ring-sky-300 bg-sky-400/10 text-sky-500 dark:ring-sky-400/30 dark:bg-sky-400/10 dark:text-sky-400';
-      break;
+      style = 'ring-sky-300 bg-sky-400/10 text-sky-500 dark:ring-sky-400/30 dark:bg-sky-400/10 dark:text-sky-400'
+      break
     default:
-      style = 'ring-emerald-300 dark:ring-emerald-400/30 bg-emerald-400/10 text-emerald-500 dark:text-emerald-400';
-      break;
+      style = 'ring-emerald-300 dark:ring-emerald-400/30 bg-emerald-400/10 text-emerald-500 dark:text-emerald-400'
+      break
   }
   return (
     <>

web/app/components/header/account-setting/Integrations-page/index.tsx

@@ -2,9 +2,9 @@
 
 import { useTranslation } from 'react-i18next'
 import classNames from 'classnames'
-import s from './index.module.css'
 import useSWR from 'swr'
 import Link from 'next/link'
+import s from './index.module.css'
 import { fetchAccountIntegrates } from '@/service/common'
 
 const titleClassName = `

web/app/components/header/account-setting/members-page/operation/index.tsx

@@ -99,7 +99,7 @@ const Operation = ({
                 <div className="px-1 py-1">
                   {
                     ['admin', 'normal'].map(role => (
-                      <Menu.Item>
+                      <Menu.Item key={role}>
                         <div className={itemClassName} onClick={() => handleUpdateMemberRole(role)}>
                           {
                             role === member.role

web/app/components/header/app-back/index.tsx

@@ -6,7 +6,6 @@ import { useTranslation } from 'react-i18next'
 import { ArrowLeftIcon, Squares2X2Icon } from '@heroicons/react/24/solid'
 import type { AppDetailResponse } from '@/models/app'
 
-
 type IAppBackProps = {
   curApp: AppDetailResponse
 }

web/app/components/share/chat/value-panel/index.tsx

 'use client'
-import React, { FC, ReactNode } from 'react'
+import type { FC, ReactNode } from 'react'
+import React from 'react'
 import cn from 'classnames'
-import { StarIcon } from '@/app/components/share/chat/welcome/massive-component'
-import Button from '@/app/components/base/button'
 import { useTranslation } from 'react-i18next'
-
 import s from './style.module.css'
+import { StarIcon } from '@/app/components/share/chat/welcome/massive-component'
+import Button from '@/app/components/base/button'
 
-export interface ITemplateVarPanelProps {
+export type ITemplateVarPanelProps = {
   className?: string
   header: ReactNode
   children?: ReactNode | null
@@ -18,7 +18,7 @@ const TemplateVarPanel: FC<ITemplateVarPanelProps> = ({
   className,
   header,
   children,
-  isFold
+  isFold,
 }) => {
   return (
     <div className={cn(isFold ? 'border border-indigo-100' : s.boxShodow, className, 'rounded-xl ')}>
@@ -38,9 +38,9 @@ const TemplateVarPanel: FC<ITemplateVarPanelProps> = ({
   )
 }
 
-export const PanelTitle: FC<{ title: string, className?: string }> = ({
+export const PanelTitle: FC<{ title: string; className?: string }> = ({
   title,
-  className
+  className,
 }) => {
   return (
     <div className={cn(className, 'flex items-center space-x-1 text-indigo-600')}>
@@ -50,10 +50,10 @@ export const PanelTitle: FC<{ title: string, className?: string }> = ({
   )
 }
 
-export const VarOpBtnGroup: FC<{ className?: string, onConfirm: () => void, onCancel: () => void }> = ({
+export const VarOpBtnGroup: FC<{ className?: string; onConfirm: () => void; onCancel: () => void }> = ({
   className,
   onConfirm,
-  onCancel
+  onCancel,
 }) => {
   const { t } = useTranslation()