Moving dock info panel to the top (#1007)

* Moving EditorPanel to the top

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Preventing save with empty yaml

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Make tooltips in @withTooltip narrower

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Not showing api errors in icon

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Success notification for create resource operation

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Button outlined style

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Making second button to stay outlined

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fine-tuning dock info panel colors

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Removing border-radius from ace-editor

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/dock/create-resource.tsx

@@ -39,6 +39,7 @@ export class CreateResource extends React.Component<Props> {
 
   create = async () => {
     if (this.error) return;
+    if (!this.data.trim()) return; // do not save when field is empty
     const resources = jsYaml.safeLoadAll(this.data)
       .filter(v => !!v) // skip empty documents if "---" pasted at the beginning or end
     const createdResources: string[] = [];
@@ -54,12 +55,14 @@ export class CreateResource extends React.Component<Props> {
       errors.forEach(Notifications.error);
       if (!createdResources.length) throw errors[0];
     }
-    return (
+    const successMessage = (
       <p>
         <Plural value={createdResources.length} one="Resource" other="Resources"/>{" "}
         <Trans><b>{createdResources.join(", ")}</b> successfully created</Trans>
       </p>
     )
+    Notifications.ok(successMessage)
+    return successMessage
   }
 
   render() {
@@ -67,11 +70,6 @@ export class CreateResource extends React.Component<Props> {
     const { className } = this.props;
     return (
       <div className={cssNames("CreateResource flex column", className)}>
-        <EditorPanel
-          tabId={tabId}
-          value={data}
-          onChange={onChange}
-        />
         <InfoPanel
           tabId={tabId}
           error={error}
@@ -79,6 +77,11 @@ export class CreateResource extends React.Component<Props> {
           submitLabel={_i18n._(t`Create`)}
           showNotifications={false}
         />
+        <EditorPanel
+          tabId={tabId}
+          value={data}
+          onChange={onChange}
+        />
       </div>
     )
   }

src/renderer/components/dock/edit-resource.tsx

@@ -90,11 +90,6 @@ export class EditResource extends React.Component<Props> {
     const { kind, getNs, getName } = resource;
     return (
       <div className={cssNames("EditResource flex column", this.props.className)}>
-        <EditorPanel
-          tabId={tabId}
-          value={draft}
-          onChange={onChange}
-        />
         <InfoPanel
           tabId={tabId}
           error={error}
@@ -109,6 +104,11 @@ export class EditResource extends React.Component<Props> {
             </div>
           )}
         />
+        <EditorPanel
+          tabId={tabId}
+          value={draft}
+          onChange={onChange}
+        />
       </div>
     )
   }

src/renderer/components/dock/info-panel.scss

@@ -2,7 +2,7 @@
   @include hidden-scrollbar;
 
   background: $dockInfoBackground;
-  border-top: 1px solid $dockInfoBorderColor;
+  border-bottom: 1px solid $dockInfoBorderColor;
   padding: $padding $padding * 2;
   flex-shrink: 0;
 
@@ -12,37 +12,12 @@
 
   > .controls {
     white-space: nowrap;
-
-    &:empty {
-      display: none;
-    }
+    flex: 1 1;
 
     &:not(:empty) + .info {
-      border: 1px solid $borderColor;
-      border-top: 0;
-      border-bottom: 0;
       min-height: 25px;
       padding-left: $padding;
       padding-right: $padding;
     }
   }
-
-  > .info {
-    @include hidden-scrollbar;
-
-    min-width: 40px; // min-space for icon
-    flex: 1 1;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-
-    > div {
-      padding-right: $padding;
-      flex-shrink: 0;
-    }
-
-    .Icon {
-      margin: 0;
-      margin-right: $padding;
-    }
-  }
 }

src/renderer/components/dock/info-panel.tsx

@@ -38,35 +38,29 @@ export class InfoPanel extends Component<Props> {
     showNotifications: true,
   }
 
-  @observable.ref result: ReactNode;
   @observable error = "";
   @observable waiting = false;
 
   componentDidMount() {
     disposeOnUnmount(this, [
       reaction(() => this.props.tabId, () => {
-        this.result = ""
-        this.error = ""
         this.waiting = false
       })
     ])
   }
 
   @computed get errorInfo() {
-    return this.error || this.props.error;
+    return this.props.error;
   }
 
   submit = async () => {
     const { showNotifications } = this.props;
-    this.result = "";
-    this.error = "";
     this.waiting = true;
     try {
-      this.result = await this.props.submit()
-      if (showNotifications) Notifications.ok(this.result);
+      const result = await this.props.submit();
+      if (showNotifications) Notifications.ok(result);
     } catch (error) {
-      this.error = error.toString();
-      if (showNotifications) Notifications.error(this.error);
+      if (showNotifications) Notifications.error(error.toString());
     } finally {
       this.waiting = false
     }
@@ -81,27 +75,15 @@ export class InfoPanel extends Component<Props> {
     dockStore.closeTab(this.props.tabId);
   }
 
-  renderInfo() {
-    if (!this.props.showInlineInfo) {
+  renderErrorIcon() {
+    if (!this.props.showInlineInfo || !this.errorInfo) {
       return;
     }
-    const { result, errorInfo } = this;
     return (
-      <>
-        {result && (
-          <div className="success flex align-center">
-            <Icon material="done" />
-            <span>{result}</span>
-          </div>
-        )}
-        {errorInfo && (
-          <div className="error flex align-center">
-            <Icon material="error_outline" />
-            <span>{errorInfo}</span>
-          </div>
-        )}
-      </>
-    )
+      <div className="error">
+        <Icon material="error_outline" tooltip={this.errorInfo}/>
+      </div>
+    );
   }
 
   render() {
@@ -114,11 +96,13 @@ export class InfoPanel extends Component<Props> {
           {controls}
         </div>
         <div className="info flex gaps align-center">
-          {waiting ? <><Spinner /> {submittingMessage}</> : this.renderInfo()}
+          {waiting ? <><Spinner /> {submittingMessage}</> : this.renderErrorIcon()}
         </div>
         <Button plain label={<Trans>Cancel</Trans>} onClick={close} />
         <Button
-          primary active
+          active
+          outlined={showSubmitClose}
+          primary={!showSubmitClose}// one button always should be primary (blue)
           label={submitLabel}
           onClick={submit}
           disabled={isDisabled}

src/renderer/components/dock/install-chart.tsx

@@ -174,11 +174,6 @@ export class InstallChart extends Component<Props> {
 
     return (
       <div className="InstallChart flex column">
-        <EditorPanel
-          tabId={tabId}
-          value={values}
-          onChange={this.onValuesChange}
-        />
         <InfoPanel
           tabId={tabId}
           controls={panelControls}
@@ -188,6 +183,11 @@ export class InstallChart extends Component<Props> {
           submittingMessage={_i18n._(t`Installing...`)}
           showSubmitClose={false}
         />
+        <EditorPanel
+          tabId={tabId}
+          value={values}
+          onChange={this.onValuesChange}
+        />
       </div>
     );
   }

src/renderer/components/dock/upgrade-chart.tsx

@@ -106,18 +106,13 @@ export class UpgradeChart extends React.Component<Props> {
           themeName="outlined"
           value={version}
           options={versions}
-          formatOptionLabel={this.formatVersionLabel}          
+          formatOptionLabel={this.formatVersionLabel}
           onChange={({ value }: SelectOption) => this.version = value}
         />
       </div>
     )
     return (
       <div className={cssNames("UpgradeChart flex column", className)}>
-        <EditorPanel
-          tabId={tabId}
-          value={value}
-          onChange={onChange}
-        />
         <InfoPanel
           tabId={tabId}
           error={error}
@@ -126,6 +121,11 @@ export class UpgradeChart extends React.Component<Props> {
           submittingMessage={_i18n._(t`Updating..`)}
           controls={controlsAndInfo}
         />
+        <EditorPanel
+          tabId={tabId}
+          value={value}
+          onChange={onChange}
+        />
       </div>
     )
   }