Add loading indicator and fix some ui issues

netbirdio · Feb 16, 2024 · f1cd664 · f1cd664
1 parent 433bae0
commit f1cd664
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 22 deletions.
diff --git a/src/modules/access-control/AccessControlModal.tsx b/src/modules/access-control/AccessControlModal.tsx
@@ -113,7 +113,7 @@ export function AccessControlModalContent({
   policy,
   cell,
 }: ModalProps) {
-  const { data: allPostureChecks } =
+  const { data: allPostureChecks, isLoading: isPostureChecksLoading } =
     useFetchApi<PostureCheck[]>("/posture-checks");
 
   const { updatePolicy } = usePolicies();
@@ -405,6 +405,7 @@ export function AccessControlModalContent({
           </div>
         </TabsContent>
         <PostureCheckTab
+          isLoading={isPostureChecksLoading}
           postureChecks={postureChecks}
           setPostureChecks={setPostureChecks}
         />

diff --git a/src/modules/access-control/table/AccessControlPostureCheckCell.tsx b/src/modules/access-control/table/AccessControlPostureCheckCell.tsx
@@ -3,14 +3,13 @@ import { IconCirclePlus } from "@tabler/icons-react";
 import { ShieldCheck } from "lucide-react";
 import React from "react";
 import { Policy } from "@/interfaces/Policy";
-import EmptyRow from "@/modules/common-table-rows/EmptyRow";
 
 type Props = {
   policy: Policy;
 };
 export default function AccessControlPostureCheckCell({ policy }: Props) {
-  if (!policy.source_posture_checks) return <EmptyRow />;
-  return policy.source_posture_checks.length > 0 ? (
+  return policy.source_posture_checks &&
+    policy.source_posture_checks.length > 0 ? (
     <div className={"flex"}>
       <Badge variant={"gray"} useHover={true}>
         <ShieldCheck size={14} className={"text-green-500"} />

diff --git a/src/modules/posture-checks/checks/GeoLocationCheckCard.tsx b/src/modules/posture-checks/checks/GeoLocationCheckCard.tsx
@@ -40,6 +40,7 @@ export const GeoLocationCheckCard = ({ value, onChange }: Props) => {
       iconClass={"bg-gradient-to-tr from-indigo-500 to-indigo-400"}
       modalWidthClass={"max-w-2xl"}
       active={value ? value?.locations?.length > 0 : false}
+      onReset={() => onChange(undefined)}
     >
       <CheckContent
         value={value}
@@ -61,7 +62,7 @@ const CheckContent = ({ value, onChange }: Props) => {
       return {
         id: uniqueId("location"),
         country_code: l.country_code,
-        city_name: l.city_name,
+        city_name: l.city_name || "",
       };
     }) || [],
   );
@@ -123,7 +124,7 @@ const CheckContent = ({ value, onChange }: Props) => {
                   />
                   {location.country_code && (
                     <CitySelector
-                      value={location.city_name}
+                      value={location.city_name || ""}
                       onChange={(value) => {
                         updateLocation(location.id, {
                           ...location,

diff --git a/src/modules/posture-checks/checks/OperatingSystemCheck.tsx b/src/modules/posture-checks/checks/OperatingSystemCheck.tsx
@@ -44,6 +44,7 @@ export const OperatingSystemCheck = ({ value, onChange }: Props) => {
       }
       iconClass={"bg-gradient-to-tr from-nb-gray-500 to-nb-gray-300"}
       active={value !== undefined}
+      onReset={() => onChange(undefined)}
     >
       <CheckContent
         value={value}
@@ -93,16 +94,6 @@ const CheckContent = ({ value, onChange }: Props) => {
       : "-",
   );
 
-  console.log(
-    "CheckContent",
-    value,
-    windowsVersion,
-    macOSVersion,
-    androidVersion,
-    iOSVersion,
-    linuxVersion,
-  );
-
   return (
     <>
       <Tabs defaultValue={tab}>

diff --git a/src/modules/posture-checks/checks/OperatingSystemPostureCheck.tsx b/src/modules/posture-checks/checks/OperatingSystemPostureCheck.tsx
@@ -48,7 +48,13 @@ export const OperatingSystemPostureCheck = ({
   const [allOrMin, setAllOrMin] = useState(
     value == "" || value == "-" || value == "0" ? "all" : "min",
   );
-  const [useCustomVersion, setUseCustomVersion] = useState(false);
+  const [useCustomVersion, setUseCustomVersion] = useState(() => {
+    if (!versionList) return false;
+    if (!value) return false;
+    if (value === "-") return false;
+    const find = versionList.map((v) => v.value).includes(value);
+    return !find;
+  });
 
   const changeAllow = (value: string) => {
     setAllow(value);

diff --git a/src/modules/posture-checks/table/PostureCheckClientVersionCell.tsx b/src/modules/posture-checks/table/PostureCheckClientVersionCell.tsx
@@ -21,9 +21,10 @@ export const PostureCheckClientVersionCell = ({ check }: Props) => {
   const accessControlUsage = useMemo(() => {
     const checkId = check.id;
     if (!policies) return [];
-    return policies?.filter((policy) =>
-      policy.source_posture_checks.includes(checkId),
-    );
+    return policies?.filter((policy) => {
+      if (!policy.source_posture_checks) return false;
+      return policy.source_posture_checks.includes(checkId);
+    });
   }, [policies, check]);
 
   return (

diff --git a/src/modules/posture-checks/ui/PostureCheckTab.tsx b/src/modules/posture-checks/ui/PostureCheckTab.tsx
@@ -7,6 +7,7 @@ import { cn } from "@utils/helpers";
 import { FolderSearch, ShieldCheck } from "lucide-react";
 import * as React from "react";
 import { useState } from "react";
+import Skeleton from "react-loading-skeleton";
 import { PostureCheck } from "@/interfaces/PostureCheck";
 import { PostureCheckBrowseModal } from "@/modules/posture-checks/modal/PostureCheckBrowseModal";
 import PostureCheckModal from "@/modules/posture-checks/modal/PostureCheckModal";
@@ -16,6 +17,7 @@ import { PostureCheckIcons } from "@/modules/posture-checks/ui/PostureCheckIcons
 type Props = {
   postureChecks: PostureCheck[];
   setPostureChecks: React.Dispatch<React.SetStateAction<PostureCheck[]>>;
+  isLoading: boolean;
 };
 
 export const PostureChecksTabTrigger = () => {
@@ -27,7 +29,11 @@ export const PostureChecksTabTrigger = () => {
   );
 };
 
-export const PostureCheckTab = ({ postureChecks, setPostureChecks }: Props) => {
+export const PostureCheckTab = ({
+  postureChecks,
+  setPostureChecks,
+  isLoading,
+}: Props) => {
   const addPostureChecks = (checks: PostureCheck[]) => {
     setPostureChecks((prev) => {
       const previous = prev.map((check) => {
@@ -53,7 +59,17 @@ export const PostureCheckTab = ({ postureChecks, setPostureChecks }: Props) => {
   const [browseModal, setBrowseModal] = useState(false);
   const [currentEditCheck, setCurrentEditCheck] = useState<PostureCheck>();
 
-  return (
+  return isLoading ? (
+    <TabsContent
+      value={"posture_checks"}
+      className={"px-8 pb-8 mt-3 gap-2 flex flex-col"}
+    >
+      <Skeleton width={"100%"} height={41} />
+      <Skeleton width={"100%"} height={42} />
+      <Skeleton width={"100%"} height={42} />
+      <Skeleton width={"100%"} height={41} />
+    </TabsContent>
+  ) : (
     <TabsContent value={"posture_checks"} className={"px-8 pb-8 mt-3"}>
       {checkModal && (
         <PostureCheckModal