Skip to content

Commit f87598e

Browse files
ymh6315431minghao.yang
ymh6315431
and
minghao.yang
authored
feat(CsgButton): Add tooltip support for buttons and update RepoClone (#1227)
* Draft MR * feat(CsgButton): Add tooltip support for buttons and update RepoClone --------- Co-authored-by: minghao.yang <[email protected]>
1 parent a313c02 commit f87598e

File tree

7 files changed

+63
-25
lines changed

7 files changed

+63
-25
lines changed

‎frontend/src/components/__tests__/application_spaces/ApplicationSpaceSettings.spec.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -84,14 +84,14 @@ describe('ApplicationSpaceSettings', () => {
8484
it('updates application space nickname when button is clicked', async () => {
8585
const wrapper = createWrapper()
8686
await wrapper.setData({ theApplicationSpaceNickname: 'New Name' })
87-
await wrapper.find('button[data-test="update-nickname"]').trigger('click')
87+
await wrapper.find('[data-test="update-nickname"]').trigger('click')
8888
expect(ElMessage.success).toHaveBeenCalledWith('Success')
8989
})
9090

9191
it('update application space description when button is clicked', async () => {
9292
const wrapper = createWrapper()
9393
await wrapper.setData({ theApplicationSpaceDesc: 'New Description' })
94-
await wrapper.find('button[data-test="update-description"]').trigger('click')
94+
await wrapper.find('[data-test="update-description"]').trigger('click')
9595
expect(ElMessage.success).toHaveBeenCalledWith('Success')
9696
})
9797
})

‎frontend/src/components/__tests__/codes/CodeSettings.spec.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,14 +67,14 @@ describe('CodeSettings', () => {
6767
it('updates code nickname when button is clicked', async () => {
6868
const wrapper = createWrapper()
6969
await wrapper.setData({ theCodeNickname: 'New Name' })
70-
await wrapper.find('button[data-test="update-nickname"]').trigger('click')
70+
await wrapper.find('[data-test="update-nickname"]').trigger('click')
7171
expect(ElMessage.success).toHaveBeenCalledWith('Success')
7272
})
7373

7474
it('shows warning when trying to update empty nickname', async () => {
7575
const wrapper = createWrapper()
7676
await wrapper.setData({ theCodeNickname: '' })
77-
await wrapper.find('button[data-test="update-nickname"]').trigger('click')
77+
await wrapper.find('[data-test="update-nickname"]').trigger('click')
7878
expect(ElMessage.success).toHaveBeenCalled()
7979
})
8080
})

‎frontend/src/components/__tests__/datasets/DatasetSettings.spec.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,8 @@ describe("DatasetSettings", () => {
143143
const wrapper = createWrapper();
144144
const deleteInput = wrapper.findAll('input').at(-1);
145145
await deleteInput.setValue('test/dataset');
146-
const deleteButton = wrapper.find('#confirmDelete');
146+
const deleteButtonComponent = wrapper.findComponent('[data-test="confirm-delete"]');
147+
const deleteButton = deleteButtonComponent.find('button');
147148
expect(deleteButton.classes()).toContain('btn-danger');
148149
});
149150
});

‎frontend/src/components/datasets/DatasetSettings.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -277,6 +277,7 @@
277277
@click="clickDelete"
278278
class="btn btn-danger btn-sm w-fit"
279279
:disabled="delDesc !== datasetPath"
280+
data-test="confirm-delete"
280281
:name="$t('datasets.edit.confirmDel')"
281282
/>
282283
</div>

‎frontend/src/components/shared/CsgButton.vue‎

Lines changed: 32 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,33 @@
11
<template>
2-
<button
3-
:class="btnClass"
4-
:type="btnType"
5-
:disabled="disabled || loading || hasDisabledClass"
2+
<component
3+
:is="showTooltip ? ElTooltip : 'div'"
4+
v-bind="showTooltip ? { content: props.tooltipContent, placement: 'top' } : {}"
65
>
7-
<i v-if="loading" class="el-icon is-loading"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32m0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32m448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32m-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32M195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0m-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"></path></svg></i>
8-
<SvgIcon
9-
v-if="svgName"
10-
:name="svgName"
11-
:disabled="isDisabled"
12-
/>
13-
{{ name }}
14-
</button>
6+
<span style="display: inline-block">
7+
<button
8+
:class="btnClass"
9+
:type="btnType"
10+
:disabled="disabled || loading || hasDisabledClass"
11+
>
12+
<i v-if="loading" class="el-icon is-loading"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32m0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32m448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32m-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32M195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0m-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"></path></svg></i>
13+
<SvgIcon
14+
v-if="svgName && svgPosition === 'left'"
15+
:name="svgName"
16+
:disabled="isDisabled"
17+
/>
18+
{{ name }}
19+
<SvgIcon
20+
v-if="svgName && svgPosition === 'right'"
21+
:name="svgName"
22+
/>
23+
</button>
24+
</span>
25+
</component>
1526
</template>
1627

1728
<script setup>
1829
import { computed } from 'vue'
19-
30+
import { ElTooltip } from 'element-plus';
2031
const props = defineProps({
2132
name: String,
2233
btnType: {
@@ -46,9 +57,17 @@
4657
type: {
4758
type: String,
4859
default: ""
60+
},
61+
tooltipContent: {
62+
type: String,
63+
default: ""
4964
}
5065
});
5166
67+
const showTooltip = computed(() => {
68+
return isDisabled.value && props.tooltipContent?.trim();
69+
});
70+
5271
const hasDisabledClass = computed(() => {
5372
return props.class.includes('disabled');
5473
});

‎frontend/src/components/shared/RepoClone.vue‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
<CsgButton
2525
class="btn btn-secondary-gray btn-sm modelBtn pl-8"
2626
:name="enableEvaluation && !!httpCloneUrl ? $t('evaluation.new.title') : $t('evaluation.new.title')"
27+
:tooltipContent="repo.disableEvaluationReason"
2728
:class="{ disabled: !enableEvaluation || !httpCloneUrl }"
2829
svgName="evaluation_new"
2930
@click="enableEvaluation && !!httpCloneUrl ? toNewEvaluatePage() : ''"
@@ -49,15 +50,21 @@
4950
/>
5051
</div>
5152
<div
52-
class="btn btn-secondary-gray btn-sm modelBtn disabled"
5353
v-else-if="repoType === 'model'"
5454
>
55-
<SvgIcon
56-
name="deploy"
57-
class="mr-0"
58-
:disabled="true"
59-
/>
60-
<div>{{ $t('all.deploy') }}</div>
55+
<el-tooltip
56+
:content="repo.disableInferenceReason"
57+
placement="top"
58+
>
59+
<div class="flex gap-1 btn btn-secondary-gray btn-sm modelBtn disabled">
60+
<SvgIcon
61+
name="deploy"
62+
class="mr-0"
63+
:disabled="true"
64+
/>
65+
<div class="text-gray-400">{{ $t('all.deploy') }}</div>
66+
</div>
67+
</el-tooltip>
6168
</div>
6269

6370
<!-- finetune deploy button -->
@@ -67,6 +74,7 @@
6774
:disabled="!enableFinetune || !httpCloneUrl"
6875
:name="$t('finetune.title')"
6976
svgName="model_finetune_create"
77+
:tooltipContent="repo.disableFinetuneReason"
7078
@click="enableFinetune && !!httpCloneUrl ? handleButtonClick() : ''"
7179
/>
7280

‎frontend/src/stores/RepoDetailStore.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,11 @@ const useRepoDetailStore = defineStore('repoDetail', () => {
1818
const description = ref('')
1919
const downloads = ref(0)
2020
const enableEvaluation = ref(false)
21+
const disableEvaluationReason= ref('')
2122
const enableFinetune = ref(false)
23+
const disableFinetuneReason= ref('')
2224
const enableInference = ref(false)
25+
const disableInferenceReason= ref('')
2326
const hfPath = ref('')
2427
const id = ref(0)
2528
const license = ref('')
@@ -110,8 +113,11 @@ const useRepoDetailStore = defineStore('repoDetail', () => {
110113
description.value = initialData.description
111114
downloads.value = initialData.downloads
112115
enableEvaluation.value = initialData.enable_evaluation
116+
disableEvaluationReason.value = initialData.disable_evaluation_reason || ''
113117
enableFinetune.value = initialData.enable_finetune
118+
disableFinetuneReason.value = initialData.disable_finetune_reason || ''
114119
enableInference.value = initialData.enable_inference
120+
disableInferenceReason.value = initialData.disable_inference_reason || ''
115121
hfPath.value = initialData.hf_path
116122
id.value = initialData.id
117123
license.value = initialData.license
@@ -190,8 +196,11 @@ const useRepoDetailStore = defineStore('repoDetail', () => {
190196
description,
191197
downloads,
192198
enableEvaluation,
199+
disableEvaluationReason,
193200
enableFinetune,
201+
disableFinetuneReason,
194202
enableInference,
203+
disableInferenceReason,
195204
hfPath,
196205
id,
197206
license,

0 commit comments

Comments
 (0)