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/ace-editor/ace-editor.scss

@@ -7,7 +7,6 @@
 
   .theme-light & {
     border: 1px solid gainsboro;
-    border-radius: $radius;
 
     .ace_scrollbar {
       @include custom-scrollbar(dark);
@@ -19,7 +18,6 @@
     width: inherit;
     height: inherit;
     font-size: 90%;
-    border-radius: $radius;
   }
 
   // --Theme customization

src/renderer/components/button/button.scss

@@ -41,6 +41,17 @@
     }
   }
 
+  &.outlined {
+    color: inherit;
+    background: transparent;
+
+    &.active,
+    &:focus {
+      color: inherit;
+      box-shadow: 0 0 0 1px inset;
+    }
+  }
+
   &.big {
     font-size: 2.2 * $unit;
     border-radius: 50px;

src/renderer/components/button/button.tsx

@@ -9,6 +9,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<any>, TooltipDecorator
   primary?: boolean;
   accent?: boolean;
   plain?: boolean;
+  outlined?: boolean;
   hidden?: boolean;
   active?: boolean;
   big?: boolean;
@@ -23,12 +24,12 @@ export class Button extends React.PureComponent<ButtonProps, {}> {
   private button: HTMLButtonElement;
 
   render() {
-    const { className, waiting, label, primary, accent, plain, hidden, active, big, round, tooltip, children, ...props } = this.props;
+    const { className, waiting, label, primary, accent, plain, hidden, active, big, round, outlined, tooltip, children, ...props } = this.props;
     const btnProps = props as Partial<ButtonProps>;
     if (hidden) return null;
 
     btnProps.className = cssNames('Button', className, {
-      waiting, primary, accent, plain, active, big, round,
+      waiting, primary, accent, plain, active, big, round, outlined
     });
 
     const btnContent: ReactNode = (

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;
-
+    flex: 1 1;
-    &:empty {
-      display: none;
-    }
 
     &: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()
+      const result = await this.props.submit();
-      if (showNotifications) Notifications.ok(this.result);
+      if (showNotifications) Notifications.ok(result);
     } catch (error) {
-      this.error = error.toString();
+      if (showNotifications) Notifications.error(error.toString());
-      if (showNotifications) Notifications.error(this.error);
     } finally {
       this.waiting = false
     }
@@ -81,27 +75,15 @@ export class InfoPanel extends Component<Props> {
     dockStore.closeTab(this.props.tabId);
   }
 
-  renderInfo() {
+  renderErrorIcon() {
-    if (!this.props.showInlineInfo) {
+    if (!this.props.showInlineInfo || !this.errorInfo) {
       return;
     }
-    const { result, errorInfo } = this;
     return (
-      <>
+      <div className="error">
-        {result && (
+        <Icon material="error_outline" tooltip={this.errorInfo}/>
-          <div className="success flex align-center">
+      </div>
-            <Icon material="done" />
+    );
-            <span>{result}</span>
-          </div>
-        )}
-        {errorInfo && (
-          <div className="error flex align-center">
-            <Icon material="error_outline" />
-            <span>{errorInfo}</span>
-          </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>
     )
   }

src/renderer/components/tooltip/withTooltip.tsx

@@ -28,6 +28,7 @@ export function withTooltip<T extends React.ComponentType<any>>(Target: T): T {
         const tooltipProps: TooltipProps = {
           targetId: tooltipId,
           tooltipOnParentHover: tooltipOverrideDisabled,
+          formatters: { narrow: true },
           ...(isReactNode(tooltip) ? { children: tooltip } : tooltip),
         };
         targetProps.id = tooltipId;

src/renderer/themes/kontena-dark.json

@@ -58,8 +58,8 @@
     "colorVague": "#36393e",
     "colorTerminated": "#4c5053",
     "dockHeadBackground": "#2e3136",
-    "dockInfoBackground": "#111111",
+    "dockInfoBackground": "#1e2125",
-    "dockInfoBorderColor": "#4c5053",
+    "dockInfoBorderColor": "#303136",
     "terminalBackground": "#000000",
     "terminalForeground": "#ffffff",
     "terminalCursor": "#ffffff",