[Improvement-11386][UI] Concise the logic available for task action buttons (#11419)

* Remove button instead of disable button

* Correct the value of releaseState in the compare statement

Co-authored-by: sheldonliu <sheldonliu>

dolphinscheduler-ui/src/views/projects/workflow/components/dag/dag-context-menu.tsx

@@ -26,15 +26,11 @@ import { IWorkflowTaskInstance } from './types'
 import { NButton } from 'naive-ui'
 
 const props = {
-  startButtonDisplay: {
-    type: Boolean as PropType<boolean>,
-    default: true
-  },
-  startReadonly: {
+  startDisplay: {
     type: Boolean as PropType<boolean>,
     default: false
   },
-  menuReadonly: {
+  menuDisplay: {
     type: Boolean as PropType<boolean>,
     default: false
   },
@@ -131,36 +127,36 @@ export default defineComponent({
           class={styles['dag-context-menu']}
           style={{ left: `${this.left}px`, top: `${this.top}px` }}
         >
-          {this.startButtonDisplay && (
+          {this.startDisplay && (
             <NButton
               class={`${styles['menu-item']}`}
-              disabled={this.startReadonly}
               onClick={this.startRunning}
             >
               {t('project.node.start')}
             </NButton>)
           }
-          <NButton
-            class={`${styles['menu-item']}`}
-            disabled={this.menuReadonly}
-            onClick={this.handleEdit}
-          >
-            {t('project.node.edit')}
-          </NButton>
-          <NButton
-            class={`${styles['menu-item']}`}
-            disabled={this.menuReadonly}
-            onClick={this.handleCopy}
-          >
-            {t('project.node.copy')}
-          </NButton>
-          <NButton
-            class={`${styles['menu-item']}`}
-            disabled={this.menuReadonly}
-            onClick={this.handleDelete}
-          >
-            {t('project.node.delete')}
-          </NButton>
+          {this.menuDisplay && (
+            <>
+              <NButton
+                class={`${styles['menu-item']}`}
+                onClick={this.handleEdit}
+              >
+                {t('project.node.edit')}
+              </NButton>
+              <NButton
+                class={`${styles['menu-item']}`}
+                onClick={this.handleCopy}
+              >
+                {t('project.node.copy')}
+              </NButton>
+              <NButton
+                class={`${styles['menu-item']}`}
+                onClick={this.handleDelete}
+              >
+                {t('project.node.delete')}
+              </NButton>
+            </>
+          )}
           {this.taskInstance && (
             <NButton
               class={`${styles['menu-item']}`}

dolphinscheduler-ui/src/views/projects/workflow/components/dag/index.tsx

@@ -119,11 +119,11 @@ export default defineComponent({
     })
 
     // start button in the dag node menu
-    const startReadonly = computed(() => {
+    const startDisplay = computed(() => {
       if (props.definition) {
         return (
           route.name === 'workflow-definition-detail' &&
-          props.definition!.processDefinition.releaseState === 'NOT_RELEASE'
+          props.definition!.processDefinition.releaseState === 'ONLINE'
         )
       } else {
         return false
@@ -131,17 +131,17 @@ export default defineComponent({
     })
 
     // other button in the dag node menu
-    const menuReadonly = computed(() => {
+    const menuDisplay = computed(() => {
       if (props.instance) {
         return (
-          props.instance.state !== 'WAITING_THREAD' &&
-          props.instance.state !== 'SUCCESS' &&
-          props.instance.state !== 'PAUSE' &&
-          props.instance.state !== 'FAILURE' &&
-          props.instance.state !== 'STOP'
+          props.instance.state === 'WAITING_THREAD' ||
+          props.instance.state === 'SUCCESS' ||
+          props.instance.state === 'PAUSE' ||
+          props.instance.state === 'FAILURE' ||
+          props.instance.state === 'STOP'
         )
       } else if (props.definition) {
-        return props.definition!.processDefinition.releaseState === 'ONLINE'
+        return props.definition!.processDefinition.releaseState === 'OFFLINE'
       } else {
         return false
       }
@@ -337,7 +337,7 @@ export default defineComponent({
         />
         {!!props.definition && (
           <VersionModal
-            isInstance={props.instance ? true : false}
+            isInstance={!!props.instance}
             v-model:row={props.definition.processDefinition}
             v-model:show={versionModalShow.value}
             onUpdateList={refreshDetail}
@@ -362,9 +362,8 @@ export default defineComponent({
           onCancel={taskCancel}
         />
         <ContextMenuItem
-          startButtonDisplay={!props.instance}
-          startReadonly={startReadonly.value}
-          menuReadonly={menuReadonly.value}
+          startDisplay={startDisplay.value}
+          menuDisplay={menuDisplay.value}
           taskInstance={taskInstance.value}
           cell={nodeVariables.menuCell as Cell}
           visible={nodeVariables.menuVisible}