hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

style editable list list of lists, switch to using <>

Browse Source 
Signed-off-by: Sebastian Malton <smalton@mirantis.com>
This commit is contained in:
Sebastian Malton 2020-09-02 10:51:39 -04:00 committed by Sebastian Malton
parent 9d2c8f2eb6
commit f6971073b8
4 changed files with 28 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/main/cluster.ts
View File

@ -80,7 +80,7 @@ export class Cluster implements ClusterModel, ClusterState {
@observable metadata: ClusterMetadata = {}; @observable metadata: ClusterMetadata = {};
@observable allowedNamespaces: string[] = []; @observable allowedNamespaces: string[] = [];
@observable allowedResources: string[] = []; @observable allowedResources: string[] = [];
@observable accessibleNamespaces?: string[]; @observable accessibleNamespaces: string[] = [];
@computed get available() { @computed get available() {
return this.accessible && !this.disconnected; return this.accessible && !this.disconnected;
@ -427,7 +427,7 @@ export class Cluster implements ClusterModel, ClusterState {
} }
protected async getAllowedNamespaces() { protected async getAllowedNamespaces() {
if (this.accessibleNamespaces?.length) { if (this.accessibleNamespaces.length) {
return this.accessibleNamespaces return this.accessibleNamespaces
} }

2
src/renderer/components/+cluster-settings/components/cluster-accessible-namespaces.tsx
View File

@ -17,7 +17,7 @@ export class ClusterAccessibleNamespaces extends React.Component<Props> {
render() { render() {
return ( return (
<> <>
<SubTitle title="Cluster's Accessible Namespaces" /> <SubTitle title="Accessible Namespaces" />
<p>This setting is useful for manually specifying which namespaces you have access to. This is useful when you don't have permissions to list namespaces.</p> <p>This setting is useful for manually specifying which namespaces you have access to. This is useful when you don't have permissions to list namespaces.</p>
<EditableList <EditableList
placeholder={_i18n._("Add new namespace...")} placeholder={_i18n._("Add new namespace...")}

20
src/renderer/components/editable-list/editable-list.scss
View File

@ -1,12 +1,28 @@
.EditableList { .EditableList {
.el-contents { .el-contents {
display: grid; display: flex;
grid-template-columns: 1fr auto; flex-direction: column;
margin-top: $padding * 2;
.el-value-remove { .el-value-remove {
.Icon { .Icon {
justify-content: unset; justify-content: unset;
} }
} }
.el-item {
display: grid;
grid-template-columns: 1fr auto;
padding: $padding $padding * 2;
margin-bottom: 1px;
:last-child {
margin-bottom: unset;
}
:first-child {
align-self: center;
}
}
} }
} }

13
src/renderer/components/editable-list/editable-list.tsx
View File

@ -45,6 +45,7 @@ export class EditableList<T> extends React.Component<Props<T>> {
<div className="EditableList"> <div className="EditableList">
<div className="el-header"> <div className="el-header">
<Input <Input
theme="round-black"
value={this.currentNewItem} value={this.currentNewItem}
onSubmit={this.onSubmit} onSubmit={this.onSubmit}
placeholder={placeholder} placeholder={placeholder}
@ -53,14 +54,14 @@ export class EditableList<T> extends React.Component<Props<T>> {
</div> </div>
<div className="el-contents"> <div className="el-contents">
{ {
items items.map((item, index) => (
.map((item, index) => [ <div key={item + `${index}`} className="el-item Badge">
<div key={`${index}-value`}>{renderItem(item, index)}</div>, <div>{renderItem(item, index)}</div>
<div key={`${index}-remove`} className="el-value-remove"> <div className="el-value-remove">
<Icon material="delete_outline" onClick={() => remove(({ index, oldItem: item }))} /> <Icon material="delete_outline" onClick={() => remove(({ index, oldItem: item }))} />
</div> </div>
]) </div>
.flat() ))
} }
</div> </div>
</div> </div>