Convert result page to table

jhaals · Feb 13, 2021 · 8154067 · 8154067
1 parent ec3cc77
commit 8154067
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 74 deletions.
diff --git a/website/cypress/integration/create_secret.js b/website/cypress/integration/create_secret.js
@@ -6,45 +6,48 @@ describe('Create Secret', () => {
     }).as('post');
   });
 
-  it.only('create secret', () => {
+  const linkSelector = '.MuiTableBody-root > :nth-child(1) > :nth-child(3)';
+
+  it('create secret', () => {
     cy.get('textarea').type('hello world');
     cy.contains('Encrypt Message').click();
-    console.log('fopo');
-    console.log(cy.get('input').first());
-    console.log('fopo');
-    cy.get('input[id="copyField_One-click link"]').should(
-      'contain.value',
+
+    cy.get(linkSelector).should(
+      'contain',
       'http://localhost:3000/#/s/75c3383d-a0d9-4296-8ca8-026cc2272271',
     );
 
     cy.wait('@post').then(mockGetResponse);
-    cy.get('input[id="copyField_One-click link"]')
-      .invoke('val')
-      .then((text) => {
-        cy.visit(text);
-        cy.contains('hello world');
+    cy.get(linkSelector)
+      .invoke('text')
+      .then((url) => {
+        cy.visit(url);
+        cy.get('pre').contains('hello world');
       });
   });
 
   it('create secret with custom password', () => {
     const secret = 'this is a test';
     const password = 'My$3cr3tP4$$w0rd';
     cy.get('textarea').type(secret);
-    cy.get(':nth-child(2) > .form-check-input').click(); // Specify password
+    cy.get(
+      ':nth-child(3) > .MuiFormGroup-root > .MuiFormControlLabel-root > .MuiButtonBase-root > .MuiIconButton-label > .PrivateSwitchBase-input',
+    ).click(); // Specify password
     cy.get('#password').type(password);
     cy.contains('Encrypt Message').click();
-    cy.get('input[id="copyField_Short Link"]').should(
-      'contain.value',
+
+    cy.get(linkSelector).should(
+      'contain',
       'http://localhost:3000/#/c/75c3383d-a0d9-4296-8ca8-026cc2272271',
     );
 
     cy.wait('@post').then(mockGetResponse);
-    cy.get('input[id="copyField_Short Link"]')
-      .invoke('val')
+    cy.get(linkSelector)
+      .invoke('text')
       .then((text) => {
         cy.visit(text);
         cy.get('input').type(password);
-        cy.get('.btn').click();
+        cy.get('button').click();
         cy.contains(secret);
       });
   });

diff --git a/website/cypress/integration/upload_file.js b/website/cypress/integration/upload_file.js
@@ -6,17 +6,18 @@ describe('Upload/Download File', () => {
     }).as('post');
   });
 
+  const linkSelector = '.MuiTableBody-root > :nth-child(1) > :nth-child(3)';
   it('upload file', () => {
     const yourFixturePath = 'data.txt';
     cy.get('input').attachFile(yourFixturePath);
-    cy.get('input[id="copyField_One-click link"]').should(
-      'contain.value',
+    cy.get(linkSelector).should(
+      'contain',
       'http://localhost:3000/#/f/75c3383d-a0d9-4296-8ca8-026cc2272271',
     );
     cy.wait('@post').then(mockGetResponse);
 
-    cy.get('input[id="copyField_One-click link"]')
-      .invoke('val')
+    cy.get(linkSelector)
+      .invoke('text')
       .then((text) => {
         cy.visit(text);
         cy.contains(
@@ -35,14 +36,14 @@ describe('Upload/Download File', () => {
     const password = 'My$3cr3tP4$$w0rd';
     cy.get('#password').type(password);
     cy.get('input').attachFile('data.txt');
-    cy.get('input[id="copyField_Short Link"]').should(
-      'contain.value',
+    cy.get(linkSelector).should(
+      'contain',
       'http://localhost:3000/#/d/75c3383d-a0d9-4296-8ca8-026cc2272271',
     );
     cy.wait('@post').then(mockGetResponse);
 
-    cy.get('input[id="copyField_Short Link"]')
-      .invoke('val')
+    cy.get(linkSelector)
+      .invoke('text')
       .then((text) => {
         cy.visit(text);
         cy.get('input').type(password);

diff --git a/website/src/displaySecret/Result.tsx b/website/src/displaySecret/Result.tsx
@@ -3,12 +3,15 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useCopyToClipboard } from 'react-use';
 import {
   Button,
-  TextField,
-  Grid,
   Typography,
-  makeStyles,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableRow,
 } from '@material-ui/core';
 import { useTranslation } from 'react-i18next';
+import React from 'react';
 
 type ResultProps = {
   readonly uuid: string;
@@ -38,59 +41,44 @@ const Result = (props: ResultProps) => {
           'The cautious should send the decryption key in a separate communication channel.',
         )}
       </Typography>
-      <Grid container={true} justifyContent={'center'}>
-        <Grid item={true} xs={12}>
-          {!isCustomPassword && (
-            <CopyField label={t('One-click link')} value={full} />
-          )}
-        </Grid>
-        <Grid item={true} xs={12}>
-          <CopyField label={t('Short link')} value={short} />
-        </Grid>
-        <Grid item={true} xs={12}>
-          <CopyField label={t('Decryption Key')} value={password} />
-        </Grid>
-      </Grid>
+      <TableContainer>
+        <Table>
+          <TableBody>
+            {!isCustomPassword && (
+              <Row label={t('One-click link')} value={full} />
+            )}
+            <Row label={t('Short link')} value={short} />
+            <Row label={t('Decryption Key')} value={password} />
+          </TableBody>
+        </Table>
+      </TableContainer>
     </div>
   );
 };
 
-type CopyFieldProps = {
-  readonly label: string;
-  readonly value: string;
-};
-
-const useStyles = makeStyles((theme) => ({
-  button: {
-    marginRight: '10px',
-  },
-}));
-
-const CopyField = (props: CopyFieldProps) => {
+const Row = (props: RowProps) => {
   const [copy, copyToClipboard] = useCopyToClipboard();
-  const classes = useStyles();
   return (
-    <TextField
-      id={`copyField_${props.label}`}
-      label={props.label}
-      fullWidth={true}
-      defaultValue={props.value}
-      margin={'normal'}
-      InputProps={{
-        readOnly: true,
-        startAdornment: (
-          <Button
-            color={copy.error ? 'secondary' : 'primary'}
-            variant="contained"
-            className={classes.button}
-            onClick={() => copyToClipboard(props.value)}
-          >
-            <FontAwesomeIcon icon={faCopy} />
-          </Button>
-        ),
-      }}
-    />
+    <TableRow key={props.label}>
+      <TableCell width="15">
+        <Button
+          color={copy.error ? 'secondary' : 'primary'}
+          variant="contained"
+          onClick={() => copyToClipboard(props.value)}
+        >
+          <FontAwesomeIcon icon={faCopy} />
+        </Button>
+      </TableCell>
+      <TableCell width="100" padding="none">
+        <strong>{props.label}</strong>
+      </TableCell>
+      <TableCell>{props.value}</TableCell>
+    </TableRow>
   );
 };
+type RowProps = {
+  readonly label: string;
+  readonly value: string;
+};
 
 export default Result;