feat: 未命名版本支持撤销修改和删除恢复 --story=116041117 (#2986)

* feat: 文件型配置未命名版本支持撤销修改 * feat: 删除的配置文件新增恢复按钮 * fix: 配置文件导出按钮改为点击触发 * fix: 调整配置项key校验正则
TencentBlueKing · Feb 29, 2024 · dd3aabc · dd3aabc
1 parent 776de1d
commit dd3aabc
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 22 deletions.
diff --git a/bcs-services/bcs-bscp/ui/src/api/config.ts b/bcs-services/bcs-bscp/ui/src/api/config.ts
@@ -490,3 +490,23 @@ export const batchImportKvFile = (bizId: string, appId: number, File: any) =>
  */
 export const getExportKvFile = (bizId: string, appId: number, releaseId: number, format: string) =>
   http.get(`biz/${bizId}/apps/${appId}/releases/${releaseId}/kvs/export`, { params: { format } });
+
+/**
+ * 撤销修改配置文件
+ * @param bizId 业务ID
+ * @param appId 应用ID
+ * @param id 配置文件ID
+ * @returns
+ */
+export const unModifyConfigItem = (bizId: string, appId: number, id: number) =>
+  http.post(`/config/undo/config_item/config_item/config_item_id/${id}/app_id/${appId}/biz_id/${bizId}`);
+
+/**
+ * 恢复删除配置文件
+ * @param bizId 业务ID
+ * @param appId 应用ID
+ * @param id 配置文件ID
+ * @returns
+ */
+export const unDeleteConfigItem = (bizId: string, appId: number, id: number) =>
+  http.post(`/config/undelete/config_item/config_item/config_item_id/${id}/app_id/${appId}/biz_id/${bizId}`);
diff --git a/bcs-services/bcs-bscp/ui/src/i18n/en-us.ts b/bcs-services/bcs-bscp/ui/src/i18n/en-us.ts
@@ -334,6 +334,10 @@ export default {
   请选择: 'Please select',
   配置项值已复制: 'The configuration item value has been copied',
   导出至: 'Export to',
+  撤销: 'Repeal',
+  '配置文件删除后，可以通过恢复按钮撤销删除': 'After the configuration file is deleted, you can undo the deletion by using the Restore button',
+  撤销修改配置文件成功: 'Succeeded in unmodifying the configuration file',
+  恢复配置文件成功: 'Succeeded in Restore the configuration file',
 
   // 分组管理
   新增分组: 'New group',

diff --git a/bcs-services/bcs-bscp/ui/src/i18n/zh-cn.ts b/bcs-services/bcs-bscp/ui/src/i18n/zh-cn.ts
@@ -334,6 +334,10 @@ export default {
   请选择: '请选择',
   配置项值已复制: '配置项值已复制',
   导出至: '导出至',
+  撤销: '撤销',
+  '配置文件删除后，可以通过恢复按钮撤销删除': '配置文件删除后，可以通过恢复按钮撤销删除',
+  撤销修改配置文件成功: '撤销修改配置文件成功',
+  恢复配置文件成功: '恢复配置文件成功',
 
   // 分组管理
   新增分组: '新增分组',

diff --git a/.../ui/src/views/space/service/detail/config/config-list/config-table-list/config-export.vue b/.../ui/src/views/space/service/detail/config/config-list/config-table-list/config-export.vue
@@ -1,5 +1,12 @@
 <template>
-  <bk-popover :arrow="false" placement="bottom-start" theme="light export-config-button-popover">
+  <bk-popover
+    ref="buttonRef"
+    :arrow="false"
+    placement="bottom-start"
+    theme="light export-config-button-popover"
+    trigger="click"
+    @after-show="isPopoverOpen = true"
+    @after-hidden="isPopoverOpen = false">
     <bk-button>{{ $t('导出至') }}</bk-button>
     <template #content>
       <div class="export-config-operations">
@@ -13,7 +20,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { computed } from 'vue';
+  import { computed, ref } from 'vue';
   import { getExportKvFile } from '../../../../../../../api/config';
   import { storeToRefs } from 'pinia';
   import useServiceStore from '../../../../../../../store/service';
@@ -27,6 +34,9 @@
     versionName: string;
   }>();
 
+  const buttonRef = ref();
+  const isPopoverOpen = ref(false);
+
   const exportItem = computed(() => [
     {
       text: 'JSON',
@@ -53,6 +63,7 @@
       mimeType = 'text/yaml';
       extension = 'yaml';
     }
+    buttonRef.value.hide();
     downloadFile(content, mimeType, `${prefix}.${extension}`);
   };
 

diff --git a/...ui/src/views/space/service/detail/config/config-list/config-table-list/config-form-kv.vue b/...ui/src/views/space/service/detail/config/config-list/config-table-list/config-form-kv.vue
@@ -91,7 +91,7 @@
       },
       {
         validator: (value: string) =>
-          /^[a-zA-Z0-9\u4e00-\u9fa5][a-zA-Z0-9_\u4e00-\u9fa5-]*[a-zA-Z0-9\u4e00-\u9fa5]$/.test(value),
+          /^([\\u4E00-\\u9FA5A-Za-z0-9]([\\u4E00-\\u9FA5A-Za-z0-9-_]*)?)?[\\u4E00-\\u9FA5A-Za-z0-9]$/.test(value),
         message: t('只允许包含中文、英文、数字、下划线 (_)、连字符 (-)，并且必须以中文、英文、数字开头和结尾'),
       },
     ],

diff --git a/...space/service/detail/config/config-list/config-table-list/tables/table-with-templates.vue b/...space/service/detail/config/config-list/config-table-list/tables/table-with-templates.vue
@@ -84,29 +84,51 @@
                             <!-- 非套餐配置文件 -->
                             <template v-if="group.id === 0">
                               <template v-if="isUnNamedVersion">
+                                <template v-if="config.file_state !== 'DELETE'">
+                                  <bk-button
+                                    v-cursor="{ active: !hasEditServicePerm }"
+                                    text
+                                    theme="primary"
+                                    :class="{ 'bk-text-with-no-perm': !hasEditServicePerm }"
+                                    :disabled="!hasEditServicePerm"
+                                    @click="handleEditOpen(config)">
+                                    {{ t('编辑') }}
+                                  </bk-button>
+                                  <bk-button
+                                    v-if="config.file_state === 'REVISE'"
+                                    v-cursor="{ active: !hasEditServicePerm }"
+                                    text
+                                    theme="primary"
+                                    :class="{ 'bk-text-with-no-perm': !hasEditServicePerm }"
+                                    :disabled="!hasEditServicePerm"
+                                    @click="handleUnModify(config.id)">
+                                    {{ t('撤销') }}
+                                  </bk-button>
+                                  <DownloadConfigBtn
+                                    type="config"
+                                    :bk-biz-id="props.bkBizId"
+                                    :app-id="props.appId"
+                                    :id="config.id"
+                                    :disabled="config.file_state === 'DELETE'" />
+                                  <bk-button
+                                    v-cursor="{ active: !hasEditServicePerm }"
+                                    text
+                                    theme="primary"
+                                    :class="{ 'bk-text-with-no-perm': !hasEditServicePerm }"
+                                    :disabled="!hasEditServicePerm"
+                                    @click="handleDel(config)">
+                                    {{ t('删除') }}
+                                  </bk-button>
+                                </template>
                                 <bk-button
+                                  v-else
                                   v-cursor="{ active: !hasEditServicePerm }"
                                   text
                                   theme="primary"
                                   :class="{ 'bk-text-with-no-perm': !hasEditServicePerm }"
-                                  :disabled="hasEditServicePerm && config.file_state === 'DELETE'"
-                                  @click="handleEditOpen(config)">
-                                  {{ t('编辑') }}
-                                </bk-button>
-                                <DownloadConfigBtn
-                                  type="config"
-                                  :bk-biz-id="props.bkBizId"
-                                  :app-id="props.appId"
-                                  :id="config.id"
-                                  :disabled="config.file_state === 'DELETE'" />
-                                <bk-button
-                                  v-cursor="{ active: !hasEditServicePerm }"
-                                  text
-                                  theme="primary"
-                                  :class="{ 'bk-text-with-no-perm': !hasEditServicePerm }"
-                                  :disabled="hasEditServicePerm && config.file_state === 'DELETE'"
-                                  @click="handleDel(config)">
-                                  {{ t('删除') }}
+                                  :disabled="!hasEditServicePerm"
+                                  @click="handleUnDelete(config.id)">
+                                  {{ t('恢复') }}
                                 </bk-button>
                               </template>
                               <template v-else>
@@ -202,7 +224,7 @@
     <div style="margin-bottom: 8px">
       {{ t('配置文件') }}：<span style="color: #313238">{{ deleteConfig?.name }}</span>
     </div>
-    <div>{{ t('一旦删除，该操作将无法撤销，请谨慎操作') }}</div>
+    <div>{{ deleteConfigTips }}</div>
   </DeleteConfirmDialog>
   <DeleteConfirmDialog
     v-model:isShow="isDeletePkgDialogShow"
@@ -233,6 +255,8 @@
     getBoundTemplatesByAppVersion,
     deleteServiceConfigItem,
     deleteBoundPkg,
+    unModifyConfigItem,
+    unDeleteConfigItem,
   } from '../../../../../../../../api/config';
   import { getAppPkgBindingRelations } from '../../../../../../../../api/template';
   import StatusTag from './status-tag';
@@ -327,6 +351,15 @@
   // 是否为未命名版本
   const isUnNamedVersion = computed(() => versionData.value.id === 0);
 
+  const deleteConfigTips = computed(() => {
+    if (deleteConfig.value) {
+      return deleteConfig.value.file_state === 'ADD'
+        ? t('一旦删除，该操作将无法撤销，请谨慎操作')
+        : t('配置文件删除后，可以通过恢复按钮撤销删除');
+    }
+    return '';
+  });
+
   // 配置文件绝对路径
   const fileAP = computed(() => (config: IConfigTableItem) => {
     const { path, name } = config;
@@ -634,6 +667,20 @@
   defineExpose({
     refresh: getAllConfigList,
   });
+
+  // 配置文件撤销修改
+  const handleUnModify = async (id: number) => {
+    await unModifyConfigItem(props.bkBizId, props.appId, id);
+    Message({ theme: 'success', message: t('撤销修改配置文件成功') });
+    getAllConfigList();
+  };
+
+  // 配置文件恢复删除
+  const handleUnDelete = async (id: number) => {
+    await unDeleteConfigItem(props.bkBizId, props.appId, id);
+    Message({ theme: 'success', message: t('恢复配置文件成功') });
+    getAllConfigList();
+  };
 </script>
 <style lang="scss" scoped>
   .config-groups-table {