feat: support clear all selected data for select-table

Support clear all selected data for the select-table and tab-select-table component.

Change-Id: If639e04f5c3327eda1bdce3652f013f628e0c1b5

releasenotes/notes/Support-Clear-Selected-80e66080d37c96e3.yaml

@@ -0,0 +1,5 @@
+---
+features:
+  - |
+    Add clear selected button to clear all the selected data for the
+    select-table and tab-select-table component.

src/components/FormItem/SelectTable/index.jsx

@@ -13,7 +13,8 @@
 // limitations under the License.
 
 import React from 'react';
-import { Radio, Tag } from 'antd';
+import { Radio, Tag, Button, Tooltip } from 'antd';
+import { ClearOutlined } from '@ant-design/icons';
 import { observer } from 'mobx-react';
 import PropTypes from 'prop-types';
 import MagicInput from 'components/MagicInput';
@@ -49,6 +50,23 @@ const getInitRows = (value, data, backendPageStore) => {
   return rows;
 };
 
+export const renderClearButton = (self, rows, props = {}) => {
+  const { showSelected = true } = props;
+  if (!showSelected) {
+    return null;
+  }
+  if (!rows || !rows.length) {
+    return null;
+  }
+  return (
+    <Tooltip title={t('Clear selected')}>
+      <Button size="small" onClick={self.clearSelected}>
+        <ClearOutlined />
+      </Button>
+    </Tooltip>
+  );
+};
+
 @observer
 export default class SelectTable extends React.Component {
   static propTypes = {
@@ -581,6 +599,13 @@ export default class SelectTable extends React.Component {
     });
   };
 
+  clearSelected = () => {
+    this.setState({
+      selectedRowKeys: [],
+      selectedRows: [],
+    });
+  };
+
   initTabChange() {
     const { defaultTabValue, onTabChange, value } = this.props;
     if (defaultTabValue !== undefined && onTabChange !== undefined) {
@@ -795,6 +820,10 @@ export default class SelectTable extends React.Component {
     </Tag>
   );
 
+  renderClearButton = (rows) => {
+    return renderClearButton(this, rows, this.props);
+  };
+
   renderSelected() {
     const { showSelected = true, selectedLabel, maxSelectedCount } = this.props;
     if (maxSelectedCount === -1) {
@@ -806,9 +835,11 @@ export default class SelectTable extends React.Component {
     }
     const rows = isEmpty(selectedRows) ? this.getSelectedRows() : selectedRows;
     const items = rows.map((it) => this.renderTag(it));
+    const clearButton = this.renderClearButton(rows);
     return (
       <div>
-        {t('Selected')} {selectedLabel}:&nbsp;&nbsp;{items}
+        {t('Selected')} {selectedLabel}:&nbsp;&nbsp;{clearButton}&nbsp;&nbsp;
+        {items}
       </div>
     );
   }

src/components/FormItem/TabSelectTable/index.jsx

@@ -13,7 +13,9 @@
 // limitations under the License.
 
 import React, { Component } from 'react';
-import SelectTable from 'components/FormItem/SelectTable';
+import SelectTable, {
+  renderClearButton,
+} from 'components/FormItem/SelectTable';
 import { Tabs, Tag } from 'antd';
 import { isEmpty } from 'lodash';
 
@@ -81,6 +83,18 @@ export default class TabSelectTable extends Component {
     });
   };
 
+  clearSelected = () => {
+    this.setState(
+      {
+        selectedRowKeys: [],
+        selectedRows: [],
+      },
+      () => {
+        this.onChangeValue();
+      }
+    );
+  };
+
   onTagClose = (itemKey) => {
     const { selectedRowKeys, selectedRows } = this.state;
     const newKeys = selectedRowKeys.filter((it) => it !== itemKey);
@@ -162,12 +176,17 @@ export default class TabSelectTable extends Component {
     </Tag>
   );
 
+  renderClearButton = (rows) => {
+    return renderClearButton(this, rows);
+  };
+
   renderSelected() {
     const { selectedRows } = this.state;
     const items = selectedRows.map((it) => this.renderTag(it));
+    const clearButton = this.renderClearButton(selectedRows);
     return (
       <div>
-        {t('Selected')} :&nbsp;&nbsp;{items}
+        {t('Selected')} :&nbsp;&nbsp;{clearButton}&nbsp;&nbsp;{items}
       </div>
     );
   }

src/locales/en.json

@@ -348,6 +348,7 @@
   "Clean Wait": "Clean Wait",
   "Cleaning": "Cleaning",
   "Clear Gateway": "Clear Gateway",
+  "Clear selected": "Clear selected",
   "Click To View": "Click To View",
   "Click here for filters.": "Click here for filters.",
   "Click to Upload": "Click to Upload",

src/locales/ko-kr.json

@@ -347,6 +347,7 @@
   "Clean Wait": "",
   "Cleaning": "",
   "Clear Gateway": "",
+  "Clear selected": "선택 비우기",
   "Click To View": "",
   "Click here for filters.": "",
   "Click to Upload": "",

src/locales/zh-hans.json

@@ -347,6 +347,7 @@
   "Clean Wait": "等待清除",
   "Cleaning": "清除中",
   "Clear Gateway": "清除网关",
+  "Clear selected": "清空选中",
   "Click To View": "点击查看",
   "Click here for filters.": "筛选",
   "Click to Upload": "点击上传文件",