Remove integrations from public repo and sync changes (#369)

* Change icon size

* Remove integrations

* Add no cache header

* Add analytics event tracking

* Add small announcement improvements

* Remove peer approval setting

* Do not load countries when user has no permission

* Add tab query params to settings

* Decrease navigation font size

* Change order of providers

* Increase padding for modals

* Show page only when user is fully loaded and found

* Remove unused state

* Remove integrations page

Author: heisbrot

docker/default.conf

@@ -1,4 +1,3 @@
-# simple server configuration to replace nginx's default
 server {
 	listen 80 default_server;
 	listen [::]:80 default_server;
@@ -7,10 +6,14 @@ server {
 
     location / {
       try_files $uri $uri.html $uri/ =404;
+      add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
+      expires off;
    }
 
    error_page 404 /404.html;
    location = /404.html {
       internal;
+      add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
+      expires off;
    }
 }

src/app/(dashboard)/activity/page.tsx

@@ -5,14 +5,12 @@ import InlineLink from "@components/InlineLink";
 import Paragraph from "@components/Paragraph";
 import { RestrictedAccess } from "@components/ui/RestrictedAccess";
 import useFetchApi from "@utils/api";
-import { isLocalDev, isNetBirdHosted } from "@utils/netbird";
 import { ExternalLinkIcon } from "lucide-react";
 import React from "react";
 import ActivityIcon from "@/assets/icons/ActivityIcon";
 import { ActivityEvent } from "@/interfaces/ActivityEvent";
 import PageContainer from "@/layouts/PageContainer";
 import ActivityTable from "@/modules/activity/ActivityTable";
-import { EventStreamingCard } from "@/modules/integrations/event-streaming/EventStreamingCard";
 
 export default function Activity() {
   const { data: events, isLoading } = useFetchApi<ActivityEvent[]>("/events");
@@ -50,7 +48,6 @@ export default function Activity() {
         </Paragraph>
       </div>
       <RestrictedAccess page={"Activity"}>
-        {(isLocalDev() || isNetBirdHosted()) && <EventStreamingCard />}
         <ActivityTable events={events} isLoading={isLoading} />
       </RestrictedAccess>
     </PageContainer>

src/app/(dashboard)/integrations/layout.tsx

@@ -8,7 +8,8 @@ import {
   LockIcon,
   ShieldIcon,
 } from "lucide-react";
-import React, { useState } from "react";
+import { useSearchParams } from "next/navigation";
+import React, { useEffect, useState } from "react";
 import { useLoggedInUser } from "@/contexts/UsersProvider";
 import PageContainer from "@/layouts/PageContainer";
 import { useAccount } from "@/modules/account/useAccount";
@@ -18,10 +19,18 @@ import GroupsTab from "@/modules/settings/GroupsTab";
 import PermissionsTab from "@/modules/settings/PermissionsTab";
 
 export default function NetBirdSettings() {
-  const [tab, setTab] = useState("authentication");
+  const queryParams = useSearchParams();
+  const queryTab = queryParams.get("tab");
+  const [tab, setTab] = useState(queryTab || "authentication");
   const { isOwner } = useLoggedInUser();
   const account = useAccount();
 
+  useEffect(() => {
+    if (queryTab) {
+      setTab(queryTab);
+    }
+  }, [queryTab]);
+
   return (
     <PageContainer>
       <VerticalTabs value={tab} onChange={setTab}>

src/app/(dashboard)/integrations/page.tsx

@@ -5,7 +5,7 @@ export type IconProps = {
 };
 
 export const defaultIconProps: IconProps = {
-  size: 16,
+  size: 15,
   className:
     "dark:fill-nb-gray-400 fill-gray-500 peer-data-[active=true]/icon:dark:fill-white peer-data-[active=true]/icon:fill-gray-900 shrink-0",
   autoHeight: false,

src/app/(dashboard)/settings/page.tsx

@@ -60,7 +60,7 @@ export default function SidebarItem({
         <li className={"px-4 cursor-pointer"}>
           <button
             className={classNames(
-              "rounded-lg text-base w-full ",
+              "rounded-lg text-[.95rem] w-full ",
               "font-normal ",
               className,
               isChild ? "pl-7 pr-2 py-2 mt-1 mb-0.5" : "py-2 px-3",

src/assets/icons/IconProperties.tsx

@@ -19,6 +19,7 @@ const AnalyticsContext = React.createContext(
   {} as {
     initialized: boolean;
     trackPageView: () => void;
+    trackEvent: (category: string, action: string, label: string) => void;
   },
 );
 const config = loadConfig();
@@ -51,8 +52,20 @@ export default function AnalyticsProvider({ children }: Props) {
     ReactGA.send({ hitType: "pageview", page: path, title: document.title });
   };
 
+  const trackEvent = (category: string, action: string, label: string) => {
+    if (isProduction() && ReactGA.isInitialized) {
+      ReactGA.event({
+        category: category,
+        action: action,
+        label: label,
+      });
+    }
+  };
+
   return (
-    <AnalyticsContext.Provider value={{ initialized, trackPageView }}>
+    <AnalyticsContext.Provider
+      value={{ initialized, trackPageView, trackEvent }}
+    >
       {children}
     </AnalyticsContext.Provider>
   );

src/components/SidebarItem.tsx

@@ -13,6 +13,7 @@ export interface Announcement extends AnnouncementVariant {
   linkText?: string;
   isExternal?: boolean;
   closeable: boolean;
+  isCloudOnly: boolean;
 }
 
 interface AnnouncementInfo extends Announcement {
@@ -29,6 +30,9 @@ const AnnouncementContext = React.createContext(
     bannerHeight: number;
     announcements?: AnnouncementInfo[];
     closeAnnouncement: (hash: string) => void;
+    setAnnouncements: React.Dispatch<
+      React.SetStateAction<AnnouncementInfo[] | undefined>
+    >;
   },
 );
 
@@ -43,6 +47,7 @@ export default function AnnouncementProvider({ children }: Props) {
   const { permission } = useLoggedInUser();
 
   useEffect(() => {
+    if (announcements && announcements.length > 0) return;
     if (permission?.dashboard_view === "blocked") return;
     const initial = initialAnnouncements.map((announcement) => {
       const hash = md5(announcement.text).toString();
@@ -51,12 +56,12 @@ export default function AnnouncementProvider({ children }: Props) {
         ...announcement,
         hash,
         isOpen,
-      };
+      } as AnnouncementInfo;
     });
     if (initial.length > 0) {
       setAnnouncements(initial);
     }
-  }, [closedAnnouncements]);
+  }, [closedAnnouncements, announcements]);
 
   const closeAnnouncement = (hash: string) => {
     setClosedAnnouncements([...closedAnnouncements, hash]);
@@ -81,7 +86,12 @@ export default function AnnouncementProvider({ children }: Props) {
 
   return (
     <AnnouncementContext.Provider
-      value={{ bannerHeight: height, announcements, closeAnnouncement }}
+      value={{
+        bannerHeight: height,
+        announcements,
+        closeAnnouncement,
+        setAnnouncements,
+      }}
     >
       {children}
     </AnnouncementContext.Provider>

src/contexts/AnalyticsProvider.tsx

@@ -17,11 +17,11 @@ const CountryContext = React.createContext(
 );
 
 export default function CountryProvider({ children }: Props) {
-  const { isUser } = useLoggedInUser();
+  const { permission } = useLoggedInUser();
 
   const getRegionByPeer = (peer: Peer) => "Unknown";
 
-  return isUser ? (
+  return permission?.dashboard_view != "full" ? (
     <CountryContext.Provider
       value={{ countries: [], isLoading: false, getRegionByPeer }}
     >
@@ -35,7 +35,7 @@ export default function CountryProvider({ children }: Props) {
 function CountryProviderContent({ children }: Props) {
   const { data: countries, isLoading } = useFetchApi<Country[]>(
     "/locations/countries",
-    false,
+    true,
     false,
   );