Repository: temporalio/ui
Pull request #218 (2022-01-11 22:17:24)

Remove border from last poller in table
Follow up from today's design review.

- Remove the bottom border from the last poller
- Remove dependency on `svelte-time`.


Patch:
diff --git a/src/lib/components/workers-row.svelte b/src/lib/components/workers-row.svelte
index 53944000..1dd4438f 100644
--- a/src/lib/components/workers-row.svelte
+++ b/src/lib/components/workers-row.svelte
@@ -6,7 +6,9 @@
   export let poller;
 </script>
 
-<article class="w-full h-full flex flex-row border-b-2 no-underline p-2">
+<article
+  class="w-full h-full flex flex-row border-b-2 last:border-b-0 no-underline p-2"
+>
   <div class="links w-3/12 text-left">
     {poller.identity}
   </div>
diff --git a/src/lib/utilities/convert-to-json.ts b/src/lib/utilities/create-data-url.ts
similarity index 87%
rename from src/lib/utilities/convert-to-json.ts
rename to src/lib/utilities/create-data-url.ts
index db126028..b506a4b7 100644
--- a/src/lib/utilities/convert-to-json.ts
+++ b/src/lib/utilities/create-data-url.ts
@@ -1,4 +1,4 @@
-export const convertToJSON = (
+export const createDataUrl = (
   events: Parameters<typeof JSON.stringify>[0],
 ): string => {
   const data = JSON.stringify(events);
diff --git a/src/routes/namespaces/[namespace]/workflows/[workflow]/[run]/history/__layout.svelte b/src/routes/namespaces/[namespace]/workflows/[workflow]/[run]/history/__layout.svelte
index e8afa144..67a32f1e 100644
--- a/src/routes/namespaces/[namespace]/workflows/[workflow]/[run]/history/__layout.svelte
+++ b/src/routes/namespaces/[namespace]/workflows/[workflow]/[run]/history/__layout.svelte
@@ -26,12 +26,13 @@
     faStream,
   } from '@fortawesome/free-solid-svg-icons';
 
+  import { routeFor } from '$lib/utilities/route-for';
+  import { createDataUrl } from '$lib/utilities/create-data-url';
+  import { fetchEvents } from '$lib/services/events-service';
   import { refreshable } from '$lib/stores/refreshable';
 
   import ToggleButton from '$lib/components/toggle-button.svelte';
   import ToggleButtons from '$lib/components/toggle-buttons.svelte';
-  import { routeFor } from '$lib/utilities/route-for';
-  import { fetchEvents } from '$lib/services/events-service';
 
   export let workflow: WorkflowParameters;
   export let parameters: Parameters<typeof fetchEvents>[0];
@@ -58,7 +59,7 @@
           href={routeFor('workflow.events.json', workflow)}
         />
       </ToggleButtons>
-      <ToggleButton icon={faDownload} href="#no-implemented" />
+      <ToggleButton icon={faDownload} href={createDataUrl(events)} />
     </div>
   </nav>
 </section>


Test patch:
diff --git a/src/lib/utilities/convert-to-json.test.ts b/src/lib/utilities/create-data-url.test.ts
similarity index 60%
rename from src/lib/utilities/convert-to-json.test.ts
rename to src/lib/utilities/create-data-url.test.ts
index f8f42135..52b17437 100644
--- a/src/lib/utilities/convert-to-json.test.ts
+++ b/src/lib/utilities/create-data-url.test.ts
@@ -1,9 +1,9 @@
-import { convertToJSON } from './convert-to-json';
+import { createDataUrl } from './create-data-url';
 
-describe(convertToJSON, () => {
+describe(createDataUrl, () => {
   it('should return a data-encoded URI based on an object', () => {
     const example = { hello: 123 };
-    expect(convertToJSON(example)).toBe(
+    expect(createDataUrl(example)).toBe(
       'data:application/json;charset=utf-8,%7B%22hello%22%3A123%7D',
     );
   });