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

reworks -- part 1

Signed-off-by: Roman <ixrock@gmail.com>
This commit is contained in:
Roman 2020-08-25 16:00:09 +03:00
parent 843a687186
commit a5e5a4c0c2
9 changed files with 229 additions and 119 deletions

View File

@ -37,6 +37,10 @@ msgstr "(empty) (Allowing the specific traffic to all pods in this namespace)"
#~ msgid "(new)"
#~ msgstr "(new)"
#: src/renderer/components/+add-cluster/add-cluster.tsx:213
#~ msgid "* Choose how to import clusters: from selected kube-config file or by manually pasting kube-config's content as a text"
#~ msgstr "* Choose how to import clusters: from selected kube-config file or by manually pasting kube-config's content as a text"
#: src/renderer/components/item-object-list/item-list-layout.tsx:224
msgid "<0>Filtered</0>: {itemsCount} / {allItemsCount}"
msgstr "<0>Filtered</0>: {itemsCount} / {allItemsCount}"
@ -83,7 +87,7 @@ msgstr "Account Name"
msgid "Active"
msgstr "Active"
#: src/renderer/components/+add-cluster/add-cluster.tsx:196
#: src/renderer/components/+add-cluster/add-cluster.tsx:225
#: src/renderer/components/cluster-manager/clusters-menu.tsx:116
msgid "Add Cluster"
msgstr "Add Cluster"
@ -108,7 +112,7 @@ msgstr "Add bindings to {name}"
#~ msgid "Add cluster"
#~ msgstr "Add cluster"
#: src/renderer/components/+add-cluster/add-cluster.tsx:223
#: src/renderer/components/+add-cluster/add-cluster.tsx:243
msgid "Add cluster(s)"
msgstr "Add cluster(s)"
@ -315,6 +319,10 @@ msgstr "Binding targets"
msgid "Bindings"
msgstr "Bindings"
#: src/renderer/components/+add-cluster/add-cluster.tsx:218
msgid "Browse"
msgstr "Browse"
#: src/renderer/components/error-boundary/error-boundary.tsx:37
#~ msgid "Build version"
#~ msgstr "Build version"
@ -440,6 +448,18 @@ msgstr "Charts"
#~ msgid "Checking update"
#~ msgstr "Checking update"
#: src/renderer/components/+add-cluster/add-cluster.tsx:218
#~ msgid "Choose how to import clusters: from selected kube-config file or by manually pasting kube-config's content as a text"
#~ msgstr "Choose how to import clusters: from selected kube-config file or by manually pasting kube-config's content as a text"
#: src/renderer/components/+add-cluster/add-cluster.tsx:218
#~ msgid "Choose how to import clusters: from selected kube-config file or from manually pasted configuration contents"
#~ msgstr "Choose how to import clusters: from selected kube-config file or from manually pasted configuration contents"
#: src/renderer/components/+add-cluster/add-cluster.tsx:218
#~ msgid "Choose how to import clusters: from selected kube-config file or from pasted yaml configuration"
#~ msgstr "Choose how to import clusters: from selected kube-config file or from pasted yaml configuration"
#: src/renderer/components/+storage-volumes/volume-details.tsx:68
#: src/renderer/components/+storage-volumes/volumes.tsx:43
msgid "Claim"
@ -710,9 +730,9 @@ msgstr "Currently applied filters:"
msgid "Custom Resources"
msgstr "Custom Resources"
#: src/renderer/components/+add-cluster/add-cluster.tsx:141
msgid "Custom.."
msgstr "Custom.."
#: src/renderer/components/+add-cluster/add-cluster.tsx:155
#~ msgid "Custom.."
#~ msgstr "Custom.."
#: src/renderer/components/+custom-resources/certmanager.k8s.io/certificate-details.tsx:95
msgid "DNS Provider"
@ -1710,6 +1730,10 @@ msgstr "Parallelism"
msgid "Parameters"
msgstr "Parameters"
#: src/renderer/components/+add-cluster/add-cluster.tsx:205
msgid "Paste as text"
msgstr "Paste as text"
#: src/renderer/components/+custom-resources/certmanager.k8s.io/issuer-details.tsx:94
#: src/renderer/components/+custom-resources/certmanager.k8s.io/issuer-details.tsx:102
#: src/renderer/components/+network-ingresses/ingress-details.tsx:42
@ -1730,7 +1754,7 @@ msgstr "Persistent Volume Claims"
msgid "Persistent Volumes"
msgstr "Persistent Volumes"
#: src/renderer/components/+add-cluster/add-cluster.tsx:78
#: src/renderer/components/+add-cluster/add-cluster.tsx:92
msgid "Please select kube-config's context"
msgstr "Please select kube-config's context"
@ -1836,7 +1860,7 @@ msgstr "Provisioner"
msgid "Proxy is used only for non-cluster communication."
msgstr "Proxy is used only for non-cluster communication."
#: src/renderer/components/+add-cluster/add-cluster.tsx:207
#: src/renderer/components/+add-cluster/add-cluster.tsx:231
msgid "Proxy settings"
msgstr "Proxy settings"
@ -2017,6 +2041,7 @@ msgstr "Required Drop Capabilities"
msgid "Required field"
msgstr "Required field"
#: src/renderer/components/+add-cluster/add-cluster.tsx:217
#: src/renderer/components/item-object-list/page-filters-list.tsx:31
msgid "Reset"
msgstr "Reset"
@ -2220,7 +2245,7 @@ msgstr "Secret type"
msgid "Secrets"
msgstr "Secrets"
#: src/renderer/components/+add-cluster/add-cluster.tsx:204
#: src/renderer/components/+add-cluster/add-cluster.tsx:228
msgid "Select a context"
msgstr "Select a context"
@ -2232,15 +2257,23 @@ msgstr "Select a quota.."
#~ msgid "Select context"
#~ msgstr "Select context"
#: src/renderer/components/+add-cluster/add-cluster.tsx:52
#: src/renderer/components/+add-cluster/add-cluster.tsx:52
#: src/renderer/components/+add-cluster/add-cluster.tsx:62
#: src/renderer/components/+add-cluster/add-cluster.tsx:62
msgid "Select custom kube-config file"
msgstr "Select custom kube-config file"
#: src/renderer/components/+add-cluster/add-cluster.tsx:212
#~ msgid "Select file"
#~ msgstr "Select file"
#: src/renderer/components/+add-cluster/add-cluster.tsx:173
#~ msgid "Select kubeconfig"
#~ msgstr "Select kubeconfig"
#: src/renderer/components/+add-cluster/add-cluster.tsx:204
msgid "Select or drop file"
msgstr "Select or drop file"
#: src/renderer/components/+preferences/preferences.tsx:88
#~ msgid "Select repository"
#~ msgstr "Select repository"
@ -2579,8 +2612,8 @@ msgstr "Upgrade version"
msgid "Usage"
msgstr "Usage"
#: src/renderer/components/+add-cluster/add-cluster.tsx:53
#: src/renderer/components/+add-cluster/add-cluster.tsx:53
#: src/renderer/components/+add-cluster/add-cluster.tsx:63
#: src/renderer/components/+add-cluster/add-cluster.tsx:63
msgid "Use configuration"
msgstr "Use configuration"

View File

@ -37,6 +37,10 @@ msgstr ""
#~ msgid "(new)"
#~ msgstr ""
#: src/renderer/components/+add-cluster/add-cluster.tsx:213
#~ msgid "* Choose how to import clusters: from selected kube-config file or by manually pasting kube-config's content as a text"
#~ msgstr ""
#: src/renderer/components/item-object-list/item-list-layout.tsx:224
msgid "<0>Filtered</0>: {itemsCount} / {allItemsCount}"
msgstr ""
@ -83,7 +87,7 @@ msgstr ""
msgid "Active"
msgstr ""
#: src/renderer/components/+add-cluster/add-cluster.tsx:196
#: src/renderer/components/+add-cluster/add-cluster.tsx:225
#: src/renderer/components/cluster-manager/clusters-menu.tsx:116
msgid "Add Cluster"
msgstr ""
@ -108,7 +112,7 @@ msgstr ""
#~ msgid "Add cluster"
#~ msgstr ""
#: src/renderer/components/+add-cluster/add-cluster.tsx:223
#: src/renderer/components/+add-cluster/add-cluster.tsx:243
msgid "Add cluster(s)"
msgstr ""
@ -315,6 +319,10 @@ msgstr ""
msgid "Bindings"
msgstr ""
#: src/renderer/components/+add-cluster/add-cluster.tsx:218
msgid "Browse"
msgstr ""
#: src/renderer/components/error-boundary/error-boundary.tsx:37
#~ msgid "Build version"
#~ msgstr ""
@ -436,6 +444,18 @@ msgstr ""
msgid "Charts"
msgstr ""
#: src/renderer/components/+add-cluster/add-cluster.tsx:218
#~ msgid "Choose how to import clusters: from selected kube-config file or by manually pasting kube-config's content as a text"
#~ msgstr ""
#: src/renderer/components/+add-cluster/add-cluster.tsx:218
#~ msgid "Choose how to import clusters: from selected kube-config file or from manually pasted configuration contents"
#~ msgstr ""
#: src/renderer/components/+add-cluster/add-cluster.tsx:218
#~ msgid "Choose how to import clusters: from selected kube-config file or from pasted yaml configuration"
#~ msgstr ""
#: src/renderer/components/+storage-volumes/volume-details.tsx:68
#: src/renderer/components/+storage-volumes/volumes.tsx:43
msgid "Claim"
@ -706,9 +726,9 @@ msgstr ""
msgid "Custom Resources"
msgstr ""
#: src/renderer/components/+add-cluster/add-cluster.tsx:141
msgid "Custom.."
msgstr ""
#: src/renderer/components/+add-cluster/add-cluster.tsx:155
#~ msgid "Custom.."
#~ msgstr ""
#: src/renderer/components/+custom-resources/certmanager.k8s.io/certificate-details.tsx:95
msgid "DNS Provider"
@ -1693,6 +1713,10 @@ msgstr ""
msgid "Parameters"
msgstr ""
#: src/renderer/components/+add-cluster/add-cluster.tsx:205
msgid "Paste as text"
msgstr ""
#: src/renderer/components/+custom-resources/certmanager.k8s.io/issuer-details.tsx:94
#: src/renderer/components/+custom-resources/certmanager.k8s.io/issuer-details.tsx:102
#: src/renderer/components/+network-ingresses/ingress-details.tsx:42
@ -1713,7 +1737,7 @@ msgstr ""
msgid "Persistent Volumes"
msgstr ""
#: src/renderer/components/+add-cluster/add-cluster.tsx:78
#: src/renderer/components/+add-cluster/add-cluster.tsx:92
msgid "Please select kube-config's context"
msgstr ""
@ -1819,7 +1843,7 @@ msgstr ""
msgid "Proxy is used only for non-cluster communication."
msgstr ""
#: src/renderer/components/+add-cluster/add-cluster.tsx:207
#: src/renderer/components/+add-cluster/add-cluster.tsx:231
msgid "Proxy settings"
msgstr ""
@ -2000,6 +2024,7 @@ msgstr ""
msgid "Required field"
msgstr ""
#: src/renderer/components/+add-cluster/add-cluster.tsx:217
#: src/renderer/components/item-object-list/page-filters-list.tsx:31
msgid "Reset"
msgstr ""
@ -2203,7 +2228,7 @@ msgstr ""
msgid "Secrets"
msgstr ""
#: src/renderer/components/+add-cluster/add-cluster.tsx:204
#: src/renderer/components/+add-cluster/add-cluster.tsx:228
msgid "Select a context"
msgstr ""
@ -2215,15 +2240,23 @@ msgstr ""
#~ msgid "Select context"
#~ msgstr ""
#: src/renderer/components/+add-cluster/add-cluster.tsx:52
#: src/renderer/components/+add-cluster/add-cluster.tsx:52
#: src/renderer/components/+add-cluster/add-cluster.tsx:62
#: src/renderer/components/+add-cluster/add-cluster.tsx:62
msgid "Select custom kube-config file"
msgstr ""
#: src/renderer/components/+add-cluster/add-cluster.tsx:212
#~ msgid "Select file"
#~ msgstr ""
#: src/renderer/components/+add-cluster/add-cluster.tsx:173
#~ msgid "Select kubeconfig"
#~ msgstr ""
#: src/renderer/components/+add-cluster/add-cluster.tsx:204
msgid "Select or drop file"
msgstr ""
#: src/renderer/components/+preferences/preferences.tsx:88
#~ msgid "Select repository"
#~ msgstr ""
@ -2562,8 +2595,8 @@ msgstr ""
msgid "Usage"
msgstr ""
#: src/renderer/components/+add-cluster/add-cluster.tsx:53
#: src/renderer/components/+add-cluster/add-cluster.tsx:53
#: src/renderer/components/+add-cluster/add-cluster.tsx:63
#: src/renderer/components/+add-cluster/add-cluster.tsx:63
msgid "Use configuration"
msgstr ""

View File

@ -38,6 +38,10 @@ msgstr "(Пусто) (Допускается трафик ко всем пода
#~ msgid "(new)"
#~ msgstr ""
#: src/renderer/components/+add-cluster/add-cluster.tsx:213
#~ msgid "* Choose how to import clusters: from selected kube-config file or by manually pasting kube-config's content as a text"
#~ msgstr ""
#: src/renderer/components/item-object-list/item-list-layout.tsx:224
msgid "<0>Filtered</0>: {itemsCount} / {allItemsCount}"
msgstr "<0>Отфильтровано</0>: {itemsCount} / {allItemsCount}"
@ -84,7 +88,7 @@ msgstr "Название аккаунта"
msgid "Active"
msgstr "Активный"
#: src/renderer/components/+add-cluster/add-cluster.tsx:196
#: src/renderer/components/+add-cluster/add-cluster.tsx:225
#: src/renderer/components/cluster-manager/clusters-menu.tsx:116
msgid "Add Cluster"
msgstr ""
@ -109,7 +113,7 @@ msgstr "Добавить привязки к {name}"
#~ msgid "Add cluster"
#~ msgstr ""
#: src/renderer/components/+add-cluster/add-cluster.tsx:223
#: src/renderer/components/+add-cluster/add-cluster.tsx:243
msgid "Add cluster(s)"
msgstr ""
@ -316,6 +320,10 @@ msgstr "Цели привязки"
msgid "Bindings"
msgstr "Привязки"
#: src/renderer/components/+add-cluster/add-cluster.tsx:218
msgid "Browse"
msgstr ""
#: src/renderer/components/error-boundary/error-boundary.tsx:37
#~ msgid "Build version"
#~ msgstr "Версия билда"
@ -441,6 +449,18 @@ msgstr "Чарты"
#~ msgid "Checking update"
#~ msgstr "Проверка обновлений"
#: src/renderer/components/+add-cluster/add-cluster.tsx:218
#~ msgid "Choose how to import clusters: from selected kube-config file or by manually pasting kube-config's content as a text"
#~ msgstr ""
#: src/renderer/components/+add-cluster/add-cluster.tsx:218
#~ msgid "Choose how to import clusters: from selected kube-config file or from manually pasted configuration contents"
#~ msgstr ""
#: src/renderer/components/+add-cluster/add-cluster.tsx:218
#~ msgid "Choose how to import clusters: from selected kube-config file or from pasted yaml configuration"
#~ msgstr ""
#: src/renderer/components/+storage-volumes/volume-details.tsx:68
#: src/renderer/components/+storage-volumes/volumes.tsx:43
msgid "Claim"
@ -711,9 +731,9 @@ msgstr "Текущие фильтры:"
msgid "Custom Resources"
msgstr ""
#: src/renderer/components/+add-cluster/add-cluster.tsx:141
msgid "Custom.."
msgstr ""
#: src/renderer/components/+add-cluster/add-cluster.tsx:155
#~ msgid "Custom.."
#~ msgstr ""
#: src/renderer/components/+custom-resources/certmanager.k8s.io/certificate-details.tsx:95
msgid "DNS Provider"
@ -1711,6 +1731,10 @@ msgstr "Параллелизм"
msgid "Parameters"
msgstr "Параметры"
#: src/renderer/components/+add-cluster/add-cluster.tsx:205
msgid "Paste as text"
msgstr ""
#: src/renderer/components/+custom-resources/certmanager.k8s.io/issuer-details.tsx:94
#: src/renderer/components/+custom-resources/certmanager.k8s.io/issuer-details.tsx:102
#: src/renderer/components/+network-ingresses/ingress-details.tsx:42
@ -1731,7 +1755,7 @@ msgstr "Persistent Volume Claims"
msgid "Persistent Volumes"
msgstr "Persistent Volumes"
#: src/renderer/components/+add-cluster/add-cluster.tsx:78
#: src/renderer/components/+add-cluster/add-cluster.tsx:92
msgid "Please select kube-config's context"
msgstr ""
@ -1837,7 +1861,7 @@ msgstr "Комиссия"
msgid "Proxy is used only for non-cluster communication."
msgstr ""
#: src/renderer/components/+add-cluster/add-cluster.tsx:207
#: src/renderer/components/+add-cluster/add-cluster.tsx:231
msgid "Proxy settings"
msgstr ""
@ -2018,6 +2042,7 @@ msgstr ""
msgid "Required field"
msgstr "Обязательное поле"
#: src/renderer/components/+add-cluster/add-cluster.tsx:217
#: src/renderer/components/item-object-list/page-filters-list.tsx:31
msgid "Reset"
msgstr "Сбросить"
@ -2221,7 +2246,7 @@ msgstr "Тип секрета"
msgid "Secrets"
msgstr "Secrets"
#: src/renderer/components/+add-cluster/add-cluster.tsx:204
#: src/renderer/components/+add-cluster/add-cluster.tsx:228
msgid "Select a context"
msgstr ""
@ -2233,15 +2258,23 @@ msgstr "Выберите квоту..."
#~ msgid "Select context"
#~ msgstr ""
#: src/renderer/components/+add-cluster/add-cluster.tsx:52
#: src/renderer/components/+add-cluster/add-cluster.tsx:52
#: src/renderer/components/+add-cluster/add-cluster.tsx:62
#: src/renderer/components/+add-cluster/add-cluster.tsx:62
msgid "Select custom kube-config file"
msgstr ""
#: src/renderer/components/+add-cluster/add-cluster.tsx:212
#~ msgid "Select file"
#~ msgstr ""
#: src/renderer/components/+add-cluster/add-cluster.tsx:173
#~ msgid "Select kubeconfig"
#~ msgstr ""
#: src/renderer/components/+add-cluster/add-cluster.tsx:204
msgid "Select or drop file"
msgstr ""
#: src/renderer/components/+preferences/preferences.tsx:88
#~ msgid "Select repository"
#~ msgstr ""
@ -2580,8 +2613,8 @@ msgstr "Обновить версию"
msgid "Usage"
msgstr "Использование"
#: src/renderer/components/+add-cluster/add-cluster.tsx:53
#: src/renderer/components/+add-cluster/add-cluster.tsx:53
#: src/renderer/components/+add-cluster/add-cluster.tsx:63
#: src/renderer/components/+add-cluster/add-cluster.tsx:63
msgid "Use configuration"
msgstr ""

View File

@ -10,31 +10,18 @@
}
.kube-config-select {
border: 1px solid $borderFaintColor;
padding: $padding / 2 $padding;
border-radius: $radius;
transition: border 200ms ease-in-out;
&.droppable {
box-shadow: 0 0 3px 2px $primary;
&.droppable,
&:hover {
border-color: $primary;
cursor: pointer;
}
> * {
pointer-events: none;
}
> .title {
white-space: nowrap;
}
code {
word-break: break-all;
> * {
pointer-events: none;
}
}
}
code {
color: $pink-400;
.info-col {
code {
color: $pink-400;
}
}
}

View File

@ -21,14 +21,24 @@ import { userStore } from "../../../common/user-store";
import { clusterViewURL } from "../cluster-manager/cluster-view.route";
import { cssNames } from "../../utils";
import { Notifications } from "../notifications";
import { Tab, Tabs } from "../tabs";
// todo: improve UI/UX kube-config consuming: FILE (input + button) | PASTE TEXT (editor)
// todo: allow to manually input kube-config file path
// todo: allow to create multiple clusters at once (multi-select)
enum KubeConfigSourceTab {
FILE = "file",
TEXT = "text"
}
@observer
export class AddCluster extends React.Component {
readonly custom: any = "custom"
@observable.ref localKubeConfig: KubeConfig;
@observable.ref newClusterConfig: KubeConfig;
@observable.ref error: React.ReactNode;
@observable sourceTab = KubeConfigSourceTab.FILE;
@observable isWaiting = false
@observable showSettings = false
@observable dropAreaActive = false;
@ -74,8 +84,8 @@ export class AddCluster extends React.Component {
}
}
@computed get isCustom() {
return this.newClusterConfig === this.custom;
resetKubeConfig = () => {
this.kubeConfigPath = kubeConfigDefaultPath;
}
@computed get clusterOptions() {
@ -92,10 +102,6 @@ export class AddCluster extends React.Component {
}
})
}
options.push({
label: <Trans>Custom..</Trans>,
value: this.custom,
});
return options;
}
@ -113,13 +119,14 @@ export class AddCluster extends React.Component {
return label;
};
// fixme: support adding multiple clusters
addCluster = async () => {
const { newClusterConfig, customConfig, proxyServer } = this;
const clusterId = uuid();
this.isWaiting = true
this.error = ""
try {
const config = this.isCustom ? loadConfig(customConfig) : newClusterConfig;
const config = this.sourceTab == KubeConfigSourceTab.TEXT ? loadConfig(customConfig) : newClusterConfig;
if (!config) {
this.error = <Trans>Please select kube-config's context</Trans>
return;
@ -194,16 +201,25 @@ export class AddCluster extends React.Component {
)
}
render() {
renderKubeConfigSource() {
return (
<WizardLayout className="AddCluster" infoPanel={this.renderInfo()}>
<h2><Trans>Add Cluster</Trans></h2>
<div className="flex gaps align-center">
<label
className={cssNames("kube-config-select flex gaps align-center box grow", {
<>
<Tabs withBorder onChange={v => this.sourceTab = v}>
<Tab
value={KubeConfigSourceTab.FILE}
label={<Trans>Select or drop file</Trans>}
active={this.sourceTab == KubeConfigSourceTab.FILE}/>
<Tab
value={KubeConfigSourceTab.TEXT}
label={<Trans>Paste as text</Trans>}
active={this.sourceTab == KubeConfigSourceTab.TEXT}
/>
</Tabs>
{this.sourceTab === KubeConfigSourceTab.FILE && (
<div
className={cssNames("kube-config-select flex gaps align-center", {
droppable: this.dropAreaActive
})}
onClick={this.selectKubeConfig}
onDragEnter={event => this.dropAreaActive = true}
onDragLeave={event => this.dropAreaActive = false}
onDragOver={event => {
@ -215,24 +231,44 @@ export class AddCluster extends React.Component {
this.kubeConfigPath = event.dataTransfer.files[0].path;
}}
>
<span className="title">Kubeconfig file</span>
<code>{this.kubeConfigPath}</code>
</label>
{this.kubeConfigPath !== kubeConfigDefaultPath && (
<Icon
material="settings_backup_restore"
onClick={() => this.kubeConfigPath = kubeConfigDefaultPath}
tooltip="Reset to defaults"
<Input
autoSelectOnFocus
theme="round-black"
className="kube-config-path box grow"
value={this.kubeConfigPath}
onChange={value => console.log('change', value)}
/>
)}
</div>
{this.kubeConfigPath !== kubeConfigDefaultPath && (
<Button accent label={<Trans>Reset</Trans>} onClick={this.resetKubeConfig}/>
)}
<Button primary label={<Trans>Browse</Trans>} onClick={this.selectKubeConfig}/>
</div>
)}
{this.sourceTab === KubeConfigSourceTab.TEXT && (
<AceEditor
autoFocus
showGutter={false}
mode="yaml"
value={this.customConfig}
onChange={value => this.customConfig = value}
/>
)}
</>
)
}
render() {
return (
<WizardLayout className="AddCluster" infoPanel={this.renderInfo()}>
<h2><Trans>Add Cluster</Trans></h2>
{this.renderKubeConfigSource()}
<Select
id="kubecontext-select" // todo: provide better mapping for integration tests (e.g. data-test-id="..")
placeholder={<Trans>Select a context</Trans>}
value={this.newClusterConfig}
options={this.clusterOptions}
onChange={({ value }: SelectOption) => this.newClusterConfig = value}
formatOptionLabel={this.formatClusterContextLabel}
id="kubecontext-select"
/>
<div className="cluster-settings">
<a href="#" onClick={() => this.showSettings = !this.showSettings}>
@ -253,18 +289,6 @@ export class AddCluster extends React.Component {
</small>
</div>
)}
{this.isCustom && (
<div className="custom-kubeconfig flex column gaps box grow">
<p>Kubeconfig:</p>
<AceEditor
autoFocus
showGutter={false}
mode="yaml"
value={this.customConfig}
onChange={value => this.customConfig = value}
/>
</div>
)}
{this.error && (
<div className="error">{this.error}</div>
)}

View File

@ -17,6 +17,7 @@ export type InputProps<T = string> = Omit<InputElementProps, "onChange" | "onSub
theme?: "round-black";
className?: string;
value?: T;
autoSelectOnFocus?: boolean
multiLine?: boolean; // use text-area as input field
maxRows?: number; // when multiLine={true} define max rows size
dirty?: boolean; // show validation errors even if the field wasn't touched yet
@ -112,8 +113,7 @@ export class Input extends React.Component<InputProps, State> {
const result = validator.validate(value, this.props);
if (isBoolean(result) && !result) {
errors.push(this.getValidatorError(value, validator));
}
else if (result instanceof Promise) {
} else if (result instanceof Promise) {
if (!validationId) {
this.validationId = validationId = uniqueId("validation_id_");
}
@ -176,8 +176,9 @@ export class Input extends React.Component<InputProps, State> {
@autobind()
onFocus(evt: React.FocusEvent<InputElement>) {
const { onFocus } = this.props;
const { onFocus, autoSelectOnFocus } = this.props;
if (onFocus) onFocus(evt);
if (autoSelectOnFocus) this.select();
this.setState({ focused: true });
}
@ -255,13 +256,14 @@ export class Input extends React.Component<InputProps, State> {
}
render() {
/* eslint-disable */
let { multiLine, showValidationLine, validators, theme, maxRows, children, iconLeft, iconRight, ...inputProps } = this.props;
let { className, maxLength, rows, disabled, } = this.props;
/* eslint-enable */
const {
multiLine, showValidationLine, validators, theme, maxRows, children,
maxLength, rows, disabled, autoSelectOnFocus,
...inputProps
} = this.props;
const { focused, dirty, valid, validating, errors } = this.state;
className = cssNames("Input", className, {
const className = cssNames("Input", this.props.className, {
[`theme ${theme}`]: theme,
focused: focused,
disabled: disabled,
@ -272,6 +274,7 @@ export class Input extends React.Component<InputProps, State> {
});
// normalize icons
let { iconLeft, iconRight } = this.props;
if (isString(iconLeft)) iconLeft = <Icon material={iconLeft}/>
if (isString(iconRight)) iconRight = <Icon material={iconRight}/>

View File

@ -11,10 +11,6 @@
> .Tabs {
grid-area: tabs;
background: $layoutTabsBackground;
.Tab {
--color-active: #{$layoutTabsActiveColor};
}
}
header {

View File

@ -4,6 +4,10 @@
-webkit-user-select: none; /* safari */
-moz-user-select: none; /* firefox */
&.withBorder {
border-bottom: 1px solid $borderFaintColor;
}
&.wrap {
flex-wrap: wrap;
}
@ -24,7 +28,7 @@
}
.Tab {
--color-active: inherit;
--color-active: #{$layoutTabsActiveColor};
--line-color-active: #{$primary};
--line-color-focus: currentColor;

View File

@ -7,6 +7,7 @@ const TabsContext = React.createContext<TabsContextValue>({});
interface TabsContextValue<D = any> {
autoFocus?: boolean;
withBorder?: boolean;
value?: D;
onChange?(value: D): void;
}
@ -29,16 +30,12 @@ export class Tabs extends React.PureComponent<TabsProps> {
}
render() {
const {
center, wrap, onChange, value, autoFocus,
scrollable = true,
...elemProps
} = this.props;
let { className } = this.props;
className = cssNames("Tabs", className, {
"center": center,
"wrap": wrap,
"scrollable": scrollable,
const { center, wrap, onChange, value, autoFocus, scrollable = true, withBorder, ...elemProps } = this.props;
const className = cssNames("Tabs", this.props.className, {
center: center,
wrap: wrap,
scrollable: scrollable,
withBorder: withBorder,
});
return (
<TabsContext.Provider value={{ autoFocus, value, onChange }}>