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