Informasjonsforvaltning · NilsOveTen · Apr 13, 2026 · Apr 8, 2026 · Apr 10, 2026 · Apr 13, 2026
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/data-source-item-editor/index.tsx b/src/components/data-source-item-editor/index.tsx
@@ -22,7 +22,7 @@ import withOrganizations from '../with-organizations';
 
 import * as OrganizationActions from '../with-organizations/redux/actions';
 
-interface FormValues extends Omit<DataSource, 'id'> {}
+interface FormValues extends Omit<DataSource, 'id' | 'active'> {}
 
 interface ExternalProps {
   dataSource?: Partial<DataSource>;
@@ -358,7 +358,11 @@ const formikConfig: WithFormikConfig<Props, FormValues> = {
   }),
   handleSubmit: (values, { props: { onSave, dataSource } }) =>
     onSave(
-      { id: dataSource?.id ?? '', ...values },
+      {
+        id: dataSource?.id ?? '',
+        active: dataSource?.active ?? true,
+        ...values
+      },
       dataSource?.publisherId ?? values.publisherId,
       !!dataSource
     ),

diff --git a/src/components/data-source-item/index.tsx b/src/components/data-source-item/index.tsx
@@ -1,9 +1,12 @@
-import React, { memo, FC } from 'react';
+import React, { memo, FC, useState } from 'react';
 import { compose } from 'redux';
 import { Variant } from '@fellesdatakatalog/button';
 import Link from '@fellesdatakatalog/link';
 import InfoIcon from '@material-ui/icons/Info';
 
+import PowerIcon from '@material-ui/icons/Power';
+import PowerOffIcon from '@material-ui/icons/PowerOff';
+import ConfirmDialog from '../confirm-dialog';
 import SC from './styled';
 
 import ConceptIcon from '../../images/concept-icon.svg';
@@ -30,6 +33,11 @@ interface Props {
   onDataSourceHarvestStatus: (id: string, organizationId: string) => void;
   onDataSourceItemEdit: (id: string, organizationId: string) => void;
   onDataSourceItemRemove: (id: string, organizationId: string) => void;
+  onDataSourceToggleActive: (
+    id: string,
+    organizationId: string,
+    currentlyActive: boolean
+  ) => void;
 }
 
 const DataSourceItem: FC<Props> = ({
@@ -39,15 +47,19 @@ const DataSourceItem: FC<Props> = ({
     url,
     acceptHeaderValue,
     description,
-    publisherId
+    publisherId,
+    active
   },
   organization,
   harvestStates,
   onDataSourceItemHarvest,
   onDataSourceHarvestStatus,
   onDataSourceItemEdit,
-  onDataSourceItemRemove
+  onDataSourceItemRemove,
+  onDataSourceToggleActive
 }) => {
+  const isActive = active !== false;
+  const [showActivateConfirm, setShowActivateConfirm] = useState(false);
   const DataSourceType = () => {
     switch (dataType) {
       case DataType.DATASET:
@@ -138,52 +150,87 @@ const DataSourceItem: FC<Props> = ({
   }
 
   const DatasetItemControls = () => (
-    <SC.DatasetItemControls>
-      {statusLabel && (
-        <SC.StatusBadge
+    <>
+      <SC.DatasetItemControls>
+        {statusLabel && isActive && (
+          <SC.StatusBadge
+            $dataType={dataType}
+            $hasError={!!displayState?.errorMessage}
+          >
+            {statusLabel}
+          </SC.StatusBadge>
+        )}
+        {isActive && (
+          <SC.HarvestButton
+            onClick={() => onDataSourceItemHarvest(id, publisherId)}
+            $dataType={dataType}
+          >
+            <ImportIcon />
+            Høst
+          </SC.HarvestButton>
+        )}
+        <SC.StatusButton
+          onClick={() => onDataSourceHarvestStatus(id, publisherId)}
+          variant={Variant.SECONDARY}
           $dataType={dataType}
-          $hasError={!!displayState?.errorMessage}
         >
-          {statusLabel}
-        </SC.StatusBadge>
+          <InfoIcon />
+          Status
+        </SC.StatusButton>
+        <SC.EditButton
+          onClick={() => onDataSourceItemEdit(id, publisherId)}
+          variant={Variant.SECONDARY}
+          $dataType={dataType}
+        >
+          <EditIcon />
+          Rediger
+        </SC.EditButton>
+        <SC.ActivateButton
+          onClick={() => setShowActivateConfirm(true)}
+          $dataType={dataType}
+        >
+          {isActive ? (
+            <>
+              <PowerOffIcon />
+              Deaktiver
+            </>
+          ) : (
+            <>
+              <PowerIcon />
+              Aktiver
+            </>
+          )}
+        </SC.ActivateButton>
+        <SC.TertiaryButton
+          onClick={() => onDataSourceItemRemove(id, publisherId)}
+          variant={Variant.TERTIARY}
+          $dataType={dataType}
+        >
+          <RemoveIcon />
+          Slett
+        </SC.TertiaryButton>
+      </SC.DatasetItemControls>
+      {showActivateConfirm && (
+        <ConfirmDialog
+          title={isActive ? 'Deaktiver datakilde' : 'Aktiver datakilde'}
+          text={
+            isActive
+              ? 'Er du sikker på at du vil deaktivere denne datakilden? Høsting vil stoppe inntil den aktiveres igjen.'
+              : 'Er du sikker på at du vil aktivere denne datakilden? Høsting vil gjenopptas.'
+          }
+          confirmLabel={isActive ? 'Deaktiver' : 'Aktiver'}
+          onConfirm={() => {
+            setShowActivateConfirm(false);
+            onDataSourceToggleActive(id, publisherId, isActive);
+          }}
+          onCancel={() => setShowActivateConfirm(false)}
+        />
       )}
-      <SC.HarvestButton
-        onClick={() => onDataSourceItemHarvest(id, publisherId)}
-        $dataType={dataType}
-      >
-        <ImportIcon />
-        Høst
-      </SC.HarvestButton>
-      <SC.StatusButton
-        onClick={() => onDataSourceHarvestStatus(id, publisherId)}
-        variant={Variant.SECONDARY}
-        $dataType={dataType}
-      >
-        <InfoIcon />
-        Status
-      </SC.StatusButton>
-      <SC.EditButton
-        onClick={() => onDataSourceItemEdit(id, publisherId)}
-        variant={Variant.SECONDARY}
-        $dataType={dataType}
-      >
-        <EditIcon />
-        Rediger
-      </SC.EditButton>
-
-      <SC.TertiaryButton
-        onClick={() => onDataSourceItemRemove(id, publisherId)}
-        variant={Variant.TERTIARY}
-        $dataType={dataType}
-      >
-        <RemoveIcon />
-        Slett
-      </SC.TertiaryButton>
-    </SC.DatasetItemControls>
+    </>
   );
 
   return (
-    <SC.DataSourceItem>
+    <SC.DataSourceItem $inactive={!isActive}>
       <div>
         <DataSourceType />
         <SC.DataSourceDetails>

diff --git a/src/components/data-source-item/styled.ts b/src/components/data-source-item/styled.ts
@@ -8,9 +8,11 @@ import { DataType } from '../../types/enums';
 interface Props {
   $dataType?: DataType | null;
   $hasError?: boolean;
+  $inactive?: boolean;
 }
 
-const DataSourceItem = styled.li`
+const DataSourceItem = styled.li<Props>`
+  position: relative;
   display: flex;
   align-items: center;
   min-height: 170px;
@@ -22,6 +24,19 @@ const DataSourceItem = styled.li`
   :nth-of-type(n + 2) {
     margin-top: 15px;
   }
+
+  ${({ $inactive }) =>
+    $inactive &&
+    css`
+      &::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: rgba(255, 255, 255, 0.45);
+        border-radius: 5px;
+        pointer-events: none;
+      }
+    `}
 `;
 
 const DataSourceType = styled.div<Props>`
@@ -516,6 +531,78 @@ const TertiaryButton = styled(ButtonBase)<Props>`
   }
 `;
 
+const ActivateButton = styled(SecondaryButton)<Props>`
+  position: relative;
+  z-index: 1;
+
+  ${({ $dataType }) => {
+    switch ($dataType) {
+      case DataType.CONCEPT:
+        return css`
+          background: #d5edf2;
+          color: #2e6773;
+          & > svg > path {
+            fill: #2e6773;
+          }
+        `;
+      case DataType.DATASERVICE:
+        return css`
+          background: #f2e1d5;
+          color: #805333;
+          & > svg > path {
+            fill: #805333;
+          }
+        `;
+      case DataType.DATASET:
+        return css`
+          background: #d5e1f2;
+          color: #335380;
+          & > svg > path {
+            fill: #335380;
+          }
+        `;
+      case DataType.INFORMATION_MODEL:
+        return css`
+          background: #e4d5f2;
+          color: #593380;
+          & > svg > path {
+            fill: #593380;
+          }
+        `;
+      case DataType.PUBLIC_SERVICE:
+        return css`
+          background: #f2d5e1;
+          color: #803353;
+          & > svg > path {
+            fill: #803353;
+          }
+        `;
+      default:
+        return css``;
+    }
+  }};
+
+  &:hover,
+  &:focus {
+    color: ${theme.colour(Colour.NEUTRAL, 'N0')};
+    & > svg > path {
+      fill: ${theme.colour(Colour.NEUTRAL, 'N0')};
+    }
+  }
+`;
+
+const InactiveBadge = styled.span`
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 10px;
+  border-radius: 4px;
+  font-size: ${theme.fontSize('FS14')};
+  font-weight: ${theme.fontWeight('FW500')};
+  margin-right: 10px;
+  background: #fff3e0;
+  color: #e65100;
+`;
+
 export default {
   DataSourceItem,
   DataSourceType,
@@ -530,5 +617,7 @@ export default {
   HarvestButton,
   EditButton,
   ValidateLink,
-  TertiaryButton
+  TertiaryButton,
+  ActivateButton,
+  InactiveBadge
 };