Merge remote-tracking branch 'origin/main' into 1.30-releases

Author: Anemy

THIRD-PARTY-NOTICES.md

@@ -1,5 +1,5 @@
 The following third-party software is used by and included in **compass**.
-This document was automatically generated on Wed Dec 22 2021.
+This document was automatically generated on Wed Jan 05 2022.
 
 ## List of dependencies
 

packages/compass-components/src/components/file-input.spec.tsx

@@ -136,4 +136,50 @@ describe('FileInput', function () {
     const link = screen.getByTestId('file-input-link');
     expect(link).to.exist;
   });
+
+  it('adds description if description is specified', function () {
+    render(
+      <FileInput
+        id="file-input"
+        label="Select something"
+        onChange={spy}
+        variant={Variant.Horizontal}
+        description={'Learn more'}
+      />
+    );
+
+    const description = screen.getByTestId('file-input-description');
+    expect(description).to.exist;
+  });
+
+  it('adds link and description if specified', function () {
+    render(
+      <FileInput
+        id="file-input"
+        label="Select something"
+        onChange={spy}
+        variant={Variant.Horizontal}
+        link="http://google.com/"
+        description={'Learn more'}
+      />
+    );
+
+    const linkDescription = screen.getByTestId('file-input-link');
+    expect(linkDescription).to.exist;
+  });
+
+  it('adds error message if specified', function () {
+    render(
+      <FileInput
+        id="file-input"
+        label="Select something"
+        onChange={spy}
+        error={true}
+        errorMessage={'Error'}
+      />
+    );
+
+    const errorMessage = screen.getByTestId('file-input-error');
+    expect(errorMessage).to.exist;
+  });
 });

packages/compass-components/src/components/file-input.tsx

@@ -1,47 +1,51 @@
 import React from 'react';
 import path from 'path';
-import { css, cx } from '@emotion/css';
+import { css, cx } from '@leafygreen-ui/emotion';
+import { uiColors } from '@leafygreen-ui/palette';
+import { spacing } from '@leafygreen-ui/tokens';
 
-import { Button, Icon } from '..';
+import { Button, Icon, Label, Link, Description } from '..';
 
-const formItemHorizontalStyles = css`
-  margin: 15px auto 15px;
-  display: flex;
-  justify-content: flex-end;
-`;
+const { base: redBaseColor } = uiColors.red;
+
+const formItemHorizontalStyles = css({
+  marginTop: spacing[2],
+  marginBottom: spacing[2],
+  marginRight: 'auto',
+  marginLeft: 'auto',
+  display: 'flex',
+  alignItems: 'center',
+});
 
 const formItemVerticalStyles = css`
   margin: 5px auto 20px;
 `;
 
 const formItemErrorStyles = css`
-  border: 1px solid red;
-
+  border: 1px solid ${redBaseColor};
+  border-radius: 5px;
   &:focus {
-    border: 1px solid red;
+    border: 1px solid ${redBaseColor};
   }
 `;
 
 const buttonStyles = css`
   width: 100%;
 `;
 
-const buttonErrorStyles = css`
-  border: 1px solid red;
-`;
-
-const labelHorizontalStyles = css`
-  width: 70%;
-  text-align: right;
-  vertical-align: middle;
-  padding-right: 15px;
-  margin: auto;
-  margin-bottom: 0;
-`;
+const errorMessageStyles = css({
+  color: `${redBaseColor} !important`,
+});
 
-const labelErrorStyles = css`
-  color: red;
-`;
+const labelHorizontalStyles = css({
+  width: '70%',
+  display: 'grid',
+  gridTemplateAreas: `'label icon' 'description .'`,
+  gridTemplateColumns: '1fr auto',
+  alignItems: 'center',
+  columnGap: spacing[1],
+  paddingRight: spacing[3],
+});
 
 const labelIconStyles = css`
   display: inline-block;
@@ -83,21 +87,29 @@ type FileWithPath = File & {
 function FileInput({
   id,
   label,
+  dataTestId,
   onChange,
   multi = false,
   error = false,
+  errorMessage,
   variant = Variant.Horizontal,
   link,
+  description,
   values,
+  labelAlignment = 'left',
 }: {
   id: string;
   label: string;
+  dataTestId: string;
   onChange: (files: string[]) => void;
   multi?: boolean;
   error?: boolean;
+  errorMessage?: string;
   variant?: Variant;
   link?: string;
+  description?: string;
   values?: string[];
+  labelAlignment?: 'right' | 'left' | 'center';
 }): React.ReactElement {
   const inputRef = React.useRef<HTMLInputElement>(null);
 
@@ -120,57 +132,94 @@ function FileInput({
     [onChange]
   );
 
-  return (
-    <div
-      className={cx(
-        { [formItemHorizontalStyles]: variant === Variant.Horizontal },
-        { [formItemVerticalStyles]: variant === Variant.Vertical },
-        { [formItemErrorStyles]: error }
-      )}
-    >
-      <label
-        htmlFor={id}
+  const renderDescription = () => {
+    if (!link && !description) {
+      return <></>;
+    }
+    if (!link) {
+      return (
+        <Description
+          data-testid={'file-input-description'}
+          style={{ gridArea: 'description' }}
+        >
+          {description}
+        </Description>
+      );
+    }
+    return (
+      <Link
+        data-testid={'file-input-link'}
+        href={link}
         className={cx(
-          { [labelHorizontalStyles]: variant === Variant.Horizontal },
-          { [labelErrorStyles]: error }
+          {
+            [labelIconStyles]: !description,
+          },
+          css({
+            gridArea: description ? 'description' : 'icon',
+          })
         )}
+        hideExternalIcon={!description}
       >
-        <span>{label}</span>
-        {link && (
-          <a
-            href={link}
-            target="_blank"
-            rel="noreferrer"
-            className={labelIconStyles}
-            data-testid="file-input-link"
-          >
-            
-          </a>
+        {description ?? ''}
+      </Link>
+    );
+  };
+
+  return (
+    <div>
+      <div
+        className={cx(
+          { [formItemHorizontalStyles]: variant === Variant.Horizontal },
+          { [formItemVerticalStyles]: variant === Variant.Vertical },
+          { [formItemErrorStyles]: error }
         )}
-      </label>
-      <input
-        ref={inputRef}
-        id={`${id}_file_input`}
-        name={id}
-        type="file"
-        multiple={multi}
-        onChange={onFilesChanged}
-        style={{ display: 'none' }}
-      />
-      <Button
-        id={id}
-        data-testid="file-input-button"
-        className={cx({ [buttonStyles]: true }, { [buttonErrorStyles]: error })}
-        onClick={() => {
-          if (inputRef.current) {
-            inputRef.current.click();
-          }
-        }}
-        title="Select a file"
-        leftGlyph={<Icon glyph="AddFile" title={null} fill="currentColor" />}
       >
-        {buttonText}
-      </Button>
+        <label
+          htmlFor={`${id}_file_input`}
+          className={cx(
+            { [labelHorizontalStyles]: variant === Variant.Horizontal },
+            css({
+              textAlign: labelAlignment,
+            })
+          )}
+        >
+          <span style={{ gridArea: 'label' }}>{label}</span>
+          {renderDescription()}
+        </label>
+        <input
+          data-testid={dataTestId ?? 'file-input'}
+          ref={inputRef}
+          id={`${id}_file_input`}
+          name={id}
+          type="file"
+          multiple={multi}
+          onChange={onFilesChanged}
+          style={{ display: 'none' }}
+        />
+        <Button
+          id={id}
+          data-testid="file-input-button"
+          className={cx({ [buttonStyles]: true })}
+          onClick={() => {
+            if (inputRef.current) {
+              inputRef.current.click();
+            }
+          }}
+          title="Select a file"
+          leftGlyph={<Icon glyph="AddFile" title={null} fill="currentColor" />}
+        >
+          {buttonText}
+        </Button>
+      </div>
+      {error && errorMessage && (
+        <Label
+          data-testid={'file-input-error'}
+          className={errorMessageStyles}
+          htmlFor={''}
+        >
+          {errorMessage}
+        </Label>
+      )}
     </div>
   );
 }

packages/compass-connect/src/components/form/ssh-tunnel-identity-file-validation.jsx

@@ -162,6 +162,7 @@ class SSHTunnelIdentityFileValidation extends React.Component {
         />
         <FileInput
           label="SSH Identity File"
+          labelAlignment="right"
           id="sshTunnelIdentityFile"
           error={this.getFileError()}
           onChange={this.onSSHTunnelIdentityFileChanged.bind(this)}

packages/compass-connect/src/components/form/ssl-server-client-validation.jsx

@@ -116,6 +116,7 @@ class SSLServerClientValidation extends React.Component {
       >
         <FileInput
           label="Certificate Authority"
+          labelAlignment="right"
           id="sslCA"
           error={this.getCertAuthError()}
           onChange={this.onCertificateAuthorityChanged.bind(this)}
@@ -124,6 +125,7 @@ class SSLServerClientValidation extends React.Component {
         />
         <FileInput
           label="Client Certificate"
+          labelAlignment="right"
           id="sslCert"
           error={this.getClientCertError()}
           onChange={this.onClientCertificateChanged.bind(this)}
@@ -132,6 +134,7 @@ class SSLServerClientValidation extends React.Component {
         />
         <FileInput
           label="Client Private Key"
+          labelAlignment="right"
           id="sslKey"
           error={this.getClientKeyError()}
           onChange={this.onClientPrivateKeyChanged.bind(this)}

packages/compass-connect/src/components/form/ssl-server-validation.jsx

@@ -46,6 +46,7 @@ class SSLServerValidation extends React.Component {
         className={classnames(styles['form-group'])}>
         <FileInput
           label="Certificate Authority"
+          labelAlignment="right"
           onChange={this.onSSLCAChanged.bind(this)}
           values={this.props.connectionModel.sslCA}
           error={this.getError()}

packages/compass-shell/src/components/compass-shell/compass-shell.jsx

@@ -41,6 +41,8 @@ export class CompassShell extends Component {
   constructor(props) {
     super(props);
 
+    this.shellRef = React.createRef();
+
     this.shellOutput = this.props.shellOutput || [];
 
     this.state = {
@@ -136,6 +138,13 @@ export class CompassShell extends Component {
     );
   }
 
+  hideInfoModal() {
+    this.setState({ showInfoModal: false });
+    if (this.shellRef.current) {
+      this.shellRef.current.focusEditor();
+    }
+  }
+
   /**
    * Render CompassShell component.
    *
@@ -160,7 +169,7 @@ export class CompassShell extends Component {
       <Fragment>
         <InfoModal
           show={showInfoModal}
-          hideInfoModal={() => this.setState({ showInfoModal: false })}
+          hideInfoModal={this.hideInfoModal.bind(this)}
         />
         <div
           data-test-id="shell-section"
@@ -194,6 +203,7 @@ export class CompassShell extends Component {
             )}
           >
             <Shell
+              ref={this.shellRef}
               runtime={this.props.runtime}
               initialHistory={this.state.initialHistory}
               initialOutput={this.shellOutput}