Remove extra div from settings navtab

webkom · Oct 15, 2023 · 585893d · 585893d
1 parent 11da240
commit 585893d
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 17 deletions.
diff --git a/app/components/NavigationTab/index.tsx b/app/components/NavigationTab/index.tsx
@@ -17,12 +17,19 @@ type Props = {
   children?: ReactNode;
 };
 
-const NavigationTab = (props: Props) => (
+const NavigationTab = ({
+  title,
+  back,
+  details,
+  headerClassName,
+  className,
+  children,
+}: Props) => (
   <>
-    {props.back && (
+    {back && (
       <NavLink
-        to={props.back.path}
-        onClick={(e: Event) => {
+        to={back.path}
+        onClick={(e) => {
           // TODO fix this hack when react-router is done
           if (!window.location.hash) return;
           window.history.back();
@@ -31,16 +38,14 @@ const NavigationTab = (props: Props) => (
         className={styles.back}
       >
         <Icon name="arrow-back" size={19} className={styles.backIcon} />
-        <span className={styles.backLabel}>{props.back.label}</span>
+        <span className={styles.backLabel}>{back.label}</span>
       </NavLink>
     )}
-    <div className={cx(styles.container, props.className)}>
-      <h1 className={cx(styles.header, props.headerClassName)}>
-        {props.title}
-      </h1>
-      <div className={styles.navigator}>{props.children}</div>
+    <div className={cx(styles.container, className)}>
+      <h1 className={cx(styles.header, headerClassName)}>{title}</h1>
+      <div className={styles.navigator}>{children}</div>
     </div>
-    <div className={styles.details}>{props.details}</div>
+    <div className={styles.details}>{details}</div>
   </>
 );
 

diff --git a/app/routes/users/components/UserSettingsIndex.tsx b/app/routes/users/components/UserSettingsIndex.tsx
@@ -35,7 +35,7 @@ const UserSettingsIndex = (props: Props) => {
         }}
       >
         {isCurrentUser && (
-          <div data-test-id="navigation-tab">
+          <>
             <NavigationLink to={`${base}/profile`}>Profil</NavigationLink>
             <NavigationLink to={`${base}/notifications`}>
               Notifikasjoner
@@ -46,7 +46,7 @@ const UserSettingsIndex = (props: Props) => {
                 ? 'Studentstatus'
                 : 'Verifiser studentstatus'}
             </NavigationLink>
-          </div>
+          </>
         )}
       </NavigationTab>
       {props.children &&

diff --git a/cypress/e2e/router_spec.js b/cypress/e2e/router_spec.js
@@ -1,4 +1,4 @@
-import { c, a, t } from '../support/utils.js';
+import { c, a } from '../support/utils.js';
 
 describe('Navigate throughout app', () => {
   beforeEach(() => {
@@ -90,7 +90,7 @@ describe('Navigate throughout app', () => {
     cy.contains('Brukernavn');
 
     // Go to notifications
-    cy.get(t('navigation-tab'))
+    cy.get(c('NavigationTab'))
       .first()
       .within(() => {
         cy.contains('Notifikasjoner').click();
@@ -99,7 +99,7 @@ describe('Navigate throughout app', () => {
     cy.contains('E-poster som sendes direkte til deg');
 
     // Go to OAuth2
-    cy.get(t('navigation-tab'))
+    cy.get(c('NavigationTab'))
       .first()
       .within(() => {
         cy.contains('OAuth2').click();
@@ -108,7 +108,7 @@ describe('Navigate throughout app', () => {
     cy.contains('Denne nettsiden benytter seg av et API');
 
     // Go to student confirmation
-    cy.get(t('navigation-tab'))
+    cy.get(c('NavigationTab'))
       .first()
       .within(() => {
         cy.contains('Verifiser studentstatus').click();