LinkBadge component improvement

apache · Oct 14, 2023 · e5b793d · e5b793d
1 parent c21ff06
commit e5b793d
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 11 deletions.
diff --git a/streampark-console/streampark-console-webapp/src/components/LinkBadge/index.ts b/streampark-console/streampark-console-webapp/src/components/LinkBadge/index.ts
@@ -0,0 +1,19 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import LinkBadge from './src/LinkBadge.vue';
+
+export { LinkBadge };
diff --git a/...setting/ExternalLink/components/Badge.vue → ...rc/components/LinkBadge/src/LinkBadge.vue b/...setting/ExternalLink/components/Badge.vue → ...rc/components/LinkBadge/src/LinkBadge.vue
@@ -27,15 +27,15 @@
 
 <script setup lang="ts">
   import { computed } from 'vue';
-  interface ExternalLinkBadgeProps {
+  interface BadgeProps {
     label: String;
     message: String;
     color?: string;
     redirect?: string;
     disabled?: boolean;
     onBadgeClick?: () => void;
   }
-  const props = defineProps<ExternalLinkBadgeProps>();
+  const props = defineProps<BadgeProps>();
   const hasLabel = computed(() => !!props.label);
   const isClickable = computed(() => !!props.redirect && !props.disabled);
   function handleClick() {

diff --git a/streampark-console/streampark-console-webapp/src/views/flink/app/Detail.vue b/streampark-console/streampark-console-webapp/src/views/flink/app/Detail.vue
@@ -46,7 +46,7 @@
   import DetailTab from './components/AppDetail/DetailTab.vue';
   import { createDetailProviderContext } from './hooks/useDetailContext';
   import { useDrawer } from '/@/components/Drawer';
-  import { ExternalLinkBadge } from '/@/views/setting/externalLink/components';
+  import { LinkBadge } from '/@/components/LinkBadge';
 
   const route = useRoute();
   const router = useRouter();
@@ -245,7 +245,7 @@
       <span class="app-bar">{{ t('flink.app.detail.detailTitle') }}</span>
       <Space class="-mt-8px">
         <div v-for="link in externalLinks" :key="link.id">
-          <ExternalLinkBadge
+          <LinkBadge
             :label="link.badgeLabel"
             :redirect="link.renderedLinkUrl"
             :color="link.badgeColor"

diff --git a/streampark-console/streampark-console-webapp/src/views/setting/ExternalLink/View.vue b/streampark-console/streampark-console-webapp/src/views/setting/ExternalLink/View.vue
@@ -31,7 +31,9 @@
   import { PlusOutlined } from '@ant-design/icons-vue';
   import { ColumnsType } from 'ant-design-vue/lib/table';
   import { useModal } from '/@/components/Modal';
-  import { ExternalLinkModal, ExternalLinkBadge } from './components';
+  import { LinkBadge } from '/@/components/LinkBadge';
+  import { ExternalLinkModal } from './components';
+
   import { PageWrapper } from '/@/components/Page';
   import { Table, Popconfirm, Card } from 'ant-design-vue';
   import { fetchExternalLink, fetchExternalLinkDelete } from '/@/api/setting/externalLink';
@@ -108,7 +110,7 @@
       >
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'badgeColor'">
-            <ExternalLinkBadge
+            <LinkBadge
               :color="record.badgeColor"
               :label="record.badgeLabel"
               :message="record.badgeName"

diff --git a/...park-console/streampark-console-webapp/src/views/setting/ExternalLink/components/index.ts b/...park-console/streampark-console-webapp/src/views/setting/ExternalLink/components/index.ts
@@ -14,5 +14,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { default as ExternalLinkBadge } from './Badge.vue';
 export { default as ExternalLinkModal } from './Modal.vue';
diff --git a/...e/streampark-console-webapp/src/views/setting/ExternalLink/components/useExternalLink.tsx b/...e/streampark-console-webapp/src/views/setting/ExternalLink/components/useExternalLink.tsx
@@ -17,7 +17,8 @@
 
 import { Input, Space } from 'ant-design-vue';
 
-import ExternalLinkBadge from './Badge.vue';
+import { LinkBadge } from '/@/components/LinkBadge';
+
 import { useI18n } from '/@/hooks/web/useI18n';
 
 const { t } = useI18n();
@@ -38,13 +39,13 @@ export const renderColorField = (formModel: Recordable, field: string) => {
         value={formModel[field]}
         onInput={(e) => (formModel[field] = e.target.value)}
       />
-      <ExternalLinkBadge
+      <LinkBadge
         label={t('setting.externalLink.form.badgeLabel')}
         message={t('setting.externalLink.form.badgeName')}
         color={DEFAULT_GREEN_HEX}
         onBadgeClick={handlePromptColorUpdate(DEFAULT_GREEN_HEX)}
       />
-      <ExternalLinkBadge
+      <LinkBadge
         label="Fink"
         message="Metrics"
         color={DEFAULT_BLUE_HEX}
@@ -56,7 +57,7 @@ export const renderColorField = (formModel: Recordable, field: string) => {
 
 export const renderPreview = (formModel: Recordable) => {
   return (
-    <ExternalLinkBadge
+    <LinkBadge
       label={formModel['badgeLabel']}
       message={formModel['badgeName'] || t('setting.externalLink.form.badgeName')}
       color={formModel['badgeColor']}