Refaktorering av strukturen i ThreatActor

frontend/src/api/graphql.ts

@@ -36,4 +36,4 @@ export async function graphqlRequest<T>(
   }
 
   return result.data;
-}
+}

frontend/src/api/graphqlUrl.ts

@@ -3,4 +3,4 @@ const defaultGraphqlUrl = import.meta.env.DEV
   : "/graphql";
 
 export const GRAPHQL_URL =
-  import.meta.env.VITE_GRAPHQL_URL || defaultGraphqlUrl;
+  import.meta.env.VITE_GRAPHQL_URL || defaultGraphqlUrl;

frontend/src/apollo/client.ts

@@ -1,14 +1,9 @@
-import {
-  ApolloClient,
-  InMemoryCache,
-  HttpLink,
-} from "@apollo/client";
+import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client";
 import { GRAPHQL_URL } from "../api/graphqlUrl";
 
-export const apolloClient =
-  new ApolloClient({
-    link: new HttpLink({
-      uri: GRAPHQL_URL,
-    }),
-    cache: new InMemoryCache(),
-  });
+export const apolloClient = new ApolloClient({
+  link: new HttpLink({
+    uri: GRAPHQL_URL,
+  }),
+  cache: new InMemoryCache(),
+});

frontend/src/components/common/FeedBack/FeedbackCard.css

@@ -0,0 +1,56 @@
+.feedback-card {
+  min-height: 220px;
+  padding: 32px 20px;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+
+  text-align: center;
+
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+}
+
+.feedback-card > svg {
+  color: var(--accent);
+}
+
+.feedback-card--error {
+  border-color: #78424c;
+}
+
+.feedback-card--error > svg {
+  color: #fb7185;
+}
+
+.feedback-card h2 {
+  margin: 0;
+  color: var(--text-heading);
+  font-size: 20px;
+}
+
+.feedback-card p {
+  margin: 0;
+  color: var(--text);
+  font-size: 14px;
+}
+
+.feedback-spinner {
+  animation: feedback-spin 1s linear infinite;
+}
+
+@keyframes feedback-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .feedback-spinner {
+    animation: none;
+  }
+}

frontend/src/components/common/FeedBack/FeedbackCard.tsx

@@ -0,0 +1,37 @@
+import { AlertCircle, LoaderCircle, SearchX } from "lucide-react";
+import "./FeedbackCard.css";
+
+type FeedbackCardProps = {
+  variant: "loading" | "error" | "empty";
+  title: string;
+  message?: string;
+};
+
+function FeedbackCard({ variant, title, message }: FeedbackCardProps) {
+  const icons = {
+    loading: LoaderCircle,
+    error: AlertCircle,
+    empty: SearchX,
+  };
+
+  const Icon = icons[variant];
+
+  return (
+    <section
+      className={`feedback-card feedback-card--${variant}`}
+      role={variant === "error" ? "alert" : "status"}
+    >
+      <Icon
+        size={34}
+        aria-hidden="true"
+        className={variant === "loading" ? "feedback-spinner" : ""}
+      />
+
+      <h2>{title}</h2>
+
+      {message && <p>{message}</p>}
+    </section>
+  );
+}
+
+export default FeedbackCard;

frontend/src/components/layout/AppLayout.css → frontend/src/components/common/Layout/AppLayout.css

@@ -20,4 +20,4 @@
   .page-content {
     padding: 20px;
   }
-}
+}

frontend/src/components/layout/AppLayout.tsx → frontend/src/components/common/Layout/AppLayout.tsx

@@ -4,12 +4,12 @@ import SideBar from "./sidebar/SideBar";
 import "./AppLayout.css";
 
 /**
- * 
+ *
  * Definerer felles layot som brukes av alle pages på nettsiden.
- * 
- * Layoten består av en Header og en Sidebar. Det aktive page innholdet rendres 
- * inne i <Outlet />, bassert på hvilken Routte brukeren er på nå . 
- * 
+ *
+ * Layoten består av en Header og en Sidebar. Det aktive page innholdet rendres
+ * inne i <Outlet />, bassert på hvilken Routte brukeren er på nå .
+ *
  * På denne måten kan Header og Sidebar gjenbrukes på tvers av alle sider uten at de må
  * importeres og rendres separat i hver page-komponent.
  */
@@ -29,4 +29,4 @@ function AppLayout() {
   );
 }
 
-export default AppLayout;
+export default AppLayout;

frontend/src/components/layout/header/Header.css → frontend/src/components/common/Layout/header/Header.css

@@ -209,4 +209,4 @@
     width: 19px;
     height: 19px;
   }
-}
+}

frontend/src/components/layout/header/Header.tsx → frontend/src/components/common/Layout/header/Header.tsx

@@ -1,13 +1,20 @@
 import { NavLink } from "react-router-dom";
-import {Bookmark, Crosshair,Home, Settings,Shield,Users,Database, UserRound} from "lucide-react";
+import {
+  Bookmark,
+  Crosshair,
+  Home,
+  Settings,
+  Shield,
+  Users,
+  Database,
+  UserRound,
+} from "lucide-react";
 import "./Header.css";
 
-
-
 /**
  * Header inneholder logoen CyberThreats, med NavLink for å sende til HomePage,
  * samt link til MITRE for å sjekke ut datakilden, samt en profil-knapp
- * 
+ *
  * Siden inneholder også en media-query for som viser sidebar navigasjon-icons ved mindre skjærmer
  */
 function Header() {
@@ -44,16 +51,23 @@ function Header() {
       </nav>
 
       <nav className="header-nav" aria-label="Top navigation">
-        <a href="https://github.com/mitre-attack/attack-stix-data/blob/master/README.md" target="_blank" rel="noreferrer"aria-label="Data Source" className="data-source-link">
+        <a
+          href="https://github.com/mitre-attack/attack-stix-data/blob/master/README.md"
+          target="_blank"
+          rel="noreferrer"
+          aria-label="Data Source"
+          className="data-source-link"
+        >
           <span className="data-source-text">Data Source</span>
           <Database className="data-source-icon" />
         </a>
 
-        <button className="profile-button" type="button" aria-label="Profile"><UserRound /></button>
+        <button className="profile-button" type="button" aria-label="Profile">
+          <UserRound />
+        </button>
       </nav>
     </header>
   );
 }
 
 export default Header;
-

frontend/src/components/layout/sidebar/SideBar.tsx → frontend/src/components/common/Layout/sidebar/SideBar.tsx

@@ -1,15 +1,22 @@
-import {Bookmark,Crosshair,Home,Settings,Shield,Users} from "lucide-react";
+import {
+  Bookmark,
+  Crosshair,
+  Home,
+  Settings,
+  Shield,
+  Users,
+} from "lucide-react";
 import { NavLink } from "react-router-dom";
 import "./SideBar.css";
 
 /**
  * Oppretter sidebar navigasjon på nettsiden
- * 
+ *
  * Tilbyr navigasjons lenker til ulike pages via React Router NavLink.
- * 
+ *
  * På mindre skjærmer er sidebar skjult gjennom media-query, og icons fra NavLinks
  * blir istedet vist i header.tsx componenten. Responsiv design
- * 
+ *
  */
 function SideBar() {
   return (
@@ -49,4 +56,4 @@ function SideBar() {
   );
 }
 
-export default SideBar;
+export default SideBar;

frontend/src/components/common/Navigation/BackButton.css

@@ -0,0 +1,26 @@
+.back-navigation {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  width: fit-content;
+
+  padding: 0;
+  border: none;
+  background: none;
+
+  color: var(--accent);
+  font: inherit;
+  font-size: 14px;
+  font-weight: 600;
+
+  cursor: pointer;
+}
+
+.back-navigation:hover {
+  text-decoration: underline;
+}
+
+.back-navigation:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 4px;
+}