aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authordrveerendra <vrajasekharaiah@att.com>2019-10-31 12:45:30 -0400
committersebdet <sebastien.determe@intl.att.com>2019-11-04 18:28:24 +0100
commitf6b2625c5876c5ef1b8ead0b3962362fb2924f95 (patch)
treea4f365ded51ffc265b226560d20bc81d9dd28573
parent2901ca9fec4a88db325b90bda2103ffc5e921681 (diff)
Adding viewToscamodels menu
Updated package.json file to include material table and material UI react libraries. Added ViewToscalModals folder which contains js file, corresponding test file and its snapshots Issue-ID: CLAMP-544 Change-Id: I6b9328d6270fc32b41a152c91a9fd872f3524beb Signed-off-by: drveerendra <vrajasekharaiah@att.com>
-rw-r--r--ui-react/package.json4
-rw-r--r--ui-react/src/LoopUI.js2
-rw-r--r--ui-react/src/__snapshots__/LoopUI.test.js.snap4
-rw-r--r--ui-react/src/__snapshots__/OnapClamp.test.js.snap4
-rw-r--r--ui-react/src/api/TemplateMenu.js40
-rw-r--r--ui-react/src/components/dialogs/ViewToscaModals/ViewToscaModals.js151
-rw-r--r--ui-react/src/components/dialogs/ViewToscaModals/ViewToscaModals.test.js89
-rw-r--r--ui-react/src/components/dialogs/ViewToscaModals/__snapshots__/ViewToscaModals.test.js.snap169
-rw-r--r--ui-react/src/components/menu/MenuBar.js3
-rw-r--r--ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap99
10 files changed, 543 insertions, 22 deletions
diff --git a/ui-react/package.json b/ui-react/package.json
index 0e0c6ab6b..d876b6c71 100644
--- a/ui-react/package.json
+++ b/ui-react/package.json
@@ -34,6 +34,9 @@
"bootstrap-css-only": "4.3.1",
"styled-components": "4.3.2",
"react-router-dom": "5.0.1",
+ "@material-ui/core": "4.3.2",
+ "@material-ui/icons": "4.2.1",
+ "material-table": "1.48.0",
"react-select": "3.0.4"
},
"devDependencies": {
@@ -91,3 +94,4 @@
]
}
}
+
diff --git a/ui-react/src/LoopUI.js b/ui-react/src/LoopUI.js
index ff3c4445a..11808da38 100644
--- a/ui-react/src/LoopUI.js
+++ b/ui-react/src/LoopUI.js
@@ -42,6 +42,7 @@ import ConfigurationPolicyModal from './components/dialogs/ConfigurationPolicy/C
import LoopProperties from './components/dialogs/LoopProperties';
import UserInfo from './components/dialogs/UserInfo';
import LoopService from './api/LoopService';
+import ViewToscaModals from './components/dialogs/ViewToscaModals/ViewToscaModals';
import PerformAction from './components/dialogs/PerformActions';
import RefreshStatus from './components/dialogs/RefreshStatus';
import DeployLoop from './components/dialogs/DeployLoop';
@@ -247,6 +248,7 @@ export default class LoopUI extends React.Component {
render() {
return (
<StyledMainDiv id="main_div">
+ <Route path="/viewToscaModals" render={(routeProps) => (<ViewToscaModals {...routeProps} />)} />
<Route path="/operationalPolicyModal"
render={(routeProps) => (<OperationalPolicyModal {...routeProps} loopCache={this.getLoopCache()} loadLoopFunction={this.loadLoop} showAlert={this.showAlert}/>)} />
<Route path="/configurationPolicyModal/:componentName" render={(routeProps) => (<ConfigurationPolicyModal {...routeProps} loopCache={this.getLoopCache()} loadLoopFunction={this.loadLoop}/>)} />
diff --git a/ui-react/src/__snapshots__/LoopUI.test.js.snap b/ui-react/src/__snapshots__/LoopUI.test.js.snap
index ecf439e4e..3c84e9564 100644
--- a/ui-react/src/__snapshots__/LoopUI.test.js.snap
+++ b/ui-react/src/__snapshots__/LoopUI.test.js.snap
@@ -5,6 +5,10 @@ exports[`Verify LoopUI Test the render method 1`] = `
id="main_div"
>
<Route
+ path="/viewToscaModals"
+ render={[Function]}
+ />
+ <Route
path="/operationalPolicyModal"
render={[Function]}
/>
diff --git a/ui-react/src/__snapshots__/OnapClamp.test.js.snap b/ui-react/src/__snapshots__/OnapClamp.test.js.snap
index 751c94b3b..abe6be4b4 100644
--- a/ui-react/src/__snapshots__/OnapClamp.test.js.snap
+++ b/ui-react/src/__snapshots__/OnapClamp.test.js.snap
@@ -28,6 +28,10 @@ exports[`Verify OnapClamp Test the render method 1`] = `
id="main_div"
>
<Route
+ path="/viewToscaModals"
+ render={[Function]}
+ />
+ <Route
path="/operationalPolicyModal"
render={[Function]}
/>
diff --git a/ui-react/src/api/TemplateMenu.js b/ui-react/src/api/TemplateMenu.js
new file mode 100644
index 000000000..6bc60da5c
--- /dev/null
+++ b/ui-react/src/api/TemplateMenu.js
@@ -0,0 +1,40 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * ONAP CLAMP
+ * ================================================================================
+ * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END============================================
+ * ===================================================================
+ *
+ */
+
+export default class TemplateMenu {
+ static getToscaModals() {
+ return fetch('restservices/clds/v2/loop/tosca/models', { method: 'GET', credentials: 'same-origin', })
+ .then(function (response) {
+ console.debug("getToscaModels response received: ", response.status);
+ if (response.ok) {
+ return response.json();
+ } else {
+ console.error("getToscaModels query failed");
+ return {};
+ }
+ })
+ .catch(function (error) {
+ console.error("getToscaModels error received", error);
+ return {};
+ });
+ }
+}
diff --git a/ui-react/src/components/dialogs/ViewToscaModals/ViewToscaModals.js b/ui-react/src/components/dialogs/ViewToscaModals/ViewToscaModals.js
new file mode 100644
index 000000000..8073dc357
--- /dev/null
+++ b/ui-react/src/components/dialogs/ViewToscaModals/ViewToscaModals.js
@@ -0,0 +1,151 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * ONAP CLAMP
+ * ================================================================================
+ * Copyright (C) 2019 AT&T Intellectual Property. All rights
+ * reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END============================================
+ * ===================================================================
+ *
+ */
+
+import React, { forwardRef } from 'react'
+import MaterialTable from "material-table";
+import Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
+import styled from 'styled-components';
+import TemplateMenu from '../../../api/TemplateMenu';
+import ArrowUpward from '@material-ui/icons/ArrowUpward';
+import ChevronLeft from '@material-ui/icons/ChevronLeft';
+import ChevronRight from '@material-ui/icons/ChevronRight';
+import Clear from '@material-ui/icons/Clear';
+import FirstPage from '@material-ui/icons/FirstPage';
+import LastPage from '@material-ui/icons/LastPage';
+import Search from '@material-ui/icons/Search';
+
+
+const ModalStyled = styled(Modal)`
+ background-color: transparent;
+`
+const StyledToscaView = styled.textarea`
+`
+const StyledToscaDiv = styled.div`
+`
+const vtmCellStyle = { border: '1px solid black' };
+const vtmHeaderStyle = { backgroundColor: '#ddd', border: '2px solid black' };
+const vtmRowHeaderStyle = {backgroundColor:'#ddd', fontSize: '15pt', text: 'bold', border: '1px solid black'};
+
+export default class ViewToscalModals extends React.Component {
+
+ state = {
+ show: true,
+ content: 'Please select Tosca model to view the details',
+ selectedRow: -1,
+ toscaNames: [],
+ toscaColumns: [
+ { title: "#", field: "index", render: rowData => rowData.tableData.id + 1,
+ cellStyle: vtmCellStyle,
+ headerStyle: vtmHeaderStyle
+ },
+ { title: "Micro Service Name", field: "toscaModelName",
+ cellStyle: vtmCellStyle,
+ headerStyle: vtmHeaderStyle
+ },
+ { title: "PolicyType", field: "policyType",
+ cellStyle: vtmCellStyle,
+ headerStyle: vtmHeaderStyle
+ },
+ { title: "Version", field: "version",
+ cellStyle: vtmCellStyle,
+ headerStyle: vtmHeaderStyle
+ },
+ { title: "Uploaded By", field: "userId",
+ cellStyle: vtmCellStyle,
+ headerStyle: vtmHeaderStyle
+ },
+ { title: "Uploaded Date", field: "lastUpdatedDate", editable: 'never',
+ cellStyle: vtmCellStyle,
+ headerStyle: vtmHeaderStyle
+ }
+ ],
+ tableIcons: {
+ FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
+ LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
+ NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
+ PreviousPage: forwardRef((props, ref) => <ChevronLeft {...props} ref={ref} />),
+ ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
+ Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
+ SortArrow: forwardRef((props, ref) => <ArrowUpward {...props} ref={ref} />),
+ }
+ };
+
+ constructor(props, context) {
+ super(props, context);
+ this.handleClose = this.handleClose.bind(this);
+ this.getToscaModals = this.getToscaModals.bind(this);
+ this.handleYamlContent = this.handleYamlContent.bind(this);
+ }
+
+ componentWillMount() {
+ this.getToscaModals();
+ }
+
+ getToscaModals() {
+ TemplateMenu.getToscaModals().then(toscaNames => {
+ this.setState({ toscaNames: toscaNames });
+ });
+ }
+
+ handleYamlContent(event) {
+ console.log('inside handleYamlContent');
+ this.setState({ content: event.target.value });
+ }
+
+ handleClose() {
+ this.setState({ show: false });
+ this.props.history.push('/');
+ }
+
+ render() {
+ return (
+ <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose}>
+ <Modal.Header closeButton>
+ <Modal.Title className="title">View Tosca Model</Modal.Title>
+ </Modal.Header>
+ <Modal.Body>
+ <MaterialTable
+ title={"View ToscaModel"}
+ data={this.state.toscaNames}
+ columns={this.state.toscaColumns}
+ icons={this.state.tableIcons}
+ onRowClick={(event, rowData) => {this.setState({content: rowData.toscaModelRevisions[0].toscaModelYaml, selectedRow: rowData.tableData.id})}}
+ options={{
+ headerStyle: vtmRowHeaderStyle,
+ rowStyle: rowData => ({
+ backgroundColor: (this.state.selectedRow !== -1 && this.state.selectedRow === rowData.tableData.id) ? '#EEE' : '#FFF'
+ })
+ }}
+ />
+ <StyledToscaDiv>
+ <StyledToscaView value={this.state.content} onChange={this.handleYamlContent}/>
+ </StyledToscaDiv>
+ </Modal.Body>
+ <Modal.Footer>
+ <Button variant="secondary" onClick={this.handleClose}>Close</Button>
+ </Modal.Footer>
+ </ModalStyled>
+ );
+ }
+}
diff --git a/ui-react/src/components/dialogs/ViewToscaModals/ViewToscaModals.test.js b/ui-react/src/components/dialogs/ViewToscaModals/ViewToscaModals.test.js
new file mode 100644
index 000000000..4284dd3ed
--- /dev/null
+++ b/ui-react/src/components/dialogs/ViewToscaModals/ViewToscaModals.test.js
@@ -0,0 +1,89 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * ONAP CLAMP
+ * ================================================================================
+ * Copyright (C) 2019 AT&T Intellectual Property. All rights
+ * reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END============================================
+ * ===================================================================
+ *
+ */
+import React from 'react';
+import { shallow } from 'enzyme';
+import ViewToscaModals from './ViewToscaModals';
+import { mount } from 'enzyme';
+
+
+describe('Verify ViewToscaModals', () => {
+ beforeEach(() => {
+ fetch.resetMocks();
+ fetch.mockImplementation(() => {
+ return Promise.resolve({
+ ok: true,
+ status: 200,
+ json: () => {
+ return Promise.resolve({
+ "index": "1",
+ "toscaModelYaml":"MTCA",
+ "toscaModelName":"DCAE_MTCAConfig",
+ "version":"16",
+ "userId":"aj928f",
+ "policyType":"mtca",
+ "lastUpdatedDate":"05-07-2019 19:09:42"
+ });
+ }
+ });
+ });
+ });
+
+ it('Test the tosca model view render method', () => {
+ const component = shallow(<ViewToscaModals/>);
+ component.setState({ toscaNames: {
+ "index": "1",
+ "toscaModelYaml": "MTCA",
+ "toscaModelName": "DCAE_MTCAConfig",
+ "version" : "16",
+ "userId" : "aj928f",
+ "policyType" : "mtca",
+ "lastUpdatedDate" : "05-07-2019 19:09:42"
+ }
+ });
+ expect(component).toMatchSnapshot();
+ });
+
+ it('Test Table icons', () => {
+ const component = mount(<ViewToscaModals/>);
+ expect(component.find('[className="MuiSelect-icon MuiTablePagination-selectIcon"]')).toBeTruthy();
+
+ });
+
+ it('Test handleYamlContent', () => {
+ const yamlContent = 'MTCA Tosca model details';
+ const component = shallow(<ViewToscaModals/>);
+ component.find('[value="Please select Tosca model to view the details"]').prop('onChange')({ target: { value: yamlContent }});
+ expect(component.state('content')).toEqual(yamlContent);
+ });
+
+ it('Test handleClose', () => {
+ const historyMock = { push: jest.fn() };
+ const handleClose = jest.spyOn(ViewToscaModals.prototype,'handleClose');
+ const component = shallow(<ViewToscaModals history={historyMock} />)
+ component.find('[variant="secondary"]').prop('onClick')();
+ expect(handleClose).toHaveBeenCalledTimes(1);
+ expect(component.state('show')).toEqual(false);
+ expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
+ handleClose.mockClear();
+ });
+});
diff --git a/ui-react/src/components/dialogs/ViewToscaModals/__snapshots__/ViewToscaModals.test.js.snap b/ui-react/src/components/dialogs/ViewToscaModals/__snapshots__/ViewToscaModals.test.js.snap
new file mode 100644
index 000000000..55137b928
--- /dev/null
+++ b/ui-react/src/components/dialogs/ViewToscaModals/__snapshots__/ViewToscaModals.test.js.snap
@@ -0,0 +1,169 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Verify ViewToscaModals Test the tosca model view render method 1`] = `
+<Styled(Bootstrap(Modal))
+ onHide={[Function]}
+ show={true}
+ size="xl"
+>
+ <ModalHeader
+ closeButton={true}
+ closeLabel="Close"
+ >
+ <ModalTitle
+ className="title"
+ >
+ View Tosca Model
+ </ModalTitle>
+ </ModalHeader>
+ <ModalBody>
+ <WithStyles(Component)
+ columns={
+ Array [
+ Object {
+ "cellStyle": Object {
+ "border": "1px solid black",
+ },
+ "field": "index",
+ "headerStyle": Object {
+ "backgroundColor": "#ddd",
+ "border": "2px solid black",
+ },
+ "render": [Function],
+ "title": "#",
+ },
+ Object {
+ "cellStyle": Object {
+ "border": "1px solid black",
+ },
+ "field": "toscaModelName",
+ "headerStyle": Object {
+ "backgroundColor": "#ddd",
+ "border": "2px solid black",
+ },
+ "title": "Micro Service Name",
+ },
+ Object {
+ "cellStyle": Object {
+ "border": "1px solid black",
+ },
+ "field": "policyType",
+ "headerStyle": Object {
+ "backgroundColor": "#ddd",
+ "border": "2px solid black",
+ },
+ "title": "PolicyType",
+ },
+ Object {
+ "cellStyle": Object {
+ "border": "1px solid black",
+ },
+ "field": "version",
+ "headerStyle": Object {
+ "backgroundColor": "#ddd",
+ "border": "2px solid black",
+ },
+ "title": "Version",
+ },
+ Object {
+ "cellStyle": Object {
+ "border": "1px solid black",
+ },
+ "field": "userId",
+ "headerStyle": Object {
+ "backgroundColor": "#ddd",
+ "border": "2px solid black",
+ },
+ "title": "Uploaded By",
+ },
+ Object {
+ "cellStyle": Object {
+ "border": "1px solid black",
+ },
+ "editable": "never",
+ "field": "lastUpdatedDate",
+ "headerStyle": Object {
+ "backgroundColor": "#ddd",
+ "border": "2px solid black",
+ },
+ "title": "Uploaded Date",
+ },
+ ]
+ }
+ data={
+ Object {
+ "index": "1",
+ "lastUpdatedDate": "05-07-2019 19:09:42",
+ "policyType": "mtca",
+ "toscaModelName": "DCAE_MTCAConfig",
+ "toscaModelYaml": "MTCA",
+ "userId": "aj928f",
+ "version": "16",
+ }
+ }
+ icons={
+ Object {
+ "FirstPage": Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "render": [Function],
+ },
+ "LastPage": Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "render": [Function],
+ },
+ "NextPage": Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "render": [Function],
+ },
+ "PreviousPage": Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "render": [Function],
+ },
+ "ResetSearch": Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "render": [Function],
+ },
+ "Search": Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "render": [Function],
+ },
+ "SortArrow": Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "render": [Function],
+ },
+ }
+ }
+ onRowClick={[Function]}
+ options={
+ Object {
+ "headerStyle": Object {
+ "backgroundColor": "#ddd",
+ "border": "1px solid black",
+ "fontSize": "15pt",
+ "text": "bold",
+ },
+ "rowStyle": [Function],
+ }
+ }
+ title="View ToscaModel"
+ />
+ <styled.div>
+ <styled.textarea
+ onChange={[Function]}
+ value="Please select Tosca model to view the details"
+ />
+ </styled.div>
+ </ModalBody>
+ <ModalFooter>
+ <Button
+ active={false}
+ disabled={false}
+ onClick={[Function]}
+ type="button"
+ variant="secondary"
+ >
+ Close
+ </Button>
+ </ModalFooter>
+</Styled(Bootstrap(Modal))>
+`;
diff --git a/ui-react/src/components/menu/MenuBar.js b/ui-react/src/components/menu/MenuBar.js
index b68e2376a..2ce92b39d 100644
--- a/ui-react/src/components/menu/MenuBar.js
+++ b/ui-react/src/components/menu/MenuBar.js
@@ -87,6 +87,9 @@ export default class MenuBar extends React.Component {
return (
<Navbar.Collapse>
+ <StyledNavDropdown title="Template">
+ <NavDropdown.Item as={StyledLink} to="/viewToscaModals">View Tosca Model</NavDropdown.Item>
+ </StyledNavDropdown>
<StyledNavDropdown title="Closed Loop">
<NavDropdown.Item as={StyledLink} to="/openLoop">Open CL</NavDropdown.Item>
<NavDropdown.Item as={StyledLink} to="/loopProperties" disabled={this.state.disabled}>Properties CL</NavDropdown.Item>
diff --git a/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap b/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap
index 3ee733463..1e13b3bdc 100644
--- a/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap
+++ b/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap
@@ -3,6 +3,61 @@
exports[`Verify MenuBar Test the render method 1`] = `
<NavbarCollapse>
<Styled(NavDropdown)
+ title="Template"
+ >
+ <DropdownItem
+ as={
+ Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "attrs": Array [],
+ "componentStyle": ComponentStyle {
+ "componentId": "sc-jKJlTe",
+ "isStatic": false,
+ "rules": Array [
+ "
+ color: ",
+ [Function],
+ ";
+ background-color: ",
+ [Function],
+ ";
+ font-weight: normal;
+ display: block;
+ width: 100%;
+ padding: .25rem 1.5rem;
+ clear: both;
+ text-align: inherit;
+ white-space: nowrap;
+ border: 0;
+ :hover {
+ text-decoration: none;
+ background-color: ",
+ [Function],
+ ";
+ color: ",
+ [Function],
+ ";
+ }
+",
+ ],
+ },
+ "displayName": "Styled(Link)",
+ "foldedComponentIds": Array [],
+ "render": [Function],
+ "styledComponentId": "sc-jKJlTe",
+ "target": [Function],
+ "toString": [Function],
+ "warnTooManyClasses": [Function],
+ "withComponent": [Function],
+ }
+ }
+ disabled={false}
+ to="/viewToscaModals"
+ >
+ View Tosca Model
+ </DropdownItem>
+ </Styled(NavDropdown)>
+ <Styled(NavDropdown)
title="Closed Loop"
>
<DropdownItem
@@ -11,7 +66,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
- "componentId": "sc-kpOJdX",
+ "componentId": "sc-jKJlTe",
"isStatic": false,
"rules": Array [
"
@@ -44,7 +99,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
"displayName": "Styled(Link)",
"foldedComponentIds": Array [],
"render": [Function],
- "styledComponentId": "sc-kpOJdX",
+ "styledComponentId": "sc-jKJlTe",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
@@ -62,7 +117,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
- "componentId": "sc-kpOJdX",
+ "componentId": "sc-jKJlTe",
"isStatic": false,
"rules": Array [
"
@@ -95,7 +150,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
"displayName": "Styled(Link)",
"foldedComponentIds": Array [],
"render": [Function],
- "styledComponentId": "sc-kpOJdX",
+ "styledComponentId": "sc-jKJlTe",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
@@ -113,7 +168,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
- "componentId": "sc-kpOJdX",
+ "componentId": "sc-jKJlTe",
"isStatic": false,
"rules": Array [
"
@@ -146,7 +201,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
"displayName": "Styled(Link)",
"foldedComponentIds": Array [],
"render": [Function],
- "styledComponentId": "sc-kpOJdX",
+ "styledComponentId": "sc-jKJlTe",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
@@ -168,7 +223,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
- "componentId": "sc-kpOJdX",
+ "componentId": "sc-jKJlTe",
"isStatic": false,
"rules": Array [
"
@@ -201,7 +256,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
"displayName": "Styled(Link)",
"foldedComponentIds": Array [],
"render": [Function],
- "styledComponentId": "sc-kpOJdX",
+ "styledComponentId": "sc-jKJlTe",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
@@ -219,7 +274,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
- "componentId": "sc-kpOJdX",
+ "componentId": "sc-jKJlTe",
"isStatic": false,
"rules": Array [
"
@@ -252,7 +307,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
"displayName": "Styled(Link)",
"foldedComponentIds": Array [],
"render": [Function],
- "styledComponentId": "sc-kpOJdX",
+ "styledComponentId": "sc-jKJlTe",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
@@ -270,7 +325,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
- "componentId": "sc-kpOJdX",
+ "componentId": "sc-jKJlTe",
"isStatic": false,
"rules": Array [
"
@@ -303,7 +358,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
"displayName": "Styled(Link)",
"foldedComponentIds": Array [],
"render": [Function],
- "styledComponentId": "sc-kpOJdX",
+ "styledComponentId": "sc-jKJlTe",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
@@ -321,7 +376,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
- "componentId": "sc-kpOJdX",
+ "componentId": "sc-jKJlTe",
"isStatic": false,
"rules": Array [
"
@@ -354,7 +409,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
"displayName": "Styled(Link)",
"foldedComponentIds": Array [],
"render": [Function],
- "styledComponentId": "sc-kpOJdX",
+ "styledComponentId": "sc-jKJlTe",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
@@ -372,7 +427,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
- "componentId": "sc-kpOJdX",
+ "componentId": "sc-jKJlTe",
"isStatic": false,
"rules": Array [
"
@@ -405,7 +460,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
"displayName": "Styled(Link)",
"foldedComponentIds": Array [],
"render": [Function],
- "styledComponentId": "sc-kpOJdX",
+ "styledComponentId": "sc-jKJlTe",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
@@ -423,7 +478,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
- "componentId": "sc-kpOJdX",
+ "componentId": "sc-jKJlTe",
"isStatic": false,
"rules": Array [
"
@@ -456,7 +511,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
"displayName": "Styled(Link)",
"foldedComponentIds": Array [],
"render": [Function],
- "styledComponentId": "sc-kpOJdX",
+ "styledComponentId": "sc-jKJlTe",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
@@ -478,7 +533,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
- "componentId": "sc-kpOJdX",
+ "componentId": "sc-jKJlTe",
"isStatic": false,
"rules": Array [
"
@@ -511,7 +566,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
"displayName": "Styled(Link)",
"foldedComponentIds": Array [],
"render": [Function],
- "styledComponentId": "sc-kpOJdX",
+ "styledComponentId": "sc-jKJlTe",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
@@ -544,7 +599,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
- "componentId": "sc-kpOJdX",
+ "componentId": "sc-jKJlTe",
"isStatic": false,
"rules": Array [
"
@@ -577,7 +632,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
"displayName": "Styled(Link)",
"foldedComponentIds": Array [],
"render": [Function],
- "styledComponentId": "sc-kpOJdX",
+ "styledComponentId": "sc-jKJlTe",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],