|
1 | 1 | import * as React from 'react'; |
2 | 2 | import PropTypes from 'prop-types'; |
3 | | -import { Grid, GridItem, Page, PageSection, PageSectionVariants, Tabs, Tab } from '@patternfly/react-core'; |
| 3 | +import { Grid, GridItem, Page, PageSection, PageSectionVariants, Tabs, Tab, TabContent } from '@patternfly/react-core'; |
4 | 4 | import { noop } from '../../common/helpers'; |
5 | 5 | import TutorialDashboard from '../../components/tutorialDashboard/tutorialDashboard'; |
6 | 6 | import InstalledAppsView from '../../components/installedAppsView/InstalledAppsView'; |
@@ -85,55 +85,76 @@ class LandingPage extends React.Component { |
85 | 85 | const { walkthroughServices, middlewareServices, user } = this.props; |
86 | 86 | const launchFn = isOpenShift4() ? this.handleServiceLaunchV4.bind(this) : this.handleServiceLaunch.bind(this); |
87 | 87 | const openshiftHost = getOpenshiftHost(middlewareServices); |
| 88 | + this.contentRef1 = React.createRef(); |
| 89 | + this.contentRef2 = React.createRef(); |
88 | 90 |
|
89 | 91 | return ( |
90 | | - <React.Fragment> |
91 | | - <Page className="pf-u-h-100vh" onLoad={this.handleLoad}> |
92 | | - <RoutedConnectedMasthead currentUserName={this.state.currentUserName} /> |
93 | | - <PageSection variant={PageSectionVariants.light} className="pf-u-py-0 pf-u-pl-lg pf-u-pr-0"> |
94 | | - <h1 className="pf-c-title pf-m-4xl pf-c-landing__heading">Welcome to the Solution Explorer</h1> |
95 | | - <p className="pf-c-landing__content"> |
96 | | - Quickly access consoles for all your Red Hat managed services, and learn how to easily implement |
97 | | - integrations with Solution Pattern examples. |
98 | | - </p> |
99 | | - </PageSection> |
| 92 | + <Page className="pf-u-h-100vh" onLoad={this.handleLoad}> |
| 93 | + <RoutedConnectedMasthead currentUserName={this.state.currentUserName} /> |
| 94 | + <PageSection variant={PageSectionVariants.light} className="pf-u-py-0 pf-u-pl-lg pf-u-pr-0"> |
| 95 | + <h1 className="pf-c-title pf-m-4xl pf-c-landing__heading">Welcome to the Solution Explorer</h1> |
| 96 | + <p className="pf-c-landing__content"> |
| 97 | + Quickly access consoles for all your Red Hat managed services, and learn how to easily implement |
| 98 | + integrations with Solution Pattern examples. |
| 99 | + </p> |
100 | 100 | <Tabs activeKey={this.state.activeTabKey} onSelect={this.handleTabClick}> |
101 | | - <Tab id="servicesTab" eventKey={0} title="All services" tabContentId="servicesTabSection"> |
102 | | - <PageSection className="pf-u-py-0 pf-u-pl-lg pf-u-pr-0"> |
103 | | - <div> |
104 | | - <Grid> |
105 | | - <GridItem sm={12} md={12}> |
106 | | - <InstalledAppsView |
107 | | - apps={Object.values(middlewareServices.data)} |
108 | | - username={this.state.currentUserName} |
109 | | - openshiftHost={openshiftHost} |
110 | | - enableLaunch={!window.OPENSHIFT_CONFIG.mockData} |
111 | | - showUnready={middlewareServices.customServices.showUnreadyServices || DISPLAY_SERVICES} |
112 | | - customApps={middlewareServices.customServices.services} |
113 | | - handleLaunch={svcName => launchFn(svcName)} |
114 | | - /> |
115 | | - </GridItem> |
116 | | - </Grid> |
117 | | - </div> |
118 | | - </PageSection> |
119 | | - </Tab> |
| 101 | + <Tab |
| 102 | + id="servicesTab" |
| 103 | + eventKey={0} |
| 104 | + title="All services" |
| 105 | + tabContentId="servicesTabSection" |
| 106 | + tabContentRef={this.contentRef1} |
| 107 | + /> |
120 | 108 | <Tab |
121 | 109 | id="solutionPatternsTab" |
122 | 110 | eventKey={1} |
123 | 111 | title="All Solution Patterns" |
124 | 112 | tabContentId="solutionPatternsTabSection" |
125 | | - > |
126 | | - <PageSection className="pf-u-py-0 pf-u-pl-lg pf-u-pr-0"> |
127 | | - <Grid gutter="md"> |
128 | | - <GridItem sm={12} md={12}> |
129 | | - <TutorialDashboard userProgress={user.userProgress} walkthroughs={walkthroughServices.data} /> |
130 | | - </GridItem> |
131 | | - </Grid> |
132 | | - </PageSection> |
133 | | - </Tab> |
| 113 | + tabContentRef={this.contentRef2} |
| 114 | + /> |
134 | 115 | </Tabs> |
135 | | - </Page> |
136 | | - </React.Fragment> |
| 116 | + </PageSection> |
| 117 | + <PageSection className="pf-u-py-0 pf-u-pl-lg pf-u-pr-lg"> |
| 118 | + <React.Fragment> |
| 119 | + <TabContent |
| 120 | + className="integr8ly__tab-content" |
| 121 | + eventKey={0} |
| 122 | + id="refTab1Section" |
| 123 | + ref={this.contentRef1} |
| 124 | + aria-label="Tab item 1" |
| 125 | + > |
| 126 | + <Grid> |
| 127 | + <GridItem sm={12} md={12}> |
| 128 | + <InstalledAppsView |
| 129 | + apps={Object.values(middlewareServices.data)} |
| 130 | + username={this.state.currentUserName} |
| 131 | + openshiftHost={openshiftHost} |
| 132 | + enableLaunch={!window.OPENSHIFT_CONFIG.mockData} |
| 133 | + showUnready={middlewareServices.customServices.showUnreadyServices || DISPLAY_SERVICES} |
| 134 | + customApps={middlewareServices.customServices.services} |
| 135 | + handleLaunch={svcName => launchFn(svcName)} |
| 136 | + /> |
| 137 | + </GridItem> |
| 138 | + </Grid> |
| 139 | + </TabContent> |
| 140 | + |
| 141 | + <TabContent |
| 142 | + className="integr8ly__tab-content" |
| 143 | + eventKey={1} |
| 144 | + id="refTab2Section" |
| 145 | + ref={this.contentRef2} |
| 146 | + aria-label="Tab item 2" |
| 147 | + hidden |
| 148 | + > |
| 149 | + <Grid hasGutter> |
| 150 | + <GridItem sm={12} md={12}> |
| 151 | + <TutorialDashboard userProgress={user.userProgress} walkthroughs={walkthroughServices.data} /> |
| 152 | + </GridItem> |
| 153 | + </Grid> |
| 154 | + </TabContent> |
| 155 | + </React.Fragment> |
| 156 | + </PageSection> |
| 157 | + </Page> |
137 | 158 | ); |
138 | 159 | } |
139 | 160 | } |
|
0 commit comments