refactor: do not use arrow functions in svelte templates (#505)

Signed-off-by: Philippe Martin <[email protected]>

Author: feloy

packages/webview/src/component/dashboard/KubernetesProviderCard.svelte

@@ -17,7 +17,7 @@ let { provider }: Props = $props();
 const remote = getContext<Remote>(Remote);
 const navigationApi = remote.getProxy(API_NAVIGATION);
 
-async function createNew(provider: KubernetesProvider): Promise<void> {
+async function createNew(): Promise<void> {
   return navigationApi.navigateToProviderNewConnection(provider.id);
 }
 </script>
@@ -36,7 +36,7 @@ async function createNew(provider: KubernetesProvider): Promise<void> {
 
   <Button
     type="primary"
-    on:click={(): Promise<void> => createNew(provider)}
+    on:click={createNew}
     class="flex items-center"
     aria-label={provider.creationButtonTitle ?? 'Create new'}>
     <Fa icon={faPlusCircle} size="1.2x" class="mr-1" />

packages/webview/src/component/dashboard/NewProviderCard.svelte

@@ -15,6 +15,10 @@ const markdownText = `
 Install a new Kubernetes provider via extension. Navigate to extensions by pressing the button, install the ones you prefer and they will show up here.
       
 More information: [creating a kube cluster](https://podman-desktop.io/docs/kubernetes/creating-a-kube-cluster)`;
+
+async function navigateToExtensionsCatalog(): Promise<void> {
+  return navigationApi.navigateToExtensionsCatalog('category:kubernetes keyword:provider not:installed');
+}
 </script>
 
 <div class="rounded-xl p-5 text-left border border-dotted border-(--pd-content-divider)">
@@ -29,9 +33,7 @@ More information: [creating a kube cluster](https://podman-desktop.io/docs/kuber
 
   <Button
     type="secondary"
-    on:click={async (): Promise<void> => {
-      await navigationApi.navigateToExtensionsCatalog('category:kubernetes keyword:provider not:installed');
-    }}
+    on:click={navigateToExtensionsCatalog}
     class="flex items-center"
     aria-label="See available extensions">
     <Fa icon={faPuzzlePiece} size="1.2x" class="mr-1" />

packages/webview/src/component/dashboard/NoSelectedContextPage.svelte

@@ -12,6 +12,10 @@ const remote = getContext<Remote>(Remote);
 const contextsApi = remote.getProxy(API_CONTEXTS);
 
 let { availableContexts }: Props = $props();
+
+async function setCurrentContext(context: string): Promise<void> {
+  return contextsApi.setCurrentContext(context);
+}
 </script>
 
 <div class="mt-8 flex justify-center overflow-auto">
@@ -27,7 +31,7 @@ let { availableContexts }: Props = $props();
       Available contexts:
       {#if availableContexts}
         {#each availableContexts as context, index (index)}
-          <Link on:click={(): Promise<void> => contextsApi.setCurrentContext(context)}>{context}</Link
+          <Link on:click={setCurrentContext.bind(undefined, context)}>{context}</Link
           >{#if index < availableContexts.length - 1},
           {/if}
         {/each}

packages/webview/src/component/ingresses-routes/columns/HostPath.svelte

@@ -15,18 +15,18 @@ const ingressRouteHelper = dependencyAccessor.get<IngressRouteHelper>(IngressRou
 
 const remote = getContext<Remote>(Remote);
 const systemApi = remote.getProxy(API_SYSTEM);
+
+async function openExternal(url: string | undefined): Promise<void> {
+  if (url) {
+    await systemApi.openExternal(url);
+  }
+}
 </script>
 
 {#each ingressRouteHelper.getHostPaths(object) as hostPath, index (index)}
   <div class="text-(--pd-table-body-text) overflow-hidden text-ellipsis">
     {#if hostPath.url}
-      <Link
-        aria-label={hostPath.label}
-        on:click={async (): Promise<void> => {
-          if (hostPath.url) {
-            await systemApi.openExternal(hostPath.url);
-          }
-        }}>
+      <Link aria-label={hostPath.label} on:click={openExternal.bind(undefined, hostPath.url)}>
         {hostPath.label}
       </Link>
     {:else}

packages/webview/src/component/ingresses-routes/details/IngressSpecDetails.svelte

@@ -15,6 +15,10 @@ let { spec }: Props = $props();
 
 const remote = getContext<Remote>(Remote);
 const systemApi = remote.getProxy(API_SYSTEM);
+
+async function openExternal(link: string): Promise<boolean> {
+  return systemApi.openExternal(link);
+}
 </script>
 
 <tr>
@@ -74,7 +78,7 @@ const systemApi = remote.getProxy(API_SYSTEM);
             {#if rule.host}
               • Link:
               {@const link = `${spec.tls && spec.tls.length > 0 ? 'https' : 'http'}://${rule.host}${path.path}`}
-              <Link on:click={(): Promise<boolean> => systemApi.openExternal(link)}>
+              <Link on:click={openExternal.bind(undefined, link)}>
                 {link}
               </Link>
             {/if}

packages/webview/src/component/ingresses-routes/details/RouteSpecDetails.svelte

@@ -15,6 +15,10 @@ let { spec }: Props = $props();
 
 const remote = getContext<Remote>(Remote);
 const systemApi = remote.getProxy(API_SYSTEM);
+
+async function openExternal(link: string): Promise<boolean> {
+  return systemApi.openExternal(link);
+}
 </script>
 
 <tr>
@@ -73,7 +77,7 @@ const systemApi = remote.getProxy(API_SYSTEM);
     <Cell>Link</Cell>
     <Cell>
       {@const link = `${spec.tls ? 'https' : 'http'}://${spec.host}${spec.path ?? ''}`}
-      <Link on:click={(): Promise<boolean> => systemApi.openExternal(link)}>
+      <Link on:click={openExternal.bind(undefined, link)}>
         {link}
       </Link>
     </Cell>

packages/webview/src/component/objects/columns/DeleteAction.svelte

@@ -7,7 +7,6 @@ import type { ObjectProps } from './object-props';
 import { getContext } from 'svelte';
 import { Remote } from '/@/remote/remote';
 import { API_CONTEXTS } from '@kubernetes-dashboard/channels';
-import type { KubernetesObjectUI } from '/@/component/objects/KubernetesObjectUI';
 import { DependencyAccessor } from '/@/inject/dependency-accessor';
 import { KubernetesObjectUIHelper } from '/@/component/objects/kubernetes-object-ui-helper';
 
@@ -19,18 +18,18 @@ const contextsApi = remote.getProxy(API_CONTEXTS);
 const dependencyAccessor = getContext<DependencyAccessor>(DependencyAccessor);
 const objectHelper = dependencyAccessor.get<KubernetesObjectUIHelper>(KubernetesObjectUIHelper);
 
-async function deleteKubernetesObject(obj: KubernetesObjectUI): Promise<void> {
-  obj.status = 'DELETING';
-  if (objectHelper.isNamespaced(obj)) {
-    await contextsApi.deleteObject(obj.kind, obj.name, obj.namespace);
+async function deleteKubernetesObject(): Promise<void> {
+  object.status = 'DELETING';
+  if (objectHelper.isNamespaced(object)) {
+    await contextsApi.deleteObject(object.kind, object.name, object.namespace);
   } else {
-    await contextsApi.deleteObject(obj.kind, obj.name);
+    await contextsApi.deleteObject(object.kind, object.name);
   }
 }
 </script>
 
 <IconButton
   enabled={object.status !== 'DELETING'}
   title={`Delete ${object.kind}`}
-  onClick={(): Promise<void> => deleteKubernetesObject(object)}
+  onClick={deleteKubernetesObject}
   icon={faTrash} />

packages/webview/src/component/objects/columns/RestartAction.svelte

@@ -14,13 +14,14 @@ let { object }: ObjectProps = $props();
 const remote = getContext<Remote>(Remote);
 const contextsApi = remote.getProxy(API_CONTEXTS);
 
-async function restartKubernetesObject(obj: KubernetesNamespacedObjectUI): Promise<void> {
+async function restartKubernetesObject(): Promise<void> {
+  const obj = object as KubernetesNamespacedObjectUI;
   await contextsApi.restartObject(obj.kind, obj.name, obj.namespace);
 }
 </script>
 
 <IconButton
   enabled={object.status !== 'DELETING'}
   title={`Restart ${object.kind}`}
-  onClick={(): Promise<void> => restartKubernetesObject(object as KubernetesNamespacedObjectUI)}
+  onClick={restartKubernetesObject}
   icon={faRotate} />

packages/webview/src/component/pods/columns/OpenLinks.svelte

@@ -59,7 +59,7 @@ async function openEndpoint(endpoint: Endpoint): Promise<void> {
   {#each filterEndpoints(endpoints.data?.endpoints) as endpoint, index (index)}
     <IconButton
       title={`Open ${endpoint.inputName}`}
-      onClick={(): Promise<void> => openEndpoint(endpoint)}
+      onClick={openEndpoint.bind(undefined, endpoint)}
       icon={faExternalLinkSquareAlt} />
   {/each}
 {/if}