1
0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00

playing with select dropdown for workspace landing page

Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com>
This commit is contained in:
Jim Ehrismann 2021-01-25 19:19:36 -05:00
parent 12c619aa0c
commit f57c90a25e

View File

@ -28,11 +28,13 @@ export class LandingPage extends React.Component {
workspaceStore.setActive(selectedWorkspace.id); workspaceStore.setActive(selectedWorkspace.id);
} }
const existingWorkspaces = workspaceStore.enabledWorkspacesList.map(w => ({value: w.name, label: w.name}));
return ( return (
<h2 className="flex row center"> <h2 className="flex row center">
<span>Workspace:</span> <span>Workspace:</span>
<Select <Select
options={workspaceStore.enabledWorkspacesList.map(w => ({value: w.name, label: w.name}))} options={[{value: "New Workspace", label: "New Workspace..."}, ...existingWorkspaces]}
value={this.workspace.name} value={this.workspace.name}
onChange={onWorkspaceChange} onChange={onWorkspaceChange}
/> />
@ -45,6 +47,17 @@ export class LandingPage extends React.Component {
const noClustersInScope = !clusters.length; const noClustersInScope = !clusters.length;
const showStartupHint = this.showHint && noClustersInScope; const showStartupHint = this.showHint && noClustersInScope;
const onWorkspaceChange = (option: SelectOption) => {
const selectedWorkspace = workspaceStore.getByName(option.value);
if (!selectedWorkspace) {
return;
}
workspaceStore.setActive(selectedWorkspace.id);
}
const existingWorkspaces = workspaceStore.enabledWorkspacesList.map(w => ({value: w.name, label: w.name}));
return ( return (
<PageLayout provideBackButtonNavigation={false} className="Workspaces" header={this.getHeader()} headerClass={"box center"}> <PageLayout provideBackButtonNavigation={false} className="Workspaces" header={this.getHeader()} headerClass={"box center"}>
<div className="LandingPage flex auto"> <div className="LandingPage flex auto">
@ -56,19 +69,18 @@ export class LandingPage extends React.Component {
</p> </p>
</div> </div>
)} )}
{!noClustersInScope && ( <div className="flex column">
<WorkspaceOverview workspace={this.workspace}/> <div className="flex center">
)} <span>Workspace:</span>
{noClustersInScope && ( <Select
<div className="no-clusters flex column gaps box center"> options={[{value: "New Workspace", label: "New Workspace..."}, ...existingWorkspaces]}
<h1> value={this.workspace.name}
Welcome! onChange={onWorkspaceChange}
</h1> className="box grow"
<p> />
Get started by adding one or more clusters to this workspace.
</p>
</div> </div>
)} <WorkspaceOverview workspace={this.workspace}/>
</div>
</div> </div>
</PageLayout> </PageLayout>
); );