@steedos-labs/plugin-workflow 3.0.0-beta.5

package/main/default/pages/flowdetail.page.yml

@@ -0,0 +1,14 @@
+name: flowdetail
+__filename: >-
+  /Users/steedos/Documents/GitHub/code/steedos-platform/examples/project-ee/steedos-app/main/default/pages/flowdetail.page.yml
+is_active: true
+label: 流程详细页面
+object_name: flows
+pageAssignments:
+  - type: orgDefault
+    page: flowdetail
+    desktop: true
+    mobile: true
+render_engine: amis
+type: record
+widgets: []

package/main/default/pages/flows_form.page.amis.json

@@ -0,0 +1,25 @@
+{
+    "type": "service",
+    "body": [
+        {
+            "type": "steedos-object-form",
+            "label": "对象表单",
+            "objectApiName": "flows",
+            "recordId": "${recordId}",
+            "className": "",
+            "enableTabs": true,
+            "mode": "edit",
+            "layout": "normal",
+            "fieldsExtend": {
+                "perms": {
+                    "label": ""
+                }
+            }
+        }
+    ],
+    "data": {
+        "context": {}
+    },
+    "name": "flows_form",
+    "id": "u:bb11df3flows"
+}

package/main/default/pages/flows_form.page.yml

@@ -0,0 +1,12 @@
+name: flows_form
+is_active: true
+label: 流程表单
+object_name: flows
+pageAssignments:
+  - type: orgDefault
+    page: flows_form
+    desktop: true
+    mobile: true
+render_engine: amis
+type: form
+widgets: []

package/main/default/pages/instance_detail.page.amis.json

@@ -0,0 +1,149 @@
+{
+  "type": "page",
+  "body": [{
+      "type": "wrapper",
+      "visibleOn": "${AND(display != 'split', ${window:innerWidth > 768},!!!_inDrawer)}",
+      "className": "bg-white m-0 p-0 flex-shrink-0 min-w-[240px] lg:order-first lg:flex lg:flex-col border-r border-gray-300",
+      "body": [{
+        "type": "service",
+        "className": "w-full h-full",
+        "onEvent": {
+          "@data.changed.steedos_keyvalues": {
+            "actions": [{
+              "actionType": "reload"
+            }]
+          }
+        },
+        "body": [{
+          "type": "input-tree",
+          "treeContainerClassName": "h-full",
+          "name": "tree",
+          "className": "instance-box-tree bg-white w-full",
+          "id": "u:9f3dd961ca12",
+          "stacked": true,
+          "multiple": false,
+          "enableNodePath": false,
+          "hideRoot": true,
+          "showIcon": true,
+          "initiallyOpen": false,
+          "value": "/app/${appId}/${objectName}/grid/${listName}",
+          "size": "md",
+          "onEvent": {
+            "change": {
+              "actions": [{
+                "args": {
+                  "link": "${event.data.value}",
+                  "blank": false
+                },
+                "actionType": "link"
+              }]
+            }
+          },
+          "menuTpl": {
+            "type": "wrapper",
+            "className": "flex flex-row  p-0 m-0",
+            "body": [{
+                "type": "tpl",
+                "className": "flex-1 w-6/12",
+                "tpl": "${label}",
+                "id": "u:8147616a7b50"
+              },
+              {
+                "type": "tpl",
+                "className": "-mx-11 ",
+                "tpl": "",
+                "badge": {
+                  "className": "h-0",
+                  "offset": [
+                    -20,
+                    12
+                  ],
+                  "mode": "text",
+                  "text": "${tag | toInt}",
+                  "overflowCount": 999
+                },
+                "id": "u:94f078e62361"
+              }
+            ],
+            "id": "u:decad07ad26b"
+          },
+          "unfoldedLevel": 2,
+          "source": "${options}"
+        }],
+        "id": "u:aa4f4dc5f439",
+        "api": {
+          "method": "get",
+          "url": "${context.rootUrl}/api/${appId}/workflow/nav",
+          "headers": {
+            "Authorization": "Bearer ${context.tenantId},${context.authToken}"
+          }
+        },
+        "dsType": "api"
+      }],
+      "id": "u:3723a0a5ded0",
+      "mobile": {
+        "visibleOn": "false"
+      }
+    },
+    {
+      "type": "wrapper",
+      "className": "steedos-instance-detail-wrapper m-0 p-0 flex-1 focus:outline-none lg:order-last sm:pt-3 sm:px-3",
+      "body": [{
+        "type": "service",
+        "id": "u:d6db0c84f150",
+        "body": [{
+            "type": "wrapper",
+            "className": "p-0 h-full",
+            "body": [{
+              "type": "steedos-instance-detail",
+              "id": "u:40052b3812c1",
+              "label": "Instance Detail",
+              "instanceId": "${recordId}",
+              "boxName": "${side_listview_id}",
+              "hiddenOn": "!!!this.recordId"
+            }],
+            "visibleOn": "${window:InstanceDetailEnabledAmisRender != false}",
+            "id": "u:829a40757f0a"
+          },
+          {
+            "type": "wrapper",
+            "className": "workflow-main flex w-full h-full no-columns instance-show instance-detail-service-wrapper",
+            "visibleOn": "${window:InstanceDetailEnabledAmisRender == false}",
+            "body": [{
+              "type": "custom",
+              "html": "<div className='workflow-main flex w-full h-full no-columns instance-show instance-detail-service-wrapper'></div>",
+              "onMount": "try {\n    Session.set(\"instance_change\", false);\n\n    Session.set(\"instance_loading\", true);\n    Session.set(\"judge\", null);\n    Session.set(\"next_step_id\", null);\n    Session.set(\"next_step_multiple\", null);\n    Session.set(\"next_user_multiple\", null);\n    let box;\n    let recordId;\n    if (props.data._inDrawer) {\n        // 主表记录详细页面审批相关列表中点击名称字段右侧弹出drawer时，box写死，recordId取作用域中值\n        box = \"outbox\";\n        recordId = props.data.recordId;\n    }\n    else {\n        box = props.data.side_listview_id;\n        recordId = Session.get(\"record_id\");\n    }\n    Session.set(\"box\", box);\n    Session.set(\"instanceId\", recordId);\n    Session.set(\"instanceTaskId\", null);\n    window.instanceDetailBlazeRenderView = Blaze.render(Blaze._getTemplate('instance_view_wrapper'), document.getElementsByClassName('instance-detail-service-wrapper')[0])\n} catch (error) {\n    console.error(error)\n};\nif (window.instanceDetailBlazeRenderView) {\n    window.instanceDetailBlazeRenderView.autorun(() => {\n        if (FlowRouter.current().params.object_name == \"instances\") {\n            console.debug('====onMount=', props);\n            Session.set(\"instanceId\", Session.get(\"record_id\"));\n            Session.set(\"instanceTaskId\", null)\n        }\n    }\n    )\n};",
+              "id": "u:a6e0685d1da3",
+              "onUnmount": "if(window.instanceDetailBlazeRenderView){console.log('Blaze.remove===>instanceDetailBlazeRenderView');Blaze.remove(window.instanceDetailBlazeRenderView); window.instanceDetailBlazeRenderView = null;}"
+            }],
+            "id": "u:16cf880c925a",
+            "style": {
+              "position": "static",
+              "display": "block"
+            },
+            "isFixedHeight": false,
+            "isFixedWidth": false
+          }
+        ],
+        "className": "h-full",
+        "dsType": "api"
+      }],
+      "id": "u:f101829e8710"
+    }
+  ],
+  "regions": [
+    "body"
+  ],
+  "data": {},
+  "id": "u:d37465183f56",
+  "className": "steedos-instance-wrapper",
+  "bodyClassName": "p-0 flex flex-1 overflow-hidden h-full",
+  "name": "amis-root-workflow",
+  "initApi": null,
+  "initFetch": null,
+  "asideResizor": false,
+  "pullRefresh": {
+    "disabled": true
+  },
+  "editorState": "default"
+}

package/main/default/pages/instance_detail.page.yml

@@ -0,0 +1,12 @@
+name: instance_detail
+is_active: true
+label: Instance Detail
+object_name: instances
+pageAssignments:
+  - type: orgDefault
+    page: instance_detail
+    desktop: true
+    mobile: true
+render_engine: amis
+type: record
+widgets: []

package/main/default/pages/instance_tasks_detail.page.amis.json

@@ -0,0 +1,158 @@
+{
+  "type": "page",
+  "body": [
+    {
+      "type": "wrapper",
+      "visibleOn": "${AND(display != 'split', ${window:innerWidth > 768})}",
+      "className": "bg-white m-0 p-0 flex-shrink-0 min-w-[240px] lg:order-first lg:flex lg:flex-col border-r border-gray-300",
+      "body": [
+        {
+          "type": "service",
+          "className": "w-full h-full",
+          "onEvent": {
+            "@data.changed.steedos_keyvalues": {
+              "actions": [
+                {
+                  "actionType": "reload"
+                }
+              ]
+            }
+          },
+          "body": [
+            {
+              "type": "input-tree",
+              "treeContainerClassName": "h-full",
+              "name": "tree",
+              "className": "instance-box-tree bg-white w-full",
+              "id": "u:9f3dd961ca12",
+              "stacked": true,
+              "multiple": false,
+              "enableNodePath": false,
+              "hideRoot": true,
+              "showIcon": true,
+              "initiallyOpen": false,
+              "value":"/app/${appId}/${objectName}/grid/${listName}",
+              "size": "md",
+              "onEvent": {
+                "change": {
+                  "actions": [
+                    {
+                      "args": {
+                        "link": "${event.data.value}",
+                        "blank": false
+                      },
+                      "actionType": "link"
+                    }
+                  ]
+                }
+              },
+              "menuTpl": {
+                "type": "wrapper",
+                "className": "flex flex-row  p-0 m-0",
+                "body": [
+                  {
+                    "type": "tpl",
+                    "className": "flex-1 w-6/12",
+                    "tpl": "${label}"
+                  },
+                  {
+                    "type": "tpl",
+                    "className": "-mx-11 ",
+                    "tpl": "",
+                    "badge": {
+                      "className": "h-0",
+                      "offset": [
+                        -20,
+                        12
+                      ],
+                      "mode": "text",
+                      "text": "${tag}",
+                      "overflowCount": 999
+                    }
+                  }
+                ]
+              },
+              "unfoldedLevel": 2,
+              "source": "${options}"
+            }
+          ],
+          "id": "u:aa4f4dc5f439",
+          "api": {
+            "method": "get",
+            "url": "${context.rootUrl}/api/${appId}/workflow/nav",
+            "headers": {
+              "Authorization": "Bearer ${context.tenantId},${context.authToken}"
+            }
+          }
+        }
+      ],
+      "id": "u:339eb21f368c"
+    },
+    {
+      "type": "wrapper",
+      "className": "steedos-instance-detail-wrapper m-0 p-0 flex-1 focus:outline-none lg:order-last sm:pt-3 sm:px-3",
+      "body": [
+        {
+          "type": "service",
+          "id": "u:d6db0c84f150",
+          "body": [
+            {
+              "type": "wrapper",
+              "className": "p-0 h-full",
+              "body": [
+                {
+                  "type": "steedos-instance-detail",
+                  "label": "Instance Detail",
+                  "id": "u:40052b3812c1",
+                  "instanceId": "${instanceId}",
+                  "boxName": "${boxName}",
+                  "hiddenOn": "!!!this.instanceId"
+                }
+              ],
+              "id": "u:dc5cb678096b"
+            }
+          ],
+          "messages": {
+          },
+          "api": {
+            "url": "${context.rootUrl}/graphql?recordId=${recordId}",
+            "method": "post",
+            "messages": {
+            },
+            "dataType": "json",
+            "headers": {
+              "Authorization": "Bearer ${context.tenantId},${context.authToken}"
+            },
+            "requestAdaptor": "\nconst { recordId } = api.body;\napi.data = {\n  query: `{instance_task:instance_tasks__findOne(id: \"${recordId}\"){_id,instance}}`\n};\n\nreturn api;",
+            "adaptor": "\nlet boxName = api.body.side_listview_id === 'inbox' ? 'inbox' : 'outbox';\npayload.data = {\n  instanceId: payload.data.instance_task.instance,\n  boxName: boxName\n}\n; console.log('=======>payload===>', payload);  \nreturn payload;"
+          },
+          "className": "h-full"
+        }
+      ],
+      "id": "u:45d3529bdfd0"
+    }
+  ],
+  "regions": [
+    "body"
+  ],
+  "data": {
+    "objectName": "instance_tasks",
+    "recordId": "5f032f591d4951790b84f3a0",
+    "context": {
+      "rootUrl": "http://127.0.0.1:5000",
+      "tenantId": "644484b7aff6100247b3e6cf",
+      "userId": "6c017281-b966-49fe-aa2b-f09b835feed7",
+      "authToken": "ec7b993f86f01162b471f17d9063241beb7c57987a45d40f911e40269ca2e21b8f806cba87de7be1a07c41"
+    }
+  },
+  "className": "steedos-instance-wrapper",
+  "id": "u:d37465183f56",
+  "bodyClassName": "p-0 flex flex-1 overflow-hidden h-full",
+  "name": "amis-root-workflow",
+  "initApi": null,
+  "initFetch": null,
+  "asideResizor": false,
+  "pullRefresh": {
+    "disabled": true
+  }
+}

package/main/default/pages/instance_tasks_detail.page.yml

@@ -0,0 +1,12 @@
+name: instance_tasks_detail
+is_active: true
+label: Instance Task
+object_name: instance_tasks
+pageAssignments:
+  - type: orgDefault
+    page: instance_tasks_detail
+    desktop: true
+    mobile: true
+render_engine: amis
+type: record
+widgets: []

package/main/default/pages/instance_tasks_list.page.amis.json

@@ -0,0 +1,280 @@
+{
+  "type": "page",
+  "title": "Welcome to Steedos",
+  "body": [
+    {
+      "type": "service",
+      "id": "instance_tasks_list_service",
+      "className": "h-full w-full p-0 m-0",
+      "pageGridClassName": "h-full m-0",
+      "body": [
+        {
+          "type": "steedos-object-listview",
+          "objectApiName": "instance_tasks",
+          "columnsTogglable": false,
+          "filterVisible": true,
+          "visibleOn": "${!!!flowId}",
+          "showHeader": true,
+          "id": "u:d29cef0d1007",
+          "showDisplayAs": true,
+          "className": "h-full w-full bg-white instance-tasks-list",
+          "hiddenColumnOperation": true,
+          "formFactor": "LARGE",
+          "headerToolbarItems": [
+            {
+              "type": "button",
+              "label": "",
+              "icon": "fa fa-bars",
+              "className": "bg-white p-2 rounded border-gray-300 text-gray-500",
+              "align": "right",
+              "onEvent": {
+                "click": {
+                  "actions": [
+                    {
+                      "actionType": "custom",
+                      "script": "console.log(event.target);document.querySelector('.instances-customPage').classList.toggle('instances-sidebar-open');if(window.innerWidth < 768){document.querySelector('.isInset').classList.toggle('inset-0')}"
+                    }
+                  ]
+                }
+              },
+              "id": "u:115e270cae4d"
+            }
+          ],
+          "listName": "inbox",
+          "rowClassNameExpr": "<%=(data.is_read === false && (!data.clientIds || data.clientIds.length == 0 || !data.clientIds.includes(data._id))) ? 'unread-instance' : '' %>",
+          "rebuildOn": "\\${flowId || categoryId}",
+          "adaptor": "const isSearch = _.some(_.keys(api.body.self), key => key.includes('__keywords') || key.includes('__searchable__'));\nif(payload.data.count==0 && !isSearch){\n    const searchParams = new URLSearchParams(window.location.search);\n    const flowId = searchParams.get(\"flowId\");\n    const categoryId = searchParams.get(\"categoryId\");\n    const pathname = window.location.pathname;\n    if(flowId || categoryId){\n      window.FlowRouter.go(pathname + \"?additionalFilters=&flowId=&categoryId=\");\n    }\n    // if(flowId) {\n    //     window.FlowRouter.go(pathname + \"?additionalFilters=['category','=','\" + categoryId +\"']&flowId=&categoryId=\" + categoryId);\n    // }else if(categoryId) {\n    //     window.FlowRouter.go(pathname + \"?additionalFilters=&flowId=&categoryId=\");\n    // }\n};\nif (api.body.self.listName == \"inbox\") {\n  _.each(payload.data.rows, function (item, index) {\n    if (item.type == 'cc') {\n      item.instance_name += '（传阅）';\n    }\n    if (item.instance__expand.values) {\n      const form_fields = api.body.self.form_fields;\n      _.each(item.instance__expand.values, function (field, field_code) {\n        const form_field = _.find(form_fields, { code: field_code });\n        if (form_field && form_field.type == \"group\") {\n          if (form_field.is_multiselect) {\n            item.instance__expand.values[field_code] = field && field.length > 0 ? _.map(field, 'fullname').toString() : \"\";\n          } else {\n            item.instance__expand.values[field_code] = field ? field.fullname : \"\";\n          }\n        } else if (form_field && form_field.type == \"user\") {\n          if (form_field.is_multiselect) {\n            item.instance__expand.values[field_code] = field && field.length > 0 ? _.map(field, 'name').toString() : \"\";\n          } else {\n            item.instance__expand.values[field_code] = field ? field.name : \"\";\n          }\n        }\n      })\n    }\n  })\n}\n"
+        },
+        {
+          "type": "service",
+          "visibleOn": "${!!flowId}",
+          "schemaApi":  {
+            "url": "/graphql?flowId=${flowId}&categoryId=${categoryId}",
+            "method": "post",
+            "data": {
+              "query": "{flow: flows__findOne(id:\"${flowId}\"){form__expand{current}}}"
+            },
+            "adaptor": "const schema = window.SteedosWorkflow.InstanceTask.getListViewSchema(payload.data.flow); return schema;"
+          }
+        },
+        {
+          "type": "action",
+          "body": [
+            {
+              "type": "action",
+              "className": {
+                "mobileCss": "${window:innerWidth < 768}",
+                "pcCss": "${window:innerWidth > 768}",
+                "instances-sidebar-wrapper px-0 fixed z-20 h-full h-fill ease-in-out duration-300 flex flex-col overflow-y-auto bg-white block -translate-x-0 py-0": "true"
+              },
+              "body": [
+                {
+                  "type": "service",
+                  "id": "u:aa4f4dc5f439",
+                  "className": "w-full h-full border-r",
+                  "onEvent": {
+                    "@data.changed.instance_tasks": {
+                      "actions": [
+                        {
+                          "actionType": "reload"
+                        }
+                      ]
+                    }
+                  },
+                  "body": [
+                    {
+                      "type": "input-tree",
+                      "name": "tree",
+                      "treeContainerClassName": "h-full",
+                      "className": "instance-box-tree bg-white h-full w-full p-0",
+                      "id": "u:9f3dd961ca12",
+                      "stacked": true,
+                      "multiple": false,
+                      "enableNodePath": false,
+                      "hideRoot": true,
+                      "showIcon": true,
+                      "initiallyOpen": false,
+                      "value": "${CONCATENATE('/app/', appId, '/', objectName, '/grid/', listViewId, '?additionalFilters=', additionalFilters,'&flowId=',flowId,'&categoryId=',categoryId)}",
+                      "size": "md",
+                      "onEvent": {
+                        "change": {
+                          "actions": [
+                            {
+                              "actionType": "setValue",
+                              "componentId": "instance_tasks_list_service",
+                              "args": {
+                                "value": {
+                                  "isFlowDataDone": false
+                                }
+                              }
+                            },
+                            {
+                              "actionType": "custom",
+                              "script": "if (window.innerWidth < 768) { document.querySelector('.instances-customPage').classList.remove('instances-sidebar-open'); document.querySelector('.isInset').classList.remove('inset-0') }\n//获取上一次的flowId和categoryId\nconst lastFlowId = event.data.flowId;\nconst lastCategoryId = event.data.categoryId;\n//从value中获取最新的flowId\nvar flowIdRegex = /&flowId=([^&]+)/;\nvar flowIdMatch = event.data.value.match(flowIdRegex);\nconst flowId = flowIdMatch && flowIdMatch.length > 0 ? flowIdMatch[1] : \"\";\n//从value中获取最新的categoryId\nvar categoryIdRegex = /&categoryId=([^&]+)/;\nvar categoryIdMatch = event.data.value.match(categoryIdRegex);\nconst categoryId = categoryIdMatch && categoryIdMatch.length > 0 ? categoryIdMatch[1] : \"\";\n//获取上一次的listname和最新的listname\nconst lastListName = event.data.listName;\nconst listName = event.data.value.split('?')[0].split('instance_tasks/grid/')[1];\n//切换流程时清除过滤条件\nif (lastListName == \"inbox\" && listName == \"inbox\" && (flowId != lastFlowId || categoryId != lastCategoryId)) {\n  listViewPropsStoreKey = window.location.pathname + \"/crud\";\n  sessionStorage.removeItem(listViewPropsStoreKey);\n  sessionStorage.removeItem(listViewPropsStoreKey + \"/query\");\n}\n\n"
+                            },
+                            {
+                              "actionType": "setValue",
+                              "args": {
+                                "value": {
+                                  "additionalFilters": [
+                                    "${event.data.options.name}",
+                                    "=",
+                                    "${event.data.options.value}"
+                                  ]
+                                }
+                              },
+                              "componentId": "instance_tasks_list_service",
+                              "expression": "${event.data.options.level>=10}"
+                            },
+                            {
+                              "args": {
+                                "link": "${event.data.value}",
+                                "blank": false
+                              },
+                              "actionType": "link"
+                            }
+                          ]
+                        }
+                      },
+                      "menuTpl": {
+                        "type": "wrapper",
+                        "className": "flex flex-row  p-0 m-0",
+                        "body": [
+                          {
+                            "type": "tpl",
+                            "className": "flex-1 w-6/12",
+                            "tpl": "${label}",
+                            "id": "u:adf0cfafa63c"
+                          },
+                          {
+                            "type": "tpl",
+                            "className": "-mx-11 ",
+                            "tpl": "",
+                            "badge": {
+                              "className": "h-0",
+                              "offset": [
+                                -20,
+                                12
+                              ],
+                              "mode": "text",
+                              "text": "${tag | toInt}",
+                              "overflowCount": 999
+                            },
+                            "id": "u:ac230c095386"
+                          }
+                        ],
+                        "id": "u:74a18fd2df0b"
+                      },
+                      "unfoldedLevel": 2,
+                      "source": "${options}"
+                    }
+                  ],
+                  "api": {
+                    "method": "get",
+                    "url": "${context.rootUrl}/api/${appId}/workflow/nav",
+                    "headers": {
+                      "Authorization": "Bearer ${context.tenantId},${context.authToken}"
+                    },
+                    "messages": {
+                    },
+                    "trackExpression": "${_reloadKey}"
+                  },
+                  "messages": {
+                  }
+                }
+              ],
+              "id": "u:5d1f5d7c38d2"
+            }
+          ],
+          "onEvent": {
+            "click": {
+              "actions": [
+                {
+                  "actionType": "custom",
+                  "script": "if(window.innerWidth < 768){document.querySelector('.instances-customPage').classList.remove('instances-sidebar-open');document.querySelector('.isInset').classList.remove('inset-0') }"
+                }
+              ]
+            }
+          },
+          "className": {
+            "absolute isInset": "true"
+          },
+          "id": "u:c8fc09ce5d6b"
+        }
+      ],
+      "onEvent": {
+        "@data.changed.steedos_keyvalues": {
+          "actions": [
+            {
+              "actionType": "broadcast",
+              "args": {
+                "eventName": "@data.changed.instance_tasks"
+              },
+              "data": {
+                "objectName": "instance_tasks",
+                "recordId": "reload"
+              }
+            }
+          ]
+        }
+      },
+      "data": {
+        "isFlowDataDone": false
+      }
+    }
+  ],
+  "regions": [
+    "body"
+  ],
+  "data": {
+    "objectName": "instance_tasks",
+    "initialValues": {},
+    "title": ""
+  },
+  "id": "u:7e20ab64163e",
+  "asideResizor": false,
+  "pullRefresh": {
+    "disabled": true
+  },
+  "bodyClassName": {
+    "p-0 instances-customPage instances-sidebar": "true",
+    "pc instances-sidebar-open instances-minwidth": "${window:innerWidth > 768}"
+  },
+  "css": {
+    ".instances-customPage.instances-sidebar.instances-sidebar-open.pc": {
+      "margin-left": "240px"
+    },
+    ".instances-sidebar-wrapper": {
+      "transition": "0.5s ease transform",
+      "will-change": "transform",
+      "transform": "translate(-100%,0)",
+      "-webkit-transform": "translate(-100%,0)",
+      "-moz-transform": "translate(-100%,0)",
+      "-ms-transform": "translate(-100%,0)",
+      "-o-transform": "translate(-100%,0)",
+      "width": "240px"
+    },
+    ".instances-customPage.instances-sidebar-open .instances-sidebar-wrapper": {
+      "transform": "translate(0,0)",
+      "-webkit-transform": "translate(0,0)",
+      "-moz-transform": "translate(0,0)",
+      "-ms-transform": "translate(0,0)",
+      "-o-transform": "translate(0,0)"
+    },
+    ".pcCss": {
+      "top": "90px",
+      "left": "0px"
+    },
+    ".sidebar .pcCss": {
+      "left": "220px"
+    },
+    ".mobileCss": {
+      "top": "50px",
+      "left": "0px",
+      "padding-bottom": "65px"
+    },
+    ".instances-minwidth": {
+      "min-width": "388px"
+    }
+  }
+}