Merge pull request #257 from navikt/tailwindcss-v4

chore(deps): changes needed for tailwindcss v4

Author: vebjorre

.github/workflows/build-and-deploy-frontend.yml

@@ -19,6 +19,10 @@ permissions:
 
 jobs:
   build-and-push:
+    permissions:
+      contents: read
+      packages: write
+      id-token: write
     name: Build and push docker image
     runs-on: ubuntu-latest
     outputs:
@@ -36,6 +40,9 @@ jobs:
           identity_provider: ${{ secrets.NAIS_WORKLOAD_IDENTITY_PROVIDER }}
           docker_context: frontend
           project_id: ${{ inputs.project_id }}
+          build_secrets: NODE_AUTH_TOKEN=${{ secrets.READER_TOKEN }}          
+          build_args: 
+            NODE_AUTH_TOKEN=${{secrets.READER_TOKEN}}
           image_suffix: frontend
 
   deploy-dev:

.github/workflows/build-and-deploy.yml

@@ -130,10 +130,16 @@ jobs:
     name: Frontend
     if: ${{ needs.evaluate-build-module.outputs.build_module == 'fullstack' || needs.evaluate-build-module.outputs.build_module == 'frontend' }}
     uses: ./.github/workflows/build-and-deploy-frontend.yml
+    permissions:
+      packages: write
+      contents: read
+      actions: read
+      id-token: write
+      security-events: write
+    secrets: inherit    
     with:
       deploy_env: ${{ needs.evaluate-deploy-environment.outputs.deploy_env }}
       project_id: ${{ vars.NAIS_MANAGEMENT_PROJECT_ID }}
-    secrets: inherit
 
   call-build-and-deploy-backend:
     needs: [evaluate-deploy-environment, evaluate-build-module]

frontend/Dockerfile

@@ -4,6 +4,12 @@ WORKDIR /usr/app
 
 COPY package*.json .
 
+RUN --mount=type=secret,id=NODE_AUTH_TOKEN sh -c \
+    'npm config set //npm.pkg.github.com/:_authToken=$(cat /run/secrets/NODE_AUTH_TOKEN)'
+RUN npm config set @navikt:registry=https://npm.pkg.github.com
+
+COPY package.json package-lock.json ./
+
 RUN npm install --quiet
 
 FROM node-with-deps

frontend/components/dataproducts/dataset/datasetSourceForm.tsx

@@ -80,7 +80,7 @@ export const DataproductSourceForm = ({
         </div>
       ) : (
         <div className="flex flex-col gap-2">
-          <div className="w-full h-[48px] border border-border-strong rounded p-1"></div>
+          <div className="w-full h-[48px] border border-border-strong rounded-sm p-1"></div>
           <div className="flex gap-2 navds-error-message navds-label before:content-['•']">
             Du må velge gruppe i GCP før du kan velge tabell eller view
           </div>

frontend/components/header/user.tsx

@@ -1,8 +1,8 @@
-import { useContext } from 'react'
+import { MenuHamburgerIcon, PersonIcon } from '@navikt/aksel-icons'
+import { Dropdown, InternalHeader } from '@navikt/ds-react'
 import { useRouter } from 'next/router'
+import { useContext } from 'react'
 import { UserState } from '../../lib/context'
-import { Dropdown, InternalHeader } from '@navikt/ds-react'
-import { MenuHamburgerIcon, PersonIcon } from '@navikt/aksel-icons'
 
 export const backendHost = () => {
   return process.env.NODE_ENV === 'development' ? 'http://localhost:8080' : ''

frontend/components/index/searchField.tsx

@@ -20,7 +20,7 @@ const SearchBox = ({ onSearch }: SearchBoxProps) => {
         onSubmit={onSubmit}
       >
         <input
-          className="w-full border-0 p-0 focus-visible:outline-none"
+          className="w-full border-0 p-0 focus-visible:outline-hidden"
           type="search"
           aria-label="Søkefelt"
           value={value}

frontend/components/lib/DescriptionEditor.tsx

@@ -6,7 +6,7 @@ import { Loader } from '@navikt/ds-react'
 const MDEditor = dynamic(() => import('@uiw/react-md-editor'), {
   ssr: false,
   loading: () => (
-    <div className="h-48 mt-2 w-full flex items-center justify-center border border-border-strong rounded">
+    <div className="h-48 mt-2 w-full flex items-center justify-center border border-border-strong rounded-sm">
       <Loader size="2xlarge" />
     </div>
   ),

frontend/components/lib/copy.tsx

@@ -31,7 +31,7 @@ const Copy = ({ text }: CopyProps) => {
         onClick={(e) => copyToClipboard(e, text)}
       />
       {copied && (
-        <div className="absolute left-5 -top-2 px-2 p-1 rounded bg-gray-100 border border-gray-300">
+        <div className="absolute left-5 -top-2 px-2 p-1 rounded-sm bg-gray-100 border border-gray-300">
           kopiert
         </div>
       )}

frontend/components/lib/error.tsx

@@ -6,7 +6,7 @@ interface errorMessageProps {
 
 export const ErrorMessage = ({ error }: errorMessageProps) => {
   return (
-    <div className="bg-surface-danger-subtle rounded px-1 py-2 h-fit">
+    <div className="bg-surface-danger-subtle rounded-sm px-1 py-2 h-fit">
       <div className="flex items-center text-base gap-1">
         <XMarkOctagonFillIcon title="a11y-title" fontSize="1.5rem" color="#C30000" />
         Feil

frontend/components/lib/spinner.tsx

@@ -1,7 +1,7 @@
 import { Loader } from '@navikt/ds-react'
 
 export const LoaderSpinner = () => (
-  <div className="flex flex-grow justify-center items-center">
+  <div className="flex grow justify-center items-center">
     <Loader size="2xlarge" transparent />
   </div>
 )

frontend/components/productArea/sidebar.tsx

@@ -1,6 +1,5 @@
 import { BarChartIcon, SidebarLeftIcon } from '@navikt/aksel-icons'
 import { Select } from '@navikt/ds-react'
-import * as React from 'react'
 import { useState } from 'react'
 import { PAItems } from '../../pages/productArea/[id]'
 import DataproductLogo from '../lib/icons/dataproductLogo'

frontend/components/search/filtersList.tsx

@@ -23,7 +23,7 @@ const FilterPill = ({
       className={`${className || ''
         } svg-scale flex items-center gap-1 cursor-pointer text-xs p-2
       ${all
-          ? 'bg-surface-action text-text-on-inverted rounded-sm'
+          ? 'bg-surface-action text-text-on-inverted rounded-xs'
           : 'bg-gray-100 rounded-3xl'
         }
       ${all ? 'hover:bg-surface-action-hover' : 'hover:bg-gray-300'}`}

frontend/components/user/pendingAccessRequestBar.tsx

@@ -8,7 +8,7 @@ interface PendingAccessRequestBarProps {
 
 export const PendingAccessRequestBar = ({ accessRequest }: PendingAccessRequestBarProps) => {
     return (
-        <div key={accessRequest.id} className="w-[60rem] mb-5 mt-5 border pt-2 pb-2 pl-4 pr-4 flex flex-row justify-between rounded border-gray-200">
+        <div key={accessRequest.id} className="w-[60rem] mb-5 mt-5 border pt-2 pb-2 pl-4 pr-4 flex flex-row justify-between rounded-sm border-gray-200">
             <div>
                 <h3> <Link rel="norefferer" href={`/dataproduct/${accessRequest.dataproductID}/${accessRequest.dataproductSlug}/${accessRequest.datasetID}`}>
                     {`${accessRequest?.datasetName} - ${accessRequest?.dataproductName}`}

frontend/components/workstation/WorkstationStatus.tsx

@@ -119,22 +119,22 @@ const WorkstationStatus = ({ hasRunningJob }: WorkstationStatusProps) => {
                                     <List.Item title={"Logg inn i Google Cloud (kjøres lokalt)"}>
                                         <div className="flex">
                                             <code
-                                                className="rounded-sm bg-surface-neutral-subtle font-mono text-sm font-semibold">gcloud
+                                                className="rounded-xs bg-surface-neutral-subtle font-mono text-sm font-semibold">gcloud
                                                 auth login</code><CopyButton size="xsmall" copyText="gcloud auth login" />
                                         </div>
                                     </List.Item>
                                     <List.Item title={"Opprette SSH-tunnel (kjøres lokalt)"}>
                                         <div className="flex">
                                             <code
-                                                className="rounded-sm bg-surface-neutral-subtle px-1 py-05 font-mono text-sm font-semibold">
+                                                className="rounded-xs bg-surface-neutral-subtle px-1 py-05 font-mono text-sm font-semibold">
                                                 gcloud workstations start-tcp-tunnel --cluster=knada --config={workstation.data.slug} --region=europe-north1 --project knada-gcp --local-host-port=:33649 {workstation.data.slug} 22</code>
                                             <CopyButton size="xsmall" copyText={`gcloud workstations start-tcp-tunnel --cluster=knada --config=${workstation.data.slug} --region=europe-north1 --project knada-gcp --local-host-port=:33649 ${workstation.data.slug} 22`} />
                                         </div>
                                     </List.Item>
                                     <List.Item title={"Opprette SSH-nøkkel (kjøres lokalt, hopp over om du allerede har gjort dette)"}>
                                         <em>Sett et passord på SSH-nøkkelen. Du vil aldri bli bedt om å bytte dette.</em>
                                         <div className="flex">
-                                            <code className="rounded-sm bg-surface-neutral-subtle font-mono text-sm font-semibold">{`ssh-keygen -t ed25519 -C "[email protected]"`}</code><CopyButton size="xsmall" copyText={`ssh-keygen -t ed25519 -C "[email protected]"`}></CopyButton>
+                                            <code className="rounded-xs bg-surface-neutral-subtle font-mono text-sm font-semibold">{`ssh-keygen -t ed25519 -C "[email protected]"`}</code><CopyButton size="xsmall" copyText={`ssh-keygen -t ed25519 -C "[email protected]"`}></CopyButton>
                                         </div>
                                     </List.Item>
                                     <List.Item title={"Få Knast til å stole på din SSH-nøkkel (kjøres på Knast, hopp over om du allerede har gjort dette)"}>
@@ -148,7 +148,7 @@ const WorkstationStatus = ({ hasRunningJob }: WorkstationStatusProps) => {
                                     <List.Item title={"Legg til knast i ssh-configen (kjøres lokalt, hopp over om du allerede har gjort dette)"}>
                                         <div className="flex">
                                             <code
-                                                className="rounded-sm bg-surface-neutral-subtle font-mono text-sm font-semibold">{`echo -e "\\nHost knast\\n\\tHostName localhost\\n\\tPort 33649\\n\\tUser user\\n\\tUserKnownHostsFile /dev/null\\n\\tStrictHostKeyChecking no">>~/.ssh/config`}</code><CopyButton
+                                                className="rounded-xs bg-surface-neutral-subtle font-mono text-sm font-semibold">{`echo -e "\\nHost knast\\n\\tHostName localhost\\n\\tPort 33649\\n\\tUser user\\n\\tUserKnownHostsFile /dev/null\\n\\tStrictHostKeyChecking no">>~/.ssh/config`}</code><CopyButton
                                                     size="xsmall"
                                                     copyText={`echo -e "\\nHost knast\\n\\tHostName localhost\\n\\tPort 33649\\n\\tUser user\\n\\tUserKnownHostsFile /dev/null\\n\\tStrictHostKeyChecking no">>~/.ssh/config`}></CopyButton>
                                         </div>

frontend/components/workstation/formElements/machineTypeSelector.tsx

@@ -36,7 +36,7 @@ const MachineTypeSelector = (props: MachineTypeSelectorProps) => {
                     }
                     .machine-selector > .navds-radio-buttons > .navds-radio {
                         width: 50%;
-                        flex-grow: 1;
+                        grow: 1;
                     }`}
             </style>
         </RadioGroup>