M3-5331: Remove redundant headers

packages/manager/src/features/Profile/LishSettings/LishSettings.tsx

@@ -28,36 +28,20 @@ import getAPIErrorFor from 'src/utilities/getAPIErrorFor';
 import scrollErrorIntoView from 'src/utilities/scrollErrorIntoView';
 
 type ClassNames =
-  | 'root'
-  | 'title'
   | 'intro'
   | 'modeControl'
   | 'sshWrap'
   | 'keyTextarea'
-  | 'image'
-  | 'addNew'
-  | 'remove'
-  | 'button';
+  | 'addNew';
 
 const styles = (theme: Theme) =>
   createStyles({
-    root: {
-      padding: theme.spacing(3),
-      paddingBottom: theme.spacing(3),
-    },
-    title: {
-      marginBottom: theme.spacing(2),
-    },
     intro: {
       marginBottom: theme.spacing(2),
     },
     modeControl: {
       display: 'flex',
     },
-    image: {
-      display: 'flex',
-      flexWrap: 'wrap',
-    },
     addNew: {
       ...theme.applyLinkStyles,
       marginTop: theme.spacing(2),
@@ -70,13 +54,6 @@ const styles = (theme: Theme) =>
         minWidth: 415,
       },
     },
-    remove: {
-      ...theme.applyLinkStyles,
-    },
-    button: {
-      margin: 0,
-      padding: 0,
-    },
   });
 
 interface State {
@@ -154,21 +131,20 @@ class LishSettings extends React.Component<CombinedProps, State> {
     });
 
     return (
-      <React.Fragment>
+      <>
         <DocumentTitleSegment segment="LISH Console Settings" />
-        <Paper className={classes.root}>
-          <Typography variant="h2" className={classes.title} data-qa-title>
-            LISH Console Settings
-          </Typography>
-          {success && <Notice success text={success} />}
-          {authorizedKeysError && <Notice error text={authorizedKeysError} />}
-          {generalError && <Notice error text={generalError} />}
+        <Paper>
+          {success ? <Notice success text={success} /> : null}
+          {authorizedKeysError ? (
+            <Notice error text={authorizedKeysError} />
+          ) : null}
+          {generalError ? <Notice error text={generalError} /> : null}
           <Typography className={classes.intro}>
             This controls what authentication methods are allowed to connect to
             the Lish console servers.
           </Typography>
           {loading ? null : (
-            <React.Fragment>
+            <>
               <FormControl className={classes.modeControl}>
                 <Select
                   textFieldProps={{
@@ -199,47 +175,48 @@ class LishSettings extends React.Component<CombinedProps, State> {
                     className={classes.keyTextarea}
                     data-qa-public-key
                   />
-                  {((idx === 0 && typeof authorizedKeys[0] !== 'undefined') ||
-                    idx > 0) && (
-                    <button
+                  {(idx === 0 && typeof authorizedKeys[0] !== 'undefined') ||
+                  idx > 0 ? (
+                    <Button
+                      buttonType="secondary"
+                      compact
                       onClick={this.onPublicKeyRemove(idx)}
-                      className={classes.remove}
                       data-qa-remove
                     >
                       Remove
-                    </button>
-                  )}
+                    </Button>
+                  ) : null}
                 </div>
               ))}
               <Typography style={{ paddingTop: 2 }}>
                 Place your SSH public keys here for use with Lish console
                 access.
               </Typography>
-              <button
+              <Button
+                buttonType="secondary"
+                compact
                 onClick={this.addSSHPublicKeyField}
-                className={classes.addNew}
               >
                 Add SSH Public Key
-              </button>
-            </React.Fragment>
+              </Button>
+            </>
           )}
           <ActionsPanel>
             <Button
-              className={classes.button}
               buttonType="primary"
-              onClick={this.onSubmit}
-              loading={this.state.submitting}
               disabled={
                 this.state.lishAuthMethod === this.props.lishAuthMethod &&
                 equals(this.state.authorizedKeys, this.props.authorizedKeys)
               }
+              loading={this.state.submitting}
+              onClick={this.onSubmit}
               data-qa-save
             >
               Save
             </Button>
           </ActionsPanel>
         </Paper>
-      </React.Fragment>
+      </>
     );
   }
 

packages/manager/src/features/Profile/OAuthClients/OAuthClients.test.tsx

@@ -1,11 +1,8 @@
-import { shallow, ShallowWrapper } from 'enzyme';
 import { OAuthClient } from '@linode/api-v4/lib/account';
+import { shallow, ShallowWrapper } from 'enzyme';
 import * as React from 'react';
-
-import { pageyProps } from 'src/__data__/pageyProps';
-
 import { clearDocs, setDocs } from 'src/store/documentation';
-
+import { pageyProps } from 'src/__data__/pageyProps';
 import { OAuthClients } from './OAuthClients';
 
 describe('OAuth Clients', () => {
@@ -40,7 +37,7 @@ describe('OAuth Clients', () => {
   beforeEach(() => {
     wrapper = shallow(
       <OAuthClients
-        classes={{ root: '', headline: '', addNewWrapper: '', actionCell: '' }}
+        classes={{ root: '', addNewWrapper: '', actionCell: '' }}
         {...pageyProps}
         data={mockData}
         setDocs={setDocs}

packages/manager/src/features/Profile/OAuthClients/OAuthClients.tsx

@@ -19,7 +19,6 @@ import {
 } from 'src/components/core/styles';
 import TableBody from 'src/components/core/TableBody';
 import TableHead from 'src/components/core/TableHead';
-import Typography from 'src/components/core/Typography';
 import setDocs, { SetDocsProps } from 'src/components/DocsSidebar/setDocs';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import Grid from 'src/components/Grid';
@@ -39,20 +38,20 @@ import Modals from './Modals';
 import ActionMenu from './OAuthClientActionMenu';
 import OAuthFormDrawer from './OAuthFormDrawer';
 
-type ClassNames = 'root' | 'headline' | 'addNewWrapper' | 'actionCell';
+type ClassNames = 'root' | 'addNewWrapper' | 'actionCell';
 
 const styles = (theme: Theme) =>
   createStyles({
     root: {
-      backgroundColor: theme.color.white,
       width: '100%',
     },
-    headline: {
-      marginLeft: 15,
-    },
     addNewWrapper: {
       '&.MuiGrid-item': {
-        padding: 5,
+        paddingTop: 0,
+        paddingRight: 0,
+      },
+      [theme.breakpoints.down('sm')]: {
+        marginRight: theme.spacing(),
       },
     },
     actionCell: {
@@ -373,21 +372,12 @@ export class OAuthClients extends React.Component<CombinedProps, State> {
           className={`${classes.root} m0`}
           container
           alignItems="center"
-          justify="space-between"
+          justify="flex-end"
         >
-          <Grid className="p0" item>
-            <Typography
-              className={classes.headline}
-              variant="h3"
-              data-qa-table={classes.headline}
-            >
-              OAuth Apps
-            </Typography>
-          </Grid>
           <Grid className={classes.addNewWrapper} item>
             <AddNewLink
-              onClick={() => this.openDrawer()(false)}
               label="Add an OAuth App"
+              onClick={() => this.openDrawer()(false)}
               data-qa-oauth-create
             />
           </Grid>

packages/manager/src/features/Profile/SSHKeys/SSHKeys.test.tsx

@@ -1,8 +1,8 @@
 import { shallow } from 'enzyme';
 import * as React from 'react';
+import { pageyProps } from 'src/__data__/pageyProps';
 import { SSHKeys } from './SSHKeys';
 
-import { pageyProps } from 'src/__data__/pageyProps';
 /**
  * Displays a table
  * Table has 4 columns
@@ -15,9 +15,7 @@ describe('SSHKeys', () => {
       <SSHKeys
         {...pageyProps}
         classes={{
-          root: '',
           sshKeysHeader: '',
-          headline: '',
           addNewWrapper: '',
           createdCell: '',
           actionCell: '',
@@ -59,9 +57,7 @@ describe('SSHKeys', () => {
       <SSHKeys
         {...pageyProps}
         classes={{
-          root: '',
           sshKeysHeader: '',
-          headline: '',
           addNewWrapper: '',
           createdCell: '',
           actionCell: '',
@@ -80,9 +76,7 @@ describe('SSHKeys', () => {
       <SSHKeys
         {...pageyProps}
         classes={{
-          root: '',
           sshKeysHeader: '',
-          headline: '',
           addNewWrapper: '',
           createdCell: '',
           actionCell: '',
@@ -101,9 +95,7 @@ describe('SSHKeys', () => {
       <SSHKeys
         {...pageyProps}
         classes={{
-          root: '',
           sshKeysHeader: '',
-          headline: '',
           addNewWrapper: '',
           createdCell: '',
           actionCell: '',

packages/manager/src/features/Profile/SSHKeys/SSHKeys.tsx

@@ -30,31 +30,24 @@ import fingerprint from 'src/utilities/ssh-fingerprint';
 import SSHKeyCreationDrawer from './SSHKeyCreationDrawer';
 
 type ClassNames =
-  | 'root'
   | 'sshKeysHeader'
-  | 'headline'
   | 'addNewWrapper'
   | 'createdCell'
   | 'actionCell';
 
 const styles = (theme: Theme) =>
   createStyles({
-    root: {
-      backgroundColor: theme.color.white,
-    },
     sshKeysHeader: {
       margin: 0,
       width: '100%',
     },
-    headline: {
-      marginTop: 8,
-      marginBottom: 8,
-      marginLeft: 15,
-      lineHeight: '1.5rem',
-    },
     addNewWrapper: {
       '&.MuiGrid-item': {
-        padding: 5,
+        paddingTop: 0,
+        paddingRight: 0,
+      },
+      [theme.breakpoints.down('sm')]: {
+        marginRight: theme.spacing(),
       },
     },
     createdCell: {
@@ -118,19 +111,14 @@ export class SSHKeys extends React.Component<CombinedProps, State> {
     const { classes } = this.props;
 
     return (
-      <div className={classes.root}>
+      <>
         <DocumentTitleSegment segment="SSH Keys" />
         <Grid
-          className={classes.sshKeysHeader}
           container
           alignItems="flex-end"
-          justify="space-between"
+          justify="flex-end"
+          className={classes.sshKeysHeader}
         >
-          <Grid className="p0" item>
-            <Typography variant="h3" className={classes.headline}>
-              SSH Keys
-            </Typography>
-          </Grid>
           <Grid className={classes.addNewWrapper} item>
             <AddNewLink
               label="Add an SSH Key"
@@ -171,7 +159,7 @@ export class SSHKeys extends React.Component<CombinedProps, State> {
           onSuccess={this.handleSuccessfulCreation}
           onCancel={this.closeCreationDrawer}
         />
-      </div>
+      </>
     );
   }