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 allowedNamespaces: string[] = [];
@observable allowedResources: string[] = [];
@observable accessibleNamespaces?: string[];
@observable accessibleNamespaces: string[] = [];
@computed get available() {
return this.accessible && !this.disconnected;
@ -427,7 +427,7 @@ export class Cluster implements ClusterModel, ClusterState {
}
protected async getAllowedNamespaces() {
if (this.accessibleNamespaces?.length) {
if (this.accessibleNamespaces.length) {
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() {
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>
<EditableList
placeholder={_i18n._("Add new namespace...")}

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

@ -1,12 +1,28 @@
.EditableList {
.el-contents {
display: grid;
grid-template-columns: 1fr auto;
display: flex;
flex-direction: column;
margin-top: $padding * 2;
.el-value-remove {
.Icon {
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="el-header">
<Input
theme="round-black"
value={this.currentNewItem}
onSubmit={this.onSubmit}
placeholder={placeholder}
@ -53,14 +54,14 @@ export class EditableList<T> extends React.Component<Props<T>> {
</div>
<div className="el-contents">
{
items
.map((item, index) => [
<div key={`${index}-value`}>{renderItem(item, index)}</div>,
<div key={`${index}-remove`} className="el-value-remove">
items.map((item, index) => (
<div key={item + `${index}`} className="el-item Badge">
<div>{renderItem(item, index)}</div>
<div className="el-value-remove">
<Icon material="delete_outline" onClick={() => remove(({ index, oldItem: item }))} />
</div>
])
.flat()
</div>
))
}
</div>
</div>