implementerer NesteSteg i tidslinje

bruker.graphql

@@ -81,6 +81,7 @@ type Sak {
     """
     frister: [ISO8601Date]!
     oppgaver: [OppgaveMetadata!]!
+    nesteSteg: String
 
     tidslinje: [TidslinjeElement!]!
 }
@@ -198,6 +199,7 @@ type Kalenderavtale {
     digitalt: Boolean
     opprettetTidspunkt: ISO8601DateTime!
     sorteringTidspunkt: ISO8601DateTime!
+    paaminnelseTidspunkt: ISO8601DateTime
     id: ID!
     virksomhet: Virksomhet!
     sak: SakMetadata

src/Pages/Saksoversikt/OppgaveBeskjedIkoner.tsx

@@ -60,6 +60,13 @@ export const BeskjedIkon = () => (
     </svg>
 );
 
+export const NesteStegIkon = ({ title }: { title: string }) => (
+    <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <title>{title}</title>
+        <circle cx="13" cy="13" r="9.5" stroke="black" stroke-dasharray="2 2" />
+    </svg>
+);
+
 export const KalenderavtaleIkonBlå = ({ title }: { title: string }) => (
     <svg
         width="24"

src/Pages/Saksoversikt/SakPanel.tsx

@@ -5,6 +5,7 @@ import {
     BeskjedIkon,
     KalenderavtaleIkonBlå,
     KalenderavtaleIkonGrå,
+    NesteStegIkon,
     NyOppgaveIkon,
     OppgaveUtfortIkon,
     TidslinjeLinjeIkon,
@@ -44,13 +45,13 @@ export const SakPanel = ({
     placeholder,
     tvingEkspander = false,
     lenkeTilSak = true,
-    sak: { id, lenke, tittel, merkelapp, virksomhet, sisteStatus, tidslinje },
+    sak: { id, lenke, tittel, merkelapp, virksomhet, sisteStatus, tidslinje, nesteSteg },
 }: SakPanelProps) => {
     const fake = placeholder ?? false;
     const style: React.CSSProperties = fake ? { visibility: 'hidden' } : {};
 
     const [tidslinjeOpen, setTidslinjeOpen] = useState(tvingEkspander);
-
+    const nesteStegTekst = nesteSteg ?? undefined;
     return (
         <div className="sakscontainer">
             <BodyShort size="small" style={style}>
@@ -78,6 +79,13 @@ export const SakPanel = ({
                 ) : null}
             </div>
             <div>
+                {nesteStegTekst !== undefined && (
+                    <NesteSteg
+                        nesteStegTekst={nesteStegTekst}
+                        apen={tidslinjeOpen}
+                        tidslinjeLengde={tidslinje.length}
+                    />
+                )}
                 {tidslinje.map((tidslinjeelement, i) => (
                     <Tidslinjeelement
                         key={tidslinjeelement.id}
@@ -86,6 +94,7 @@ export const SakPanel = ({
                         apen={tidslinjeOpen}
                         antall={tidslinje.length}
                         tidslinjeOpen={tidslinjeOpen}
+                        nesteSteg={nesteStegTekst}
                     />
                 ))}
             </div>
@@ -109,12 +118,33 @@ export const SakPanel = ({
     );
 };
 
+type NesteStegProps = {
+    nesteStegTekst?: string;
+    tidslinjeLengde: number;
+    apen: boolean;
+};
+
+const NesteSteg = ({ nesteStegTekst, tidslinjeLengde, apen }: NesteStegProps) => {
+    return (
+        <div className="neste_steg">
+            <div style={{ gridArea: 'ikon' }}>
+                <NesteStegIkon title="Neste steg" />
+            </div>
+            <div style={{ gridArea: 'linje', marginLeft: '1px' }}>
+                {apen && tidslinjeLengde > 0 ? <TidslinjeLinjeIkonKort /> : null}
+            </div>
+            <BodyShort style={{ gridArea: 'tittel' }}>{nesteStegTekst}</BodyShort>
+        </div>
+    );
+};
+
 type TidslinjeelementHelperProps = {
     tidslinjeelement: TidslinjeElement;
     indeks: number;
     apen: boolean;
     antall: number;
     tidslinjeOpen: boolean;
+    nesteSteg?: string;
 };
 
 type TidslinjeelementProps = {
@@ -129,8 +159,9 @@ const Tidslinjeelement = ({
     apen,
     antall,
     tidslinjeOpen,
+    nesteSteg,
 }: TidslinjeelementHelperProps) => {
-    if (!apen && indeks > 0) return null;
+    if (!apen && (indeks > 0 || nesteSteg !== undefined)) return null;
     if (tidslinjeelement.__typename === 'BeskjedTidslinjeElement') {
         return (
             <BeskjedElement

src/Pages/Saksoversikt/SaksListe.css

@@ -51,6 +51,17 @@ ul.saks-liste .sakscontainer .sakstittel {
   font-weight: 700;
 }
 
+.sakscontainer .neste_steg {
+  display: grid;
+  grid-template-columns: 24px auto;
+  grid-template-rows: repeat(2, auto);
+  grid-template-areas:
+  "ikon tittel"
+  "linje tittel"
+  "linje none";
+  column-gap: 8px;
+}
+
 .sakscontainer .tidslinje-element {
   display: grid;
   grid-template-columns: 24px auto;

src/Pages/Saksoversikt/useSaker.tsx

@@ -45,6 +45,7 @@ const HENT_SAKER: TypedDocumentNode<SakerResultat> = gql`
                     tekst
                     tidspunkt
                 }
+                nesteSteg
                 tidslinje {
                     __typename
                     ... on OppgaveTidslinjeElement {

src/api/graphql-types.ts

@@ -50,6 +50,7 @@ export type Kalenderavtale = {
   lokasjon?: Maybe<Lokasjon>;
   merkelapp: Scalars['String'];
   opprettetTidspunkt: Scalars['ISO8601DateTime'];
+  paaminnelseTidspunkt?: Maybe<Scalars['ISO8601DateTime']>;
   sak?: Maybe<SakMetadata>;
   sluttTidspunkt?: Maybe<Scalars['ISO8601DateTime']>;
   sorteringTidspunkt: Scalars['ISO8601DateTime'];
@@ -208,6 +209,7 @@ export type Sak = {
   id: Scalars['ID'];
   lenke?: Maybe<Scalars['String']>;
   merkelapp: Scalars['String'];
+  nesteSteg?: Maybe<Scalars['String']>;
   oppgaver: Array<OppgaveMetadata>;
   sisteStatus: SakStatus;
   tidslinje: Array<TidslinjeElement>;