wip

navikt · Nov 27, 2024 · 3e617b3 · 3e617b3
1 parent eaf7032
commit 3e617b3
Show file tree

Hide file tree

Showing 7 changed files with 96 additions and 123 deletions.
diff --git a/src/components/NavigationBar.tsx b/src/components/NavigationBar.tsx
@@ -5,11 +5,15 @@ import { MoteoversiktLink } from '@/components/MoteoversiktLink';
 import {
   enhetOversiktRoutePath,
   minOversiktRoutePathRoutePath,
+  sokSykmeldtRoutePath,
 } from '@/routers/AppRouter';
+import { Box, HStack } from '@navikt/ds-react';
+import { useFeatureToggles } from '@/data/unleash/unleashQueryHooks';
 
 const texts = {
   enhetensOversikt: 'Enhetens oversikt',
   minOversikt: 'Min oversikt',
+  sokSykmeldt: 'Søk etter sykmeldt',
 };
 
 const LinkStyled = styled(NavLink)`
@@ -41,29 +45,12 @@ const LinkStyled = styled(NavLink)`
   }
 `;
 
-const NavigationBarDiv = styled.div`
-  background: white;
-  width: 100%;
-  margin: auto;
-  margin-bottom: 1em;
-`;
-
-const NavigationBarContent = styled.div`
-  width: calc(100% - 10%);
-  margin: auto;
-  padding-top: 1em;
-  padding-bottom: 1em;
-  display: flex;
-
-  > :not(:last-child) {
-    margin-right: 1em;
-  }
-`;
-
 export const NavigationBar = (): ReactElement => {
+  const { toggles } = useFeatureToggles();
+
   return (
-    <NavigationBarDiv>
-      <NavigationBarContent>
+    <Box className="mb-4" background="surface-default">
+      <HStack gap="4" padding="4" className="w-11/12 m-auto">
         <LinkStyled
           className={({ isActive }) => (isActive ? 'active' : '')}
           to={minOversiktRoutePathRoutePath}
@@ -76,10 +63,18 @@ export const NavigationBar = (): ReactElement => {
         >
           {texts.enhetensOversikt}
         </LinkStyled>
+        {toggles.isSokEnabled && (
+          <LinkStyled
+            className={({ isActive }) => (isActive ? 'active' : '')}
+            to={sokSykmeldtRoutePath}
+          >
+            {texts.sokSykmeldt}
+          </LinkStyled>
+        )}
         <div className="ml-auto self-center">
           <MoteoversiktLink />
         </div>
-      </NavigationBarContent>
-    </NavigationBarDiv>
+      </HStack>
+    </Box>
   );
 };
diff --git a/src/components/sokperson/SokContainer.tsx b/src/components/sokperson/SokContainer.tsx
@@ -0,0 +1,21 @@
+import React, { useEffect } from 'react';
+import * as Amplitude from '@/utils/amplitude';
+import { EventType } from '@/utils/amplitude';
+import { NavigationBar } from '@/components/NavigationBar';
+import SokPerson from '@/components/sokperson/SokPerson';
+
+export default function SokContainer() {
+  useEffect(() => {
+    Amplitude.logEvent({
+      type: EventType.PageView,
+      data: { url: window.location.href, sidetittel: 'Søk sykmeldt' },
+    });
+  }, []);
+
+  return (
+    <div className="flex flex-col mx-8">
+      <NavigationBar />
+      <SokPerson />
+    </div>
+  );
+}
diff --git a/src/components/sokperson/SokPerson.tsx b/src/components/sokperson/SokPerson.tsx
@@ -6,7 +6,6 @@ import {
   Button,
   Heading,
   HStack,
-  Modal,
   TextField,
   VStack,
 } from '@navikt/ds-react';
@@ -18,7 +17,6 @@ import { isNumeric, removePunctuation } from '@/utils/stringUtil';
 import { parseDateString } from '@/utils/dateUtils';
 
 const texts = {
-  buttonText: 'Søk etter sykmeldt',
   header: 'Søk etter sykmeldt',
   info:
     'Her kan du søke opp sykmeldte personer basert på initialer og fødselsdato.',
@@ -30,7 +28,6 @@ const texts = {
 };
 
 export default function SokPerson() {
-  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
   const [nameInitials, setNameInitials] = useState<string>('');
   const [birthdate, setBirthdate] = useState<string>('');
   const {
@@ -70,70 +67,57 @@ export default function SokPerson() {
   };
 
   return (
-    <Box>
-      <Button onClick={() => setIsModalOpen(true)} size="small">
-        {texts.buttonText}
-      </Button>
-      <Modal
-        closeOnBackdropClick
-        className="w-[90%] max-w-[90%]"
-        open={isModalOpen}
-        aria-label={texts.buttonText}
-        onClose={() => setIsModalOpen(false)}
-      >
-        <Modal.Header>
-          <Heading level="2" size="medium">
-            {texts.header}
-          </Heading>
-        </Modal.Header>
-        <Modal.Body>
-          <VStack gap="4">
-            <BodyShort>{texts.info}</BodyShort>
-            <HStack gap="8" align="end">
-              <TextField
-                label="Initialer"
-                description="AB"
-                htmlSize={10}
-                type="text"
-                onChange={(e) => setNameInitials(e.target.value)}
-                error={
-                  isFormError && !validInitials(nameInitials)
-                    ? texts.validation.initials
-                    : undefined
-                }
-              />
-              <TextField
-                label="Fødselsdato"
-                description="ddmmåå"
-                htmlSize={14}
-                type="text"
-                onChange={(e) => setBirthdate(e.target.value)}
-                error={
-                  isFormError && parseBirthdate(birthdate) === null
-                    ? texts.validation.birthdate
-                    : undefined
-                }
-              />
-              <Button
-                onClick={handleSubmit}
-                loading={isLoading}
-                icon={<MagnifyingGlassIcon />}
-                type="submit"
-              >
-                Søk
-              </Button>
-            </HStack>
-            {searchResults && isSuccess && (
-              <SokPersonResultat sokeresultater={searchResults} />
-            )}
-            {isError && (
-              <Alert variant="error" size="small">
-                {texts.error}
-              </Alert>
-            )}
-          </VStack>
-        </Modal.Body>
-      </Modal>
-    </Box>
+    <>
+      <Box background="surface-default" padding="4">
+        <Heading level="2" size="medium">
+          {texts.header}
+        </Heading>
+        <VStack gap="4">
+          <BodyShort>{texts.info}</BodyShort>
+          <HStack gap="8" align="end">
+            <TextField
+              label="Initialer"
+              description="AB"
+              htmlSize={10}
+              type="text"
+              onChange={(e) => setNameInitials(e.target.value)}
+              error={
+                isFormError && !validInitials(nameInitials)
+                  ? texts.validation.initials
+                  : undefined
+              }
+            />
+            <TextField
+              label="Fødselsdato"
+              description="ddmmåå"
+              htmlSize={14}
+              type="text"
+              onChange={(e) => setBirthdate(e.target.value)}
+              error={
+                isFormError && parseBirthdate(birthdate) === null
+                  ? texts.validation.birthdate
+                  : undefined
+              }
+            />
+            <Button
+              onClick={handleSubmit}
+              loading={isLoading}
+              icon={<MagnifyingGlassIcon />}
+              type="submit"
+            >
+              Søk
+            </Button>
+          </HStack>
+          {isError && (
+            <Alert variant="error" size="small">
+              {texts.error}
+            </Alert>
+          )}
+        </VStack>
+      </Box>
+      {searchResults && isSuccess && (
+        <SokPersonResultat sokeresultater={searchResults} />
+      )}
+    </>
   );
 }
diff --git a/src/components/sokperson/SokPersonResultat.tsx b/src/components/sokperson/SokPersonResultat.tsx
@@ -29,7 +29,7 @@ export default function SokPersonResultat({
   const personer = Object.entries(toPersonData(sokeresultater, []));
 
   return personer.length === 0 ? (
-    <Box>
+    <Box background="surface-default" padding="4" className="mt-2">
       <BodyShort>{texts.noResults.first}</BodyShort>
       <BodyShort>{texts.noResults.second}</BodyShort>
     </Box>

diff --git a/src/components/toolbar/ToolbarWrapper.tsx b/src/components/toolbar/ToolbarWrapper.tsx
@@ -2,8 +2,6 @@ import React, { ReactElement, useState } from 'react';
 import Toolbar from './Toolbar';
 import { Label } from '@navikt/ds-react';
 import { PAGINATED_NUMBER_OF_ITEMS } from '@/components/toolbar/PaginationContainer';
-import SokPerson from '@/components/sokperson/SokPerson';
-import { useFeatureToggles } from '@/data/unleash/unleashQueryHooks';
 
 export interface ToolbarWrapperProps {
   alleMarkert: boolean;
@@ -37,7 +35,6 @@ const ToolbarWrapper = (props: ToolbarWrapperProps): ReactElement => {
     firstVisibleIndex: 0,
     lastVisibleIndex: PAGINATED_NUMBER_OF_ITEMS,
   });
-  const { toggles } = useFeatureToggles();
 
   return (
     <>
@@ -52,7 +49,6 @@ const ToolbarWrapper = (props: ToolbarWrapperProps): ReactElement => {
             </Label>
           )}
         </div>
-        {toggles.isSokEnabled && <SokPerson />}
       </div>
       <Toolbar {...props} setPageInfo={setPageInfo} />
     </>

diff --git a/src/routers/AppRouter.tsx b/src/routers/AppRouter.tsx
@@ -5,9 +5,11 @@ import Decorator from '../decorator/Decorator';
 import OversiktContainer from '@/containers/OversiktContainer';
 import { OverviewTabType } from '@/konstanter';
 import ErrorBoundary from '@/components/error/ErrorBoundary';
+import SokContainer from '@/components/sokperson/SokContainer';
 
 export const minOversiktRoutePathRoutePath = '/minoversikt';
 export const enhetOversiktRoutePath = '/enhet';
+export const sokSykmeldtRoutePath = '/sok';
 
 const AppRouter = (): ReactElement => {
   return (
@@ -29,6 +31,7 @@ const AppRouter = (): ReactElement => {
                   <OversiktContainer tabType={OverviewTabType.MY_OVERVIEW} />
                 }
               />
+              <Route path={sokSykmeldtRoutePath} element={<SokContainer />} />
               <Route
                 path="*"
                 element={<Navigate to={enhetOversiktRoutePath} />}

diff --git a/test/components/SokPersonTest.tsx b/test/components/SokPersonTest.tsx
@@ -31,17 +31,9 @@ describe('SokPerson', () => {
     mockServer.use(mockSokPerson());
   });
 
-  it('should render SokPerson with fields', async () => {
+  it('should render SokPerson with fields', () => {
     renderSokPerson();
 
-    const modalButton = screen.getByRole('button', {
-      name: 'Søk etter sykmeldt',
-    });
-    expect(modalButton).to.exist;
-
-    await userEvent.click(modalButton);
-
-    expect(screen.getByRole('dialog', { name: 'Søk etter sykmeldt' })).to.exist;
     expect(screen.getByRole('heading', { name: 'Søk etter sykmeldt' })).to
       .exist;
     expect(
@@ -57,12 +49,6 @@ describe('SokPerson', () => {
   it('should render validation errors for fields', async () => {
     renderSokPerson();
 
-    await userEvent.click(
-      screen.getByRole('button', {
-        name: 'Søk etter sykmeldt',
-      })
-    );
-
     await userEvent.click(screen.getByRole('button', { name: 'Søk' }));
 
     expect(screen.getByText('Vennligst angi gyldige initialer')).to.exist;
@@ -72,12 +58,6 @@ describe('SokPerson', () => {
   it('should send correct parameters', async () => {
     renderSokPerson();
 
-    await userEvent.click(
-      screen.getByRole('button', {
-        name: 'Søk etter sykmeldt',
-      })
-    );
-
     const initialsInput = screen.getByRole('textbox', { name: 'Initialer' });
     const birthdateInput = screen.getByRole('textbox', { name: 'Fødselsdato' });
 
@@ -115,12 +95,6 @@ describe('SokPerson', () => {
   it('should show correct results', async () => {
     renderSokPerson();
 
-    await userEvent.click(
-      screen.getByRole('button', {
-        name: 'Søk etter sykmeldt',
-      })
-    );
-
     const initialsInput = screen.getByRole('textbox', { name: 'Initialer' });
     const birthdateInput = screen.getByRole('textbox', { name: 'Fødselsdato' });