diff --git a/web-console/src/components/table-cell/__snapshots__/table-cell.spec.tsx.snap b/web-console/src/components/table-cell/__snapshots__/table-cell.spec.tsx.snap index d1cf2ffaabf..cfba9f0997e 100644 --- a/web-console/src/components/table-cell/__snapshots__/table-cell.spec.tsx.snap +++ b/web-console/src/components/table-cell/__snapshots__/table-cell.spec.tsx.snap @@ -4,28 +4,28 @@ exports[`table cell matches snapshot array long 1`] = ` - [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16 + [0, 1, 2, 3, 4, 5, 6, 7 - ...323 omitted... + ...357 omitted... 7, 98, 99] - clipboard + more @@ -57,28 +57,28 @@ exports[`table cell matches snapshot truncate 1`] = ` - testtesttesttesttesttesttesttesttesttesttesttesttesttestt + testtesttesttesttesttes - ...329 omitted... + ...363 omitted... sttesttest - clipboard + more diff --git a/web-console/src/components/table-cell/table-cell.scss b/web-console/src/components/table-cell/table-cell.scss index 6be6b716948..3671b7d9afc 100644 --- a/web-console/src/components/table-cell/table-cell.scss +++ b/web-console/src/components/table-cell/table-cell.scss @@ -47,6 +47,7 @@ position: absolute; top: 0; right: 0; + color: #f5f8fa; } } } diff --git a/web-console/src/components/table-cell/table-cell.tsx b/web-console/src/components/table-cell/table-cell.tsx index 88f6b848c8b..92cfa39133a 100644 --- a/web-console/src/components/table-cell/table-cell.tsx +++ b/web-console/src/components/table-cell/table-cell.tsx @@ -30,6 +30,7 @@ export interface NullTableCellProps extends React.Props { value?: any; timestamp?: boolean; unparseable?: boolean; + openModal?: (str: string) => void; } interface ShortParts { @@ -41,8 +42,8 @@ interface ShortParts { export class TableCell extends React.PureComponent { static MAX_CHARS_TO_SHOW = 50; - static possiblyTruncate(str: string): React.ReactNode { - if (str.length < TableCell.MAX_CHARS_TO_SHOW) return str; + possiblyTruncate(str: string): React.ReactNode { + if (str.length <= TableCell.MAX_CHARS_TO_SHOW) return str; const { prefix, omitted, suffix } = TableCell.shortenString(str); return ( @@ -51,14 +52,8 @@ export class TableCell extends React.PureComponent { {omitted} {suffix} { - copy(str, { format: 'text/plain' }); - AppToaster.show({ - message: 'Value copied to clipboard', - intent: Intent.SUCCESS, - }); - }} + icon={IconNames.MORE} + onClick={() => (this.props.openModal ? this.props.openModal(str) : null)} /> ); @@ -67,7 +62,7 @@ export class TableCell extends React.PureComponent { static shortenString(str: string): ShortParts { // Print something like: // BAAAArAAEiQKpDAEAACwZCBAGSBgiSEAAAAQpAIDwAg...23 omitted...gwiRoQBJIC - const omit = str.length - (TableCell.MAX_CHARS_TO_SHOW + 17); + const omit = str.length - (TableCell.MAX_CHARS_TO_SHOW - 17); const prefix = str.substr(0, str.length - (omit + 10)); const suffix = str.substr(str.length - 10); return { @@ -89,9 +84,9 @@ export class TableCell extends React.PureComponent { ); } else if (Array.isArray(value)) { - return TableCell.possiblyTruncate(`[${value.join(', ')}]`); + return this.possiblyTruncate(`[${value.join(', ')}]`); } else { - return TableCell.possiblyTruncate(String(value)); + return this.possiblyTruncate(String(value)); } } else { if (timestamp) { diff --git a/web-console/src/dialogs/show-value-dialog/__snapshots__/show-value-dialog.spec.tsx.snap b/web-console/src/dialogs/show-value-dialog/__snapshots__/show-value-dialog.spec.tsx.snap new file mode 100644 index 00000000000..144f8803a5d --- /dev/null +++ b/web-console/src/dialogs/show-value-dialog/__snapshots__/show-value-dialog.spec.tsx.snap @@ -0,0 +1,107 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`clipboard dialog matches snapshot 1`] = ` +
+
+
+
+
+
+

+ Show value +

+ +
+ +
+ + +
+
+
+
+
+`; diff --git a/web-console/src/dialogs/show-value-dialog/show-value-dialog.scss b/web-console/src/dialogs/show-value-dialog/show-value-dialog.scss new file mode 100644 index 00000000000..1ef9e94c083 --- /dev/null +++ b/web-console/src/dialogs/show-value-dialog/show-value-dialog.scss @@ -0,0 +1,33 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.show-value-dialog{ + &.bp3-dialog{ + padding-bottom: 10px; + } + + .bp3-input{ + margin: 10px; + height: 400px; + } + + .bp3-dialog-footer-actions{ + padding-right: 10px; + + } +} diff --git a/web-console/src/dialogs/show-value-dialog/show-value-dialog.spec.tsx b/web-console/src/dialogs/show-value-dialog/show-value-dialog.spec.tsx new file mode 100644 index 00000000000..d8dc72d478d --- /dev/null +++ b/web-console/src/dialogs/show-value-dialog/show-value-dialog.spec.tsx @@ -0,0 +1,37 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import { render } from 'react-testing-library'; + +import { ShowValueDialog } from './show-value-dialog'; + +describe('clipboard dialog', () => { + it('matches snapshot', () => { + const compactionDialog = ( + null} + str={ + 'Bot: Automatska zamjena teksta (-[[Administrativna podjela Meksika|Admin]] +[[Administrativna podjela Meksika|Admi]])' + } + /> + ); + const { container } = render(compactionDialog, { container: document.body }); + expect(container.firstChild).toMatchSnapshot(); + }); +}); diff --git a/web-console/src/dialogs/show-value-dialog/show-value-dialog.tsx b/web-console/src/dialogs/show-value-dialog/show-value-dialog.tsx new file mode 100644 index 00000000000..4a92aa8b6e0 --- /dev/null +++ b/web-console/src/dialogs/show-value-dialog/show-value-dialog.tsx @@ -0,0 +1,61 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { Button, Classes, Dialog, IconName, Intent, TextArea } from '@blueprintjs/core'; +import { IconNames } from '@blueprintjs/icons'; +import copy = require('copy-to-clipboard'); +import React from 'react'; + +import { AppToaster } from '../../singletons/toaster'; + +import './show-value-dialog.scss'; + +export interface ShowValueDialogProps extends React.Props { + onClose: () => void; + str: string; +} + +export class ShowValueDialog extends React.PureComponent { + constructor(props: ShowValueDialogProps) { + super(props); + this.state = {}; + } + + render() { + const { onClose, str } = this.props; + + return ( + +