[Backport release-1.6] Fix: guides the user to enable the vale-workfl…

…ow addon (#627) * Fix: guides the user to enable the vale-workflow addon Signed-off-by: barnettZQG <[email protected]> (cherry picked from commit c4245e6) * Fix: component state property never read Signed-off-by: barnettZQG <[email protected]> (cherry picked from commit 35fccb0) Co-authored-by: barnettZQG <[email protected]>
kubevela · Oct 29, 2022 · fa4cbc0 · fa4cbc0
1 parent 2d49a97
commit fa4cbc0
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 25 deletions.
diff --git a/src/layout/TopBar/components/EditPlatFormUserDialog/index.tsx b/src/layout/TopBar/components/EditPlatFormUserDialog/index.tsx
@@ -1,5 +1,5 @@
 import React, { Component, Fragment } from 'react';
-import { Grid, Form, Input, Field, Button, Message, Icon, Dialog } from '@b-design/ui';
+import { Grid, Form, Input, Field, Message, Icon, Dialog } from '@b-design/ui';
 import { updateUser } from '../../../../api/users';
 import type { LoginUserInfo } from '../../../../interface/user';
 import { checkUserPassword } from '../../../../utils/common';
@@ -63,15 +63,6 @@ class EditPlatFormUserDialog extends Component<Props, State> {
     return i18n.t('Reset the password and email for the administrator account');
   }
 
-  showClickButtons = () => {
-    const { isLoading } = this.state;
-    return [
-      <Button type="primary" onClick={this.onUpdateUser} loading={isLoading}>
-        {i18n.t('Update')}
-      </Button>,
-    ];
-  };
-
   handleClickLook = () => {
     this.setState({
       isLookPassword: !this.state.isLookPassword,
@@ -80,6 +71,7 @@ class EditPlatFormUserDialog extends Component<Props, State> {
 
   render() {
     const init = this.field.init;
+    const { isLoading } = this.state;
     const { Row, Col } = Grid;
     const FormItem = Form.Item;
     const formItemLayout = {
@@ -95,12 +87,13 @@ class EditPlatFormUserDialog extends Component<Props, State> {
         <Dialog
           visible={true}
           title={this.showTitle()}
+          className={'commonDialog'}
           style={{ width: '600px' }}
           onOk={this.onUpdateUser}
           locale={locale().Dialog}
           footerActions={['ok']}
         >
-          <Form {...formItemLayout} field={this.field}>
+          <Form loading={isLoading} {...formItemLayout} field={this.field}>
             <Row>
               <Col span={24} style={{ padding: '0 8px' }}>
                 <FormItem label={<Translation>Password</Translation>} required>

diff --git a/src/pages/PipelineListPage/components/CreatePipeline/index.tsx b/src/pages/PipelineListPage/components/CreatePipeline/index.tsx
@@ -117,7 +117,7 @@ class CreatePipeline extends React.Component<PipelineProps, State> {
     reader.readAsText(fileSelect);
     reader.onload = () => {
       this.field.setValues({
-        config: reader.result?.toString() || '',
+        steps: reader.result?.toString() || '',
       });
     };
     return {

diff --git a/src/pages/PipelineListPage/index.less b/src/pages/PipelineListPage/index.less
@@ -66,3 +66,14 @@
     }
   }
 }
+
+.addon-notice {
+  display: flex;
+  align-content: center;
+  justify-content: center;
+  padding: 200px var(--spacing-8);
+  font-size: var(--font-size-large);
+  a {
+    margin: 0 var(--spacing-2);
+  }
+}
diff --git a/src/pages/PipelineListPage/index.tsx b/src/pages/PipelineListPage/index.tsx
@@ -24,13 +24,15 @@ import CreatePipeline from './components/CreatePipeline';
 import { beautifyTime, momentDate } from '../../utils/common';
 import ClonePipeline from './components/PipelineClone';
 import RunStatusIcon from '../PipelineRunPage/components/RunStatusIcon';
+import type { AddonBaseStatus } from '../../interface/addon';
 
 type Props = {
   targets?: [];
   envs?: [];
   history: any;
   userInfo?: LoginUserInfo;
   dispatch: Dispatch<any>;
+  enabledAddons?: AddonBaseStatus[];
 };
 
 export type ShowMode = 'table' | 'card' | string | null;
@@ -48,7 +50,7 @@ type State = {
 };
 
 @connect((store: any) => {
-  return { ...store.user };
+  return { ...store.user, ...store.addons };
 })
 class PipelineListPage extends Component<Props, State> {
   constructor(props: Props) {
@@ -342,6 +344,8 @@ class PipelineListPage extends Component<Props, State> {
       showNewPipeline,
       showClonePipeline,
     } = this.state;
+    const { enabledAddons } = this.props;
+    const addonEnabled = enabledAddons?.filter((addon) => addon.name == 'vela-workflow').length;
     return (
       <div>
         <Title
@@ -352,14 +356,16 @@ class PipelineListPage extends Component<Props, State> {
               request={{ resource: 'project:?/pipeline:*', action: 'create' }}
               project={'?'}
             >
-              <Button
-                type="primary"
-                onClick={() => {
-                  this.setState({ showNewPipeline: true });
-                }}
-              >
-                <Translation>New Pipeline</Translation>
-              </Button>
+              <If condition={addonEnabled}>
+                <Button
+                  type="primary"
+                  onClick={() => {
+                    this.setState({ showNewPipeline: true });
+                  }}
+                >
+                  <Translation>New Pipeline</Translation>
+                </Button>
+              </If>
             </Permission>,
           ]}
         />
@@ -377,10 +383,17 @@ class PipelineListPage extends Component<Props, State> {
             this.getPipelines(params);
           }}
         />
-
-        <Loading style={{ width: '100%' }} visible={isLoading}>
-          {this.renderPipelineTable()}
-        </Loading>
+        <If condition={addonEnabled}>
+          <Loading style={{ width: '100%' }} visible={isLoading}>
+            {this.renderPipelineTable()}
+          </Loading>
+        </If>
+        <If condition={!addonEnabled}>
+          <div className="addon-notice">
+            Please enable the <Link to="/addons/vela-workflow">vela-workflow</Link> Addon that
+            powers Pipeline.
+          </div>
+        </If>
 
         <If condition={showRunPipeline}>
           {pipeline && (