feat: ✨ add chooseFirst prop in select table (#3)

config/config.yaml

@@ -1,6 +1,6 @@
 host: 0.0.0.0
 port: 8088
-server: http://clab.pku.edu.cn
+server: https://clab.pku.edu.cn
 
 theme: default
 

src/components/FormItem/SelectTable/index.jsx

@@ -104,6 +104,7 @@ export default class SelectTable extends React.Component {
     imageTabAuto: PropTypes.bool,
     refreshFunc: PropTypes.func,
     hideRefresh: PropTypes.bool,
+    chooseFirst: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -131,6 +132,7 @@ export default class SelectTable extends React.Component {
     imageTabAuto: false,
     refreshFunc: null,
     hideRefresh: false,
+    chooseFirst: false,
   };
 
   constructor(props) {
@@ -154,6 +156,8 @@ export default class SelectTable extends React.Component {
 
   componentDidMount() {
     this.getData();
+    const { chooseFirst } = this.props;
+    if (chooseFirst) this.setFirst();
   }
 
   componentDidUpdate(prevProps, prevState) {
@@ -167,6 +171,22 @@ export default class SelectTable extends React.Component {
     }
   }
 
+  setFirst = async () => {
+    // make eslint happy
+    const { pageSize } = this.state;
+    const { extraParams } = this.props;
+    const params = {
+      limit: pageSize,
+      page: 1,
+      ...extraParams,
+    };
+    const data = await this.fetchDataByPage(params);
+    this.setState({
+      selectedRowKeys: [data[0].id],
+      selectedRows: [data[0]],
+    });
+  };
+
   getData() {
     const { backendPageStore, pageSize } = this.props;
     if (backendPageStore) {

src/pages/compute/containers/Instance/actions/StepCreate/NetworkStep/index.jsx

@@ -308,6 +308,7 @@ export class NetworkStep extends Base {
         ),
         backendPageStore: this.securityGroupStore,
         extraParams: { project_id: this.currentProjectId },
+        chooseFirst: true,
         hidden: !this.showSecurityGroups,
         required: this.showSecurityGroups,
         isMulti: true,