feat: community backends marketplace

src/locales/en-US/backends.ts

@@ -44,5 +44,5 @@ export default {
   'backend.filter.source': 'Filter by source',
   'backend.add.custom': 'Custom',
   'backend.add.community': 'Community Repository',
-  'backend.community.title': 'Community Backends'
+  'backend.community.title': 'Community Backends Marketplace'
 };

src/locales/ja-JP/backends.ts

@@ -44,5 +44,5 @@ export default {
   'backend.filter.source': 'Filter by source',
   'backend.add.custom': 'Custom',
   'backend.add.community': 'Community Repository',
-  'backend.community.title': 'Community Backends'
+  'backend.community.title': 'Community Backends Marketplace'
 };

src/locales/ru-RU/backends.ts

@@ -44,7 +44,7 @@ export default {
   'backend.filter.source': 'Filter by source',
   'backend.add.custom': 'Custom',
   'backend.add.community': 'Community Repository',
-  'backend.community.title': 'Community Backends'
+  'backend.community.title': 'Community Backends Marketplace'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
@@ -53,5 +53,5 @@ export default {
 // 3. 'backend.filter.source': 'Filter by source',
 // 4.  'backend.add.custom': 'Custom',
 // 5.  'backend.add.community': 'Community Repository',
-// 6. 'backend.community.title': 'Community Backends'
+// 6. 'backend.community.title': 'Community Backends Marketplace'
 // ========== End of To-Do List ==========

src/locales/zh-CN/backends.ts

@@ -41,5 +41,5 @@ export default {
   'backend.filter.source': '按来源过滤',
   'backend.add.custom': '自定义',
   'backend.add.community': '社区仓库',
-  'backend.community.title': '社区后端'
+  'backend.community.title': '社区后端市场'
 };

src/pages/backends/community/add-community-modal.tsx

@@ -83,7 +83,7 @@ const AddCommunityModal: React.FC<{
         >
           <BackendDetail
             onEnable={handleOnEnable}
-            currentData={currentData}
+            data={currentData}
           ></BackendDetail>
         </ColumnWrapper>
       </Container>

src/pages/backends/community/backend-detail.tsx

@@ -3,7 +3,7 @@ import { BulbOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Tag, Typography } from 'antd';
 import _ from 'lodash';
-import React from 'react';
+import React, { useEffect } from 'react';
 import styled from 'styled-components';
 import { generateIcon } from '../components/backend-card';
 
@@ -62,9 +62,22 @@ const UL = styled.ul`
 const BackendDetail: React.FC<{
   onEnable: (checked: boolean, data: any) => void;
   onDisable?: () => void;
-  currentData?: any;
-}> = ({ onEnable, onDisable, currentData }) => {
+  data?: any;
+}> = ({ onEnable, onDisable, data }) => {
   const intl = useIntl();
+  const [currentData, setCurrentData] = React.useState<any>(data);
+
+  useEffect(() => {
+    setCurrentData(data);
+  }, [data]);
+
+  const handleOnEnable = async (checked: boolean) => {
+    await onEnable(true, currentData);
+    setCurrentData({
+      ...currentData,
+      enabled: checked
+    });
+  };
 
   const renderSupportedFrameworks = () => {
     const frameworks = currentData?.framework_index_map || {};
@@ -109,7 +122,7 @@ const BackendDetail: React.FC<{
               <Button
                 type="primary"
                 size="middle"
-                onClick={() => onEnable(true, currentData)}
+                onClick={() => handleOnEnable(true)}
               >
                 {intl.formatMessage({ id: 'common.button.enable' })}
               </Button>

src/pages/backends/community/commnity-backends.tsx

@@ -3,7 +3,7 @@ import ThemeTag from '@/components/tags-wrapper/theme-tag';
 import useTableFetch from '@/hooks/use-table-fetch';
 import { SearchOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Input, Switch, Tooltip } from 'antd';
+import { Input, Tooltip } from 'antd';
 import _ from 'lodash';
 import React, { useEffect } from 'react';
 import styled from 'styled-components';
@@ -68,17 +68,10 @@ const CommunityBackends: React.FC<{
         }
       >
         <>
-          {data.enabled ? (
+          {data.enabled && (
             <ThemeTag style={{ margin: 0 }} color="geekblue" variant="filled">
               {intl.formatMessage({ id: 'common.status.enabled' })}
             </ThemeTag>
-          ) : (
-            <span onClick={(e) => e.stopPropagation()}>
-              <Switch
-                onChange={(checked) => handleOnEnable(checked, data)}
-                size="small"
-              ></Switch>
-            </span>
           )}
         </>
       </Tooltip>

src/pages/backends/components/backend-card.tsx

@@ -49,13 +49,14 @@ const SourceWrapper = styled.div`
   }
 `;
 
-const TagInner = styled(Tag)`
+// add height props
+const TagInner = styled(Tag)<{ height?: number }>`
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
-  height: 28px;
-  width: 28px;
+  height: ${({ height }) => (height ? `${height}px` : '28px')};
+  width: ${({ height }) => (height ? `${height}px` : '28px')};
   border-radius: 6px;
   font-weight: 400;
 `;
@@ -146,18 +147,21 @@ interface BackendCardProps {
   active?: boolean;
 }
 
-export const generateIcon = (data: ListItem, height = 20) => {
+export const generateIcon = (data: ListItem, height?: number) => {
+  const innHeight = height || 20;
   if (builtInBackendLogos[data.backend_name]) {
-    return <img src={builtInBackendLogos[data.backend_name]} height={height} />;
+    return (
+      <img src={builtInBackendLogos[data.backend_name]} height={innHeight} />
+    );
   }
   if (data.icon) {
-    return <img src={data.icon} height={height} />;
+    return <img src={data.icon} height={innHeight} />;
   }
   const color = customColors[data.id % customColors.length];
   const icon = customIcons[data.id % customIcons.length];
 
   return (
-    <TagInner color={color} variant="filled">
+    <TagInner color={color} variant="filled" height={height || 28}>
       {icon}
     </TagInner>
   );
@@ -387,7 +391,11 @@ const BackendCard: React.FC<BackendCardProps> = ({
     >
       <Content>
         <CardName>
-          <span>{data.backend_name}</span>
+          <span>
+            {data.backend_source === BackendSourceValueMap.CUSTOM
+              ? data.backend_name.replace(/-custom$/g, '')
+              : data.backend_name}
+          </span>
           {renderSource()}
         </CardName>
         {/* <SourceWrapper>