16659: Added copy of full token, fixed tests

Arvados-DCO-1.1-Signed-off-by: Daniel Kutyła <daniel.kutyla@contractors.roche.com>

diff --cc .env
index bd410081ebecca5b03e42a2695e9e842ee013401,bd410081ebecca5b03e42a2695e9e842ee013401..fd91b99c6a28f33db092cf50f6405ba42020b17b
--- 1/.env
--- 2/.env
+++ b/.env
@@@ -1,5 -1,5 +1,5 @@@
  # Copyright (C) The Arvados Authors. All rights reserved.
--# 
++#
  # SPDX-License-Identifier: AGPL-3.0
  
  REACT_APP_ARVADOS_CONFIG_URL=/config.json

diff --cc src/views-components/current-token-dialog/current-token-dialog.test.tsx
index 188076d7711ebbbe8d99b1fbaf31155aff3245b8,0000000000000000000000000000000000000000..eb405e94a0ed6f7bf140f7afe0de4f6179eef0ee
mode 100644,000000..100644
--- 1/src/views-components/current-token-dialog/current-token-dialog.test.tsx
--- /dev/null
+++ b/src/views-components/current-token-dialog/current-token-dialog.test.tsx
@@@ -1,47 -1,0 +1,51 @@@
- import * as React from "react";
- import { shallow, configure } from "enzyme";
- import * as Adapter from "enzyme-adapter-react-16";
- import * as CopyToClipboard from "react-copy-to-clipboard";
- import { CurrentTokenDialogComponent } from "./current-token-dialog";
 +// Copyright (C) The Arvados Authors. All rights reserved.
 +//
 +// SPDX-License-Identifier: AGPL-3.0
 +
- describe("<CurrentTokenDialog />", () => {
++import * as React from 'react';
++import { Button } from '@material-ui/core';
++import { mount, configure } from 'enzyme';
++import * as Adapter from 'enzyme-adapter-react-16';
++import * as CopyToClipboard from 'react-copy-to-clipboard';
++import { CurrentTokenDialogComponent } from './current-token-dialog';
 +
 +configure({ adapter: new Adapter() });
 +
-         currentToken: "123123123123",
++jest.mock('toggle-selection', () => () => () => null);
++
++describe('<CurrentTokenDialog />', () => {
 +  let props;
 +  let wrapper;
 +
 +  beforeEach(() => {
 +    props = {
 +      classes: {},
 +      data: {
-   describe("copy to clipboard", () => {
++        currentToken: '123123123123',
 +      },
++      open: true,
 +      dispatch: jest.fn(),
 +    };
 +  });
 +
-       wrapper = shallow(<CurrentTokenDialogComponent {...props} />);
++  describe('copy to clipboard', () => {
 +    beforeEach(() => {
-     it("should copy API TOKEN to the clipboard", () => {
++      wrapper = mount(<CurrentTokenDialogComponent {...props} />);
 +    });
 +
-       wrapper.find(CopyToClipboard).props().onCopy();
++    it('should copy API TOKEN to the clipboard', () => {
 +      // when
-       // then
++      wrapper.find(CopyToClipboard).find(Button).simulate('click');
 +
-           message: "Token copied to clipboard",
++      // and
 +      expect(props.dispatch).toHaveBeenCalledWith({
 +        payload: {
 +          hideDuration: 2000,
 +          kind: 1,
-         type: "OPEN_SNACKBAR",
++          message: 'Token copied to clipboard',
 +        },
++        type: 'OPEN_SNACKBAR',
 +      });
 +    });
 +  });
 +});

diff --cc src/views-components/current-token-dialog/current-token-dialog.tsx
index 57b228f9391a3dad9c4b7a3578eeb967c01e2d32,e5208d44347e69cbc77701cceb5c8c663ed147b6..0ea24690fd901c92e33ab5732e8aa398f3cc812f
--- 1/src/views-components/current-token-dialog/current-token-dialog.tsx
--- 2/src/views-components/current-token-dialog/current-token-dialog.tsx
+++ b/src/views-components/current-token-dialog/current-token-dialog.tsx
@@@ -38,70 -31,51 +38,70 @@@ const styles: StyleRulesCallback<CssRul
      }
  });
  
 -type CurrentTokenProps = CurrentTokenDialogData & WithDialogProps<{}> & WithStyles<CssRules>;
 +type CurrentTokenProps = CurrentTokenDialogData & WithDialogProps<{}> & WithStyles<CssRules> & DispatchProp;
  
 -export const CurrentTokenDialog =
 -    withStyles(styles)(
 -    connect(getCurrentTokenDialogData)(
 -    withDialog(CURRENT_TOKEN_DIALOG_NAME)(
 -    class extends React.Component<CurrentTokenProps> {
 -        render() {
 -            const { classes, open, closeDialog, ...data } = this.props;
 -            return <Dialog
 -                open={open}
 -                onClose={closeDialog}
 -                fullWidth={true}
 -                maxWidth='md'>
 -                <DialogTitle>Current Token</DialogTitle>
 -                <DialogContent>
 -                    <Typography  paragraph={true}>
 -                        The Arvados API token is a secret key that enables the Arvados SDKs to access Arvados with the proper permissions.
 -                                <Typography component='p'>
 +export class CurrentTokenDialogComponent extends React.Component<CurrentTokenProps> {
 +    onCopy = (message: string) => {
 +        this.props.dispatch(snackbarActions.OPEN_SNACKBAR({
 +            message,
 +            hideDuration: 2000,
 +            kind: SnackbarKind.SUCCESS
 +        }));
 +    }
 +
 +    getSnippet = ({ apiHost, currentToken }: CurrentTokenDialogData) =>
 +        `HISTIGNORE=$HISTIGNORE:'export ARVADOS_API_TOKEN=*'
-     export ARVADOS_API_TOKEN=${currentToken}
-     export ARVADOS_API_HOST=${apiHost}
-     unset ARVADOS_API_HOST_INSECURE`
++export ARVADOS_API_TOKEN=${currentToken}
++export ARVADOS_API_HOST=${apiHost}
++unset ARVADOS_API_HOST_INSECURE`
 +
 +    render() {
 +        const { classes, open, closeDialog, ...data } = this.props;
 +        return <Dialog
 +            open={open}
 +            onClose={closeDialog}
 +            fullWidth={true}
 +            maxWidth='md'>
 +            <DialogTitle>Current Token</DialogTitle>
 +            <DialogContent>
 +                <Typography paragraph={true}>
 +                    The Arvados API token is a secret key that enables the Arvados SDKs to access Arvados with the proper permissions.
-                             <Typography component='p'>
-                         For more information see
-                                 <a href='http://doc.arvados.org/user/reference/api-tokens.html' target='blank' className={classes.link}>
-                             Getting an API token.
-                                 </a>
-                     </Typography>
++                        <Typography component='span'>
+                             For more information see
 -                                    <a href='http://doc.arvados.org/user/reference/api-tokens.html' target='blank' className={classes.link}>
++                            <a href='http://doc.arvados.org/user/reference/api-tokens.html' target='blank' className={classes.link}>
+                                 Getting an API token.
 -                                    </a>
++                            </a>
+                         </Typography>
 -                    </Typography>
 -                    <Typography  paragraph={true}>
 -                        Paste the following lines at a shell prompt to set up the necessary environment for Arvados SDKs to authenticate to your account.
 -                            </Typography>
 -                    <DefaultCodeSnippet lines={[getSnippet(data)]} />
 -                    <Typography >
 -                        Arvados
 -                                <a href='http://doc.arvados.org/user/reference/api-tokens.html' target='blank' className={classes.link}>virtual machines</a>
 -                        do this for you automatically. This setup is needed only when you use the API remotely (e.g., from your own workstation).
 -                            </Typography>
 -                </DialogContent>
 -                <DialogActions>
 -                    <Button onClick={closeDialog} className={classes.button} color="primary">CLOSE</Button>
 -                </DialogActions>
 -            </Dialog>;
 -        }
 +                </Typography>
 +                <Typography paragraph={true}>
-                     Paste the following lines at a shell prompt to set up the necessary environment for Arvados SDKs to authenticate to your klingenc account.
-                         </Typography>
++                    Paste the following lines at a shell prompt to set up the necessary environment for Arvados SDKs to authenticate to your account.
++                </Typography>
 +                <DefaultCodeSnippet lines={[this.getSnippet(data)]} />
-                 <CopyToClipboard text={data.currentToken} onCopy={() => this.onCopy('Token copied to clipboard')}>
++                <CopyToClipboard text={this.getSnippet(data)} onCopy={() => this.onCopy('Token copied to clipboard')}>
 +                    <Button
 +                        color="primary"
 +                        size="small"
 +                        variant="contained"
 +                        className={classes.copyButton}
 +                    >
-                         Copy Api Token
++                        COPY TO CLIPBOARD
 +                    </Button>
 +                </CopyToClipboard>
 +                <Typography >
 +                    Arvados
 +                            <a href='http://doc.arvados.org/user/reference/api-tokens.html' target='blank' className={classes.link}>virtual machines</a>
 +                    do this for you automatically. This setup is needed only when you use the API remotely (e.g., from your own workstation).
-                         </Typography>
++                </Typography>
 +            </DialogContent>
 +            <DialogActions>
 +                <Button onClick={closeDialog} className={classes.button} color="primary">CLOSE</Button>
 +            </DialogActions>
 +        </Dialog>;
      }
 -)));
 +}
 +
 +export const CurrentTokenDialog =
 +    withStyles(styles)(
 +        connect(getCurrentTokenDialogData)(
 +            withDialog(CURRENT_TOKEN_DIALOG_NAME)(CurrentTokenDialogComponent)));
  
 -const getSnippet = ({ apiHost, currentToken }: CurrentTokenDialogData) =>
 -`HISTIGNORE=$HISTIGNORE:'export ARVADOS_API_TOKEN=*'
 -export ARVADOS_API_TOKEN=${currentToken}
 -export ARVADOS_API_HOST=${apiHost}
 -unset ARVADOS_API_HOST_INSECURE`;