Merge pull request #707 from tailwarden/develop

v3.0.11 release 🚀

dashboard/components/dashboard/components/cloud-map/DashboardCloudMapError.tsx

@@ -39,7 +39,7 @@ function DashboardCloudMapError({ fetch }: DashboardCloudMapErrorProps) {
       <div className="mt-8"></div>
       <div className="-mx-6 -ml-20 min-w-full">
         <picture>
-          <img src="/assets/img/others/world.svg" alt="world map" />
+          <img src="/assets/img/others/world.svg" alt="" />
         </picture>
       </div>
       <div className="mt-12"></div>

dashboard/components/inventory/components/filter/InventoryFilter.tsx

@@ -125,6 +125,8 @@ function InventoryFilter({
                         data &&
                         data.operator !== 'IS_EMPTY' &&
                         data.operator !== 'IS_NOT_EMPTY' &&
+                        data.operator !== 'EXISTS' &&
+                        data.operator !== 'NOT_EXISTS' &&
                         data.values &&
                         data.values.length === 0
                       }

dashboard/components/inventory/components/filter/InventoryFilterOperator.tsx

@@ -22,6 +22,12 @@ const inventoryFilterOperatorOptions: InventoryFilterOperatorOptionsProps[] = [
   { label: 'is not empty', value: 'IS_NOT_EMPTY' }
 ];
 
+const inventoryFilterOperatorSpecificTagsOptions: InventoryFilterOperatorOptionsProps[] =
+  [
+    { label: 'does exist', value: 'EXISTS' },
+    { label: 'does not exist', value: 'NOT_EXISTS' }
+  ];
+
 const inventoryFilterOperatorAllTagsOptions: InventoryFilterOperatorOptionsProps[] =
   [
     { label: 'which are empty', value: 'IS_EMPTY' },
@@ -88,6 +94,23 @@ function InventoryFilterOperator({
           </Button>
         ))}
 
+      {/* Operators list for specific tags */}
+      {data.field === 'tag' &&
+        inventoryFilterOperatorSpecificTagsOptions.map((option, idx) => (
+          <Button
+            key={idx}
+            size="sm"
+            style="ghost"
+            align="left"
+            gap="md"
+            transition={false}
+            disabled={data.field === 'tag' && !data.tagKey}
+            onClick={() => handleOperator(option.value)}
+          >
+            {option.label}
+          </Button>
+        ))}
+
       {/* Operators list for tags */}
       {data.field === 'tags' &&
         inventoryFilterOperatorAllTagsOptions.map((option, idx) => (

dashboard/components/inventory/components/filter/InventoryFilterSummary.tsx

@@ -42,6 +42,8 @@ function InventoryFilterSummary({
     if (param === 'BETWEEN') return 'is between';
     if (param === 'GREATER_THAN') return 'is greater than';
     if (param === 'LESS_THAN') return 'is less than';
+    if (param === 'EXISTS') return 'does exist';
+    if (param === 'NOT_EXISTS') return 'does not exist';
     return param;
   }
 

dashboard/components/inventory/components/filter/InventoryFilterValue.tsx

@@ -33,80 +33,71 @@ function InventoryFilterValue({
   const [options, setOptions] = useState<Options | undefined>();
 
   useEffect(() => {
-    let mounted = true;
-
-    if (data.operator === 'IS_EMPTY' || data.operator === 'IS_NOT_EMPTY') {
+    if (
+      data.operator === 'IS_EMPTY' ||
+      data.operator === 'IS_NOT_EMPTY' ||
+      data.operator === 'EXISTS' ||
+      data.operator === 'NOT_EXISTS'
+    ) {
       cleanValues();
       setOptions(undefined);
     } else {
       if (data.field === 'provider') {
         settingsService.getProviders().then(res => {
-          if (mounted) {
-            if (res === Error) {
-              setToast({
-                hasError: true,
-                title: `There was an error when fetching the cloud providers`,
-                message: `Please refresh the page and try again.`
-              });
-            } else {
-              setOptions(res);
-            }
+          if (res === Error) {
+            setToast({
+              hasError: true,
+              title: `There was an error when fetching the cloud providers`,
+              message: `Please refresh the page and try again.`
+            });
+          } else {
+            setOptions(res);
           }
         });
       }
 
       if (data.field === 'account') {
         settingsService.getAccounts().then(res => {
-          if (mounted) {
-            if (res === Error) {
-              setToast({
-                hasError: true,
-                title: `There was an error when fetching the cloud accounts`,
-                message: `Please refresh the page and try again.`
-              });
-            } else {
-              setOptions(res);
-            }
+          if (res === Error) {
+            setToast({
+              hasError: true,
+              title: `There was an error when fetching the cloud accounts`,
+              message: `Please refresh the page and try again.`
+            });
+          } else {
+            setOptions(res);
           }
         });
       }
 
       if (data.field === 'region') {
         settingsService.getRegions().then(res => {
-          if (mounted) {
-            if (res === Error) {
-              setToast({
-                hasError: true,
-                title: `There was an error when fetching the cloud regions`,
-                message: `Please refresh the page and try again.`
-              });
-            } else {
-              setOptions(res);
-            }
+          if (res === Error) {
+            setToast({
+              hasError: true,
+              title: `There was an error when fetching the cloud regions`,
+              message: `Please refresh the page and try again.`
+            });
+          } else {
+            setOptions(res);
           }
         });
       }
 
       if (data.field === 'service') {
         settingsService.getServices().then(res => {
-          if (mounted) {
-            if (res === Error) {
-              setToast({
-                hasError: true,
-                title: `There was an error when fetching the cloud services`,
-                message: `Please refresh the page and try again.`
-              });
-            } else {
-              setOptions(res);
-            }
+          if (res === Error) {
+            setToast({
+              hasError: true,
+              title: `There was an error when fetching the cloud services`,
+              message: `Please refresh the page and try again.`
+            });
+          } else {
+            setOptions(res);
           }
         });
       }
     }
-
-    return () => {
-      mounted = false;
-    };
   }, []);
 
   return (
@@ -131,7 +122,9 @@ function InventoryFilterValue({
       {!options &&
         data.field !== 'cost' &&
         data.operator !== 'IS_EMPTY' &&
-        data.operator !== 'IS_NOT_EMPTY' && (
+        data.operator !== 'IS_NOT_EMPTY' &&
+        data.operator !== 'EXISTS' &&
+        data.operator !== 'NOT_EXISTS' && (
           <div className="pl-1 pt-2 pr-4 pb-2">
             <Input
               type="text"

dashboard/components/inventory/hooks/useInventory/helpers/parseURLParams.ts

@@ -32,7 +32,9 @@ function parseURLParams(
     if (formatString.length > 2) {
       if (
         formatString.indexOf('IS_EMPTY') !== -1 ||
-        formatString.indexOf('IS_NOT_EMPTY') !== -1
+        formatString.indexOf('IS_NOT_EMPTY') !== -1 ||
+        formatString.indexOf('EXISTS') !== -1 ||
+        formatString.indexOf('NOT_EXISTS') !== -1
       ) {
         const key = formatString.slice(1, formatString.length - 1).join(':');
 

dashboard/components/layout/Layout.tsx

@@ -66,7 +66,7 @@ function Layout({ children }: LayoutProps) {
             message="It seems you have not connected a cloud account to Komiser. Connect one right now so you can start managing it from your dashboard"
             action={() => {
               router.push(
-                'https://docs.komiser.io/docs/overview/introduction/getting-started/'
+                'https://docs.komiser.io/docs/introduction/getting-started#self-hosted'
               );
             }}
             actionLabel="Guide to connect account"

dashboard/components/select/Select.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import classNames from 'classnames';
+import ChevronDownIcon from '../icons/ChevronDownIcon';
 
 export type SelectProps = {
   label: string;
@@ -29,27 +30,12 @@ function Select({
         className="pointer-events-none absolute right-4
         bottom-[1.15rem] text-black-900 transition-all"
       >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          fill="none"
-          viewBox="0 0 24 24"
-        >
-          <path
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeMiterlimit="10"
-            strokeWidth="1.5"
-            d="M19.92 8.95l-6.52 6.52c-.77.77-2.03.77-2.8 0L4.08 8.95"
-          ></path>
-        </svg>
+        <ChevronDownIcon width={24} height={24} />
       </div>
       <button
         onClick={toggle}
         className={classNames(
-          'h-[60px] w-full overflow-hidden rounded text-left outline outline-black-200/50 hover:outline-black-200 focus:outline-2 focus:outline-primary',
+          'h-[60px] w-full overflow-hidden rounded text-left outline outline-black-200/50 hover:outline-black-200 focus:outline-primary',
           { 'outline-2 outline-primary': isOpen }
         )}
       >
@@ -68,8 +54,8 @@ function Select({
             onClick={toggle}
             className="fixed inset-0 z-20 hidden animate-fade-in bg-transparent opacity-0 sm:block"
           ></div>
-          <div className="absolute top-[4.15rem] z-[21] w-full overflow-hidden rounded-lg border border-black-200 bg-white p-2 shadow-lg">
-            <div className="flex w-full flex-col gap-2">
+          <div className="absolute top-[66px] z-[21] w-full overflow-hidden rounded-lg border border-black-130 bg-white p-1 shadow-lg">
+            <div className="flex w-full flex-col gap-1">
               {values.map((item, idx) => {
                 const isActive = value === item;
                 return (

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "komiser-dashboard",
-  "version": "3.0.10",
+  "version": "3.0.11",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3002",

dashboard/tailwind.config.js

@@ -40,6 +40,7 @@ module.exports = {
         },
         black: {
           100: '#F4F9F9',
+          130: '#F4F2F7',
           150: '#F5F5F5',
           170: '#EDEBEE',
           200: '#CFD7D7',