fix: remove the warning in console (#529)

* fix: remove the warning in console

* test: update snapshots

Author: mortalYoung

src/provider/__tests__/__snapshots__/molecule.test.tsx.snap

@@ -98,7 +98,7 @@ exports[`Test MoleculeProvider Match The MoleculeProvider snapshot 1`] = `
         data-type="SplitPane"
       >
         <div
-          className={false}
+          className=""
           style={
             Object {
               "WebkitBoxFlex": 0,
@@ -672,7 +672,6 @@ exports[`Test MoleculeProvider Match The MoleculeProvider snapshot 1`] = `
       <div
         className="mo-statusBar__item"
         id="statusbar.problems.title"
-        sortIndex={1}
       >
         <a
           onClick={[Function]}
@@ -698,23 +697,8 @@ exports[`Test MoleculeProvider Match The MoleculeProvider snapshot 1`] = `
       className="mo-statusBar__right-items"
     >
       <div
-        actionBar={
-          Array [
-            Object {
-              "icon": "clear-all",
-              "id": "ClearAll",
-              "title": "Clear All Notifications",
-            },
-            Object {
-              "icon": "chevron-down",
-              "id": "HideNotifications",
-              "title": "Hide Notifications",
-            },
-          ]
-        }
         className="mo-statusBar__item"
         id="MO_NOTIFICATION"
-        sortIndex={1}
       >
         <a
           onClick={[Function]}
@@ -779,7 +763,6 @@ exports[`Test MoleculeProvider Match The MoleculeProvider snapshot 1`] = `
       <div
         className="mo-statusBar__item"
         id="MoEditorInfo"
-        sortIndex={2}
       >
         <a
           onClick={[Function]}

src/workbench/__tests__/__snapshots__/workbench.test.tsx.snap

@@ -47,6 +47,7 @@ exports[`Test Workbench Component Match The WorkbenchView snapshot 1`] = `
           data-type="SplitPane"
         >
           <div
+            class=""
             style="display: -webkit-box,-moz-box,-ms-flexbox,-webkit-flex,flex; outline: none; min-width: 170px; max-width: calc(80% - 1px*0.8); flex-grow: 0; width: 300px;"
           >
             <div

src/workbench/statusBar/__tests__/__snapshots__/status.test.tsx.snap

@@ -11,7 +11,6 @@ exports[`The StatusBar Component Match Snapshot 1`] = `
     <div
       className="mo-statusBar__item"
       id="MoEditorInfo"
-      sortIndex={2}
     >
       <a
         onClick={[Function]}
@@ -28,7 +27,6 @@ exports[`The StatusBar Component Match Snapshot 1`] = `
     <div
       className="mo-statusBar__item"
       id="MoEditorInfo"
-      sortIndex={2}
     >
       <a
         onClick={[Function]}

src/workbench/statusBar/item.tsx

@@ -3,18 +3,39 @@ import { classNames } from 'mo/common/className';
 import { IStatusBarItem } from 'mo/model/workbench/statusBar';
 import { IStatusBarController } from 'mo/controller/statusBar';
 import { itemClassName } from './base';
+import { getDataAttributionsFromProps } from 'mo/common/dom';
 
 export function StatusItem(props: IStatusBarItem & IStatusBarController) {
-    const { className, onClick, id, name, data, render, ...extra } = props;
+    const {
+        className,
+        onClick,
+        id,
+        name,
+        data,
+        render,
+        style,
+        role,
+        title,
+        ...restProps
+    } = props;
     const clsName = classNames(itemClassName, className);
     const events = {
         onClick: function (e: React.MouseEvent) {
             onClick?.(e, props);
         },
     };
 
+    const attrProps = getDataAttributionsFromProps(restProps);
+
     return (
-        <div className={clsName} id={id.toString()} {...extra}>
+        <div
+            className={clsName}
+            style={style}
+            role={role}
+            title={title}
+            id={id.toString()}
+            {...attrProps}
+        >
             <a tabIndex={-1} title={name} {...events}>
                 {render ? render(props) : name}
             </a>

src/workbench/workbench.tsx

@@ -89,7 +89,7 @@ export function WorkbenchView(props: IWorkbench & ILayout & ILayoutController) {
                             minSize="170px"
                             initialSize={splitPanePos[0]}
                             maxSize="80%"
-                            className={sidebar.hidden && 'hidden'}
+                            className={sidebar.hidden ? 'hidden' : ''}
                         >
                             <SidebarView />
                         </Pane>