@spectric/ui 0.0.20 → 0.0.22

package/src/components/query_bar/querylanguage/outputTypes/toMongo.ts

@@ -1,13 +1,21 @@
 /* eslint-disable @kbn/eslint/require-license-header */
-import { FieldTypes, KueryNode } from '../..';
-import { wildcardSymbol } from '../kuery/node_types/wildcard';
+import { FieldTypes, KueryNode } from "../..";
+import { wildcardSymbol } from "../kuery/node_types/wildcard";
+import { wktToGeoJSON } from "@terraformer/wkt";
 
 export const KQL_WILDCARD_SYMBOL = wildcardSymbol;
-export const KQL_NODE_TYPE_WILDCARD = 'wildcard';
-export type FunctionName = 'is' | 'and' | 'or' | 'not' | 'range' | 'exists' | 'nested';
+export const KQL_NODE_TYPE_WILDCARD = "wildcard";
+export type FunctionName =
+  | "is"
+  | "and"
+  | "or"
+  | "not"
+  | "range"
+  | "exists"
+  | "nested";
 const and = (node: KueryNode) => {
   const children = node.arguments || [];
-  let query: any = { "$and": children.map((c: KueryNode) => toMongo(c)) }
+  let query: any = { $and: children.map((c: KueryNode) => toMongo(c)) };
 
   return query;
 };
@@ -17,62 +25,65 @@ const is = (node: KueryNode) => {
   } = node;
 
   let value = toMongo(valueArg);
-  const isExistsQuery = valueArg.type === 'wildcard' && (valueArg.value as any) === '@kuery-wildcard@';
+  const isExistsQuery =
+    valueArg.type === "wildcard" &&
+    (valueArg.value as any) === "@kuery-wildcard@";
   if (isExistsQuery) {
-    return exists(node)
+    return exists(node);
   }
-  let query: any = {}
-  query[toMongo(fieldNameArg)] = { "$eq": value }
+  let query: any = {};
+  query[toMongo(fieldNameArg)] = { $eq: value };
   return query;
 };
 
 const or = (node: KueryNode) => {
   const children = node.arguments || [];
   return {
-    "$or": children
-      .map((child: KueryNode) => {
-        return toMongo(child);
-      })
-  }
-
+    $or: children.map((child: KueryNode) => {
+      return toMongo(child);
+    }),
+  };
 };
 const not = (node: KueryNode) => {
   const [fieldNameArg] = node.arguments;
   let query: any = {};
-  query = { "$ne": toMongo(fieldNameArg) }
+  query = { $ne: toMongo(fieldNameArg) };
   return query;
 };
 
 const AST_TO_CQL = {
-  gt: '$gt',
-  lt: '$lt',
-  gte: '$gte',
-  lte: '$lte',
+  gt: "$gt",
+  lt: "$lt",
+  gte: "$gte",
+  lte: "$lte",
 };
 const range = (node: KueryNode) => {
   const [fieldNameArg, operator] = node.arguments;
-  let valueArg = operator.value
+  let valueArg = operator.value;
   // @ts-ignore
   const opsign = AST_TO_CQL[operator.name];
   let value = toMongo(valueArg);
 
-  let query: any = {}
-  query[fieldNameArg.value] = {}
-  query[fieldNameArg.value][opsign] = value
-  return query
-
-
+  let query: any = {};
+  query[fieldNameArg.value] = {};
+  query[fieldNameArg.value][opsign] = value;
+  return query;
 };
 const exists = (node: KueryNode) => {
   const [fieldNameArg] = node.arguments;
-  return { [toMongo(fieldNameArg)]: { $ne: null } }
+  return { [toMongo(fieldNameArg)]: { $ne: null } };
 };
 
 const nested = (node: KueryNode) => {
-
-  console.warn("TODO Implement nested search", node)
-  return ""
-}
+  console.warn("TODO Implement nested search", node);
+  return "";
+};
+const geospatial = (node: KueryNode) => {
+  const [fieldName, operator, value] = node.arguments;
+  if (operator == "within") {
+    return { [fieldName.value]: { $geoWithin: wktToGeoJSON(value.value) } };
+  }
+};
 export const functions = {
   is,
   and,
@@ -80,7 +91,8 @@ export const functions = {
   not,
   range,
   exists,
-  nested
+  nested,
+  geospatial,
 };
 const nodeTypes = {
   function: (node: KueryNode) => {
@@ -92,7 +104,7 @@ const nodeTypes = {
   },
   wildcard: (node: KueryNode) => {
     const { value } = node;
-    return `/${value.split(KQL_WILDCARD_SYMBOL).join('.*')}/`;
+    return `/${value.split(KQL_WILDCARD_SYMBOL).join(".*")}/`;
   },
 };
 

package/src/components/symbols.ts

@@ -0,0 +1,6 @@
+export const EDIT = "🖉";
+export const DELETE = "🗑";
+export const ARROW_LEFT = "🠈";
+export const ARROW_RIGHT = "🠊";
+export const ARROW_UP = "🠉";
+export const ARROW_DOWN = "🠋";

package/src/components/table/__tests__/table.spec.ts

@@ -1,91 +1,179 @@
-import { test, expect } from '@playwright/test';
-import type { SpectricTableElement, TableEvents } from '../index';
-import type SpectricModule from "../../../index.ts"
+import { test, expect } from "@playwright/test";
+import type { SpectricTableElement, TableEvents } from "../index";
+import type SpectricModule from "../../../index.ts";
+import { SpectricInput } from "../../../index.ts";
 test.beforeEach(async ({ page }) => {
-  page.on('console', msg => { console.log(`Page[${msg.type()}]:` + msg.text()) });
+  page.on("console", (msg) => {
+    console.log(`Page[${msg.type()}]:` + msg.text());
+  });
   await page.addInitScript(() => {
     //@ts-ignore
     window.awaitEvent = function awaitEvent(target, event, trigger) {
       return new Promise((resolve, reject) => {
+        let timeout = setTimeout(reject, 400);
         const handleEvent = (...args) => {
+          clearTimeout(timeout);
           //@ts-ignore
-          target.removeEventListener(event, this)
-          resolve(args)
-        }
+          target.removeEventListener(event, this);
+          resolve(args);
+        };
         //@ts-ignore
-        target.addEventListener(event, handleEvent)
-        trigger()
-      })
-    }
-  })
-  await page.goto('http://localhost:6006/iframe.html?globals=&args=&id=spectric-ui-components-ui-table--milti-select&viewMode=story');
+        target.addEventListener(event, handleEvent);
+        trigger();
+      });
+    };
+  });
 });
-test.describe("Spectric Table Tests", () => {
 
-  test('MultiSelect Table Select All/Deselect All ', async ({ page }) => {
-    let tableLocator = page.locator("spectric-table")
-    tableLocator.waitFor()
+test.describe("Spectric Table Tests", () => {
+  test("MultiSelect Table Select All/Deselect All ", async ({ page }) => {
+    await page.goto(
+      "http://localhost:6006/iframe.html?globals=&args=&id=spectric-ui-components-ui-table--multi-select&viewMode=story"
+    );
+    let tableLocator = page.locator("spectric-table");
+    tableLocator.waitFor();
     var selected = await tableLocator.evaluate<number, SpectricTableElement>(
       async (table) => {
-        let selectAll = table.querySelectorAll<HTMLElement>("spectric-table-header spectric-input[variant='checkbox'] spectric-button")[0]
-        let [event] = await window.awaitEvent<TableEvents>(table, "selected", () => selectAll.click()) as Parameters<TableEvents["selected"]>
-        return event.detail.length
+        let selectAll = table.querySelectorAll<HTMLElement>(
+          "spectric-table-header spectric-input[variant='checkbox'] spectric-button"
+        )[0];
+        let [event] = (await window.awaitEvent<TableEvents>(
+          table,
+          "selected",
+          () => selectAll.click()
+        )) as Parameters<TableEvents["selected"]>;
+        return event.detail.length;
       }
-    )
-    await expect(selected, "All Selected").toBeGreaterThan(0)
+    );
+    await expect(selected, "All Selected").toBeGreaterThan(0);
 
     selected = await tableLocator.evaluate<number, SpectricTableElement>(
       async (table) => {
-        let selectAll = table.querySelectorAll<HTMLElement>("spectric-table-header spectric-input[variant='checkbox'] spectric-button")[0]
-        let [event] = await window.awaitEvent<TableEvents>(table, "selected", () => selectAll.click()) as Parameters<TableEvents["selected"]>
-        return event.detail.length
+        let selectAll = table.querySelectorAll<HTMLElement>(
+          "spectric-table-header spectric-input[variant='checkbox'] spectric-button"
+        )[0];
+        let [event] = (await window.awaitEvent<TableEvents>(
+          table,
+          "selected",
+          () => selectAll.click()
+        )) as Parameters<TableEvents["selected"]>;
+        return event.detail.length;
       }
-    )
-    await expect(selected, "None Selected").toBe(0)
+    );
+    await expect(selected, "None Selected").toBe(0);
 
     selected = await tableLocator.evaluate<number, SpectricTableElement>(
       async (table) => {
-        let selectAll = table.querySelectorAll<HTMLElement>("spectric-table-virtual-body spectric-input[variant='checkbox'] spectric-button")[2]
-        let [event] = await window.awaitEvent<TableEvents>(table, "selected", () => selectAll.click()) as Parameters<TableEvents["selected"]>
-        return event.detail.length
+        let selectAll = table.querySelectorAll<HTMLElement>(
+          "spectric-table-virtual-body spectric-input[variant='checkbox'] spectric-button"
+        )[2];
+        let [event] = (await window.awaitEvent<TableEvents>(
+          table,
+          "selected",
+          () => selectAll.click()
+        )) as Parameters<TableEvents["selected"]>;
+        return event.detail.length;
       }
-    )
-    await expect(selected, "One Selected").toBe(1)
+    );
+    await expect(selected, "One Selected").toBe(1);
 
     selected = await tableLocator.evaluate<number, SpectricTableElement>(
       async (table) => {
-        let selectAll = table.querySelectorAll<HTMLElement>("spectric-table-virtual-body spectric-input[variant='checkbox'] spectric-button")[2]
-        let [event] = await window.awaitEvent<TableEvents>(table, "selected", () => selectAll.click()) as Parameters<TableEvents["selected"]>
-        return event.detail.length
+        let selectAll = table.querySelectorAll<HTMLElement>(
+          "spectric-table-virtual-body spectric-input[variant='checkbox'] spectric-button"
+        )[2];
+        let [event] = (await window.awaitEvent<TableEvents>(
+          table,
+          "selected",
+          () => selectAll.click()
+        )) as Parameters<TableEvents["selected"]>;
+        return event.detail.length;
       }
-    )
-    await expect(selected, "One DeSelected").toBe(0)
+    );
+    await expect(selected, "One DeSelected").toBe(0);
   });
 
+  test("SingleSelect Table ensure only one is selected", async ({ page }) => {
+    await page.goto(
+      "http://localhost:6006/iframe.html?globals=&args=&id=spectric-ui-components-ui-table--single-select&viewMode=story"
+    );
+    let tableLocator = page.locator("spectric-table");
+    tableLocator.waitFor();
+    var selected = await tableLocator.evaluate<number, SpectricTableElement>(
+      async (table) => {
+        let select = table.querySelectorAll<HTMLElement>(
+          "spectric-input[variant='checkbox'].table-checkbox-single spectric-button"
+        )[0];
+        let [event] = (await window.awaitEvent<TableEvents>(
+          table,
+          "selected",
+          () => select.click()
+        )) as Parameters<TableEvents["selected"]>;
+        return event.detail.length;
+      }
+    );
+    await expect(selected, "One Selected").toBe(1);
+
+    selected = await tableLocator.evaluate<number, SpectricTableElement>(
+      async (table) => {
+        let select = table.querySelectorAll<HTMLElement>(
+          "spectric-input[variant='checkbox'].table-checkbox-single spectric-button"
+        )[1];
+        let [event] = (await window.awaitEvent<TableEvents>(
+          table,
+          "selected",
+          () => select.click()
+        )) as Parameters<TableEvents["selected"]>;
+        return event.detail.length;
+      }
+    );
+    await expect(selected, "One Selected").toBe(1);
+
+    let checked = await tableLocator.evaluate<number, SpectricTableElement>(
+      async (table) => {
+        let selectAll = table.querySelectorAll<HTMLElement>(
+          "spectric-input[variant='checkbox'].table-checkbox-single"
+        )[2];
+        let checked = Array.from(
+          table.querySelectorAll<SpectricInput>(
+            "spectric-input[variant='checkbox'].table-checkbox-single"
+          )
+        ).filter((node) => node.checked);
+        return checked.length;
+      }
+    );
+    await expect(checked, "One checked").toBe(1);
+  });
 
-  test('Ensure all event listeners are cleaned up and not leaked', async ({ page }) => {
-    let tableLocator = page.locator("spectric-table")
-    await tableLocator.waitFor()
+  test("Ensure all event listeners are cleaned up and not leaked", async ({
+    page,
+  }) => {
+    await page.goto(
+      "http://localhost:6006/iframe.html?globals=&args=&id=spectric-ui-components-ui-table--multi-select&viewMode=story"
+    );
+    let tableLocator = page.locator("spectric-table");
+    await tableLocator.waitFor();
     let listenerCount = await page.evaluate(async () => {
-      const module = await import("./src/index.ts") as typeof SpectricModule
-      return module.getListeners()
-    })
-    await expect(listenerCount).toBeGreaterThan(0)
+      const module = (await import("./src/index.ts")) as typeof SpectricModule;
+      return module.getListeners();
+    });
+    await expect(listenerCount).toBeGreaterThan(0);
     //Delete all content and expect everything to get cleaned up
     listenerCount = await page.evaluate(async () => {
-      const module = await import("./src/index.ts") as typeof SpectricModule
-      document.body.innerHTML = ""
-      return module.getListeners()
-    })
-    await expect(listenerCount).toBe(0)
-
-  })
-})
-
-
+      const module = (await import("./src/index.ts")) as typeof SpectricModule;
+      document.body.innerHTML = "";
+      return module.getListeners();
+    });
+    await expect(listenerCount).toBe(0);
+  });
+});
 
 declare global {
   interface Window {
-    awaitEvent: <EventMap extends Record<string, any>, K = keyof EventMap>(target: HTMLElement, event: K, trigger: () => void) => Parameters<EventMap[keyof EventMap]>;
+    awaitEvent: <EventMap extends Record<string, any>, K = keyof EventMap>(
+      target: HTMLElement,
+      event: K,
+      trigger: () => void
+    ) => Parameters<EventMap[keyof EventMap]>;
   }
 }