rilldata · ericpgreen2 · Jun 18, 2024 · Jun 18, 2024 · Jun 18, 2024
diff --git a/web-admin/src/features/projects/ProjectBuilding.svelte b/web-admin/src/features/projects/ProjectBuilding.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { goto } from "$app/navigation";
   import CtaButton from "@rilldata/web-common/components/calls-to-action/CTAButton.svelte";
   import CtaContentContainer from "@rilldata/web-common/components/calls-to-action/CTAContentContainer.svelte";
   import CtaHeader from "@rilldata/web-common/components/calls-to-action/CTAHeader.svelte";
@@ -11,14 +10,6 @@
 
   export let organization: string;
   export let project: string;
-
-  function handleViewProjectStatus() {
-    goto(`/${organization}/${project}/-/status`);
-  }
-
-  function handleViewProject() {
-    goto(`/${organization}/${project}`);
-  }
 </script>
 
 <CtaLayoutContainer>
@@ -31,12 +22,14 @@
     >
     <ProjectAccessControls {organization} {project}>
       <svelte:fragment slot="manage-project">
-        <CtaButton variant="primary-outline" on:click={handleViewProjectStatus}
+        <CtaButton
+          variant="secondary"
+          href={`/${organization}/${project}/-/status`}
           >View project status
         </CtaButton>
       </svelte:fragment>
       <svelte:fragment slot="read-project">
-        <CtaButton variant="primary-outline" on:click={handleViewProject}
+        <CtaButton variant="secondary" href={`/${organization}/${project}`}
           >View project
         </CtaButton>
       </svelte:fragment>

diff --git a/web-admin/src/features/projects/ProjectErrored.svelte b/web-admin/src/features/projects/ProjectErrored.svelte
@@ -1,19 +1,10 @@
 <script lang="ts">
-  import { goto } from "$app/navigation";
   import CtaButton from "@rilldata/web-common/components/calls-to-action/CTAButton.svelte";
   import CancelCircleInverse from "@rilldata/web-common/components/icons/CancelCircleInverse.svelte";
   import ProjectAccessControls from "./ProjectAccessControls.svelte";
 
   export let organization: string;
   export let project: string;
-
-  function handleViewProjectStatus() {
-    goto(`/${organization}/${project}/-/status`);
-  }
-
-  function handleViewProject() {
-    goto(`/${organization}/${project}`);
-  }
 </script>
 
 <div class="flex flex-col justify-center items-center h-3/5 space-y-6 m-auto">
@@ -35,12 +26,14 @@
   </div>
   <ProjectAccessControls {organization} {project}>
     <svelte:fragment slot="manage-project">
-      <CtaButton variant="primary-outline" on:click={handleViewProjectStatus}
+      <CtaButton
+        variant="secondary"
+        href={`/${organization}/${project}/-/status`}
         >View project status
       </CtaButton>
     </svelte:fragment>
     <svelte:fragment slot="read-project">
-      <CtaButton variant="primary-outline" on:click={handleViewProject}
+      <CtaButton variant="secondary" href={`/${organization}/${project}`}
         >View project
       </CtaButton>
     </svelte:fragment>

diff --git a/web-admin/src/routes/-/github/connect/+page.svelte b/web-admin/src/routes/-/github/connect/+page.svelte
@@ -24,10 +24,6 @@
       },
     },
   });
-
-  function handleGoToGithub() {
-    window.location.href = redirectURL;
-  }
 </script>
 
 <svelte:head>
@@ -50,9 +46,9 @@
         </CtaMessage>
       {/if}
       <div class="mt-4 w-full">
-        <CtaButton variant="primary" on:click={handleGoToGithub}
-          >Connect to Github</CtaButton
-        >
+        <CtaButton variant="primary" href={redirectURL}>
+          Connect to Github
+        </CtaButton>
       </div>
     </CtaContentContainer>
   </CtaLayoutContainer>

diff --git a/web-admin/src/routes/-/github/connect/retry-auth/+page.svelte b/web-admin/src/routes/-/github/connect/retry-auth/+page.svelte
@@ -15,6 +15,7 @@
   const urlParams = new URLSearchParams(window.location.search);
   const remote = urlParams.get("remote");
   const githubUsername = urlParams.get("githubUsername");
+
   const user = createAdminServiceGetCurrentUser({
     query: {
       onSuccess: (data) => {
@@ -24,12 +25,6 @@
       },
     },
   });
-
-  function handleGoToGithub() {
-    window.location.href = encodeURI(
-      ADMIN_URL + "/github/auth/login?remote=" + remote,
-    );
-  }
 </script>
 
 <svelte:head>
@@ -48,7 +43,10 @@
       <CtaMessage>
         Click the button below to re-authorize/authorize another account.
       </CtaMessage>
-      <CtaButton variant="primary" on:click={handleGoToGithub}>
+      <CtaButton
+        variant="primary"
+        href={encodeURI(ADMIN_URL + "/github/auth/login?remote=" + remote)}
+      >
         Connect to Github
       </CtaButton>
     </CtaContentContainer>

diff --git a/web-admin/src/routes/-/github/connect/retry-install/+page.svelte b/web-admin/src/routes/-/github/connect/retry-install/+page.svelte
@@ -15,6 +15,7 @@
   import GithubRepoInline from "../../../../../features/projects/GithubRepoInline.svelte";
 
   const remote = new URLSearchParams(window.location.search).get("remote");
+
   const user = createAdminServiceGetCurrentUser({
     query: {
       onSuccess: (data) => {
@@ -24,11 +25,6 @@
       },
     },
   });
-  function handleGoToGithub() {
-    window.location.href = encodeURI(
-      ADMIN_URL + "/github/connect?remote=" + remote,
-    );
-  }
 </script>
 
 <svelte:head>
@@ -50,7 +46,10 @@
         <KeyboardKey label="Control" /> + <KeyboardKey label="C" /> in the CLI to
         cancel the connect request.)
       </CtaMessage>
-      <CtaButton variant="primary" on:click={handleGoToGithub}>
+      <CtaButton
+        variant="primary"
+        href={encodeURI(ADMIN_URL + "/github/connect?remote=" + remote)}
+      >
         Connect to Github
       </CtaButton>
     </CtaContentContainer>

diff --git a/web-admin/src/routes/[organization]/[project]/-/alerts/[alert]/open/+page.svelte b/web-admin/src/routes/[organization]/[project]/-/alerts/[alert]/open/+page.svelte
@@ -3,13 +3,13 @@
   import { page } from "$app/stores";
   import { useAlert } from "@rilldata/web-admin/features/alerts/selectors";
   import { mapQueryToDashboard } from "@rilldata/web-admin/features/dashboards/query-mappers/mapQueryToDashboard";
-  import { EntityStatus } from "@rilldata/web-common/features/entity-management/types";
-  import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
   import CtaButton from "@rilldata/web-common/components/calls-to-action/CTAButton.svelte";
   import CtaContentContainer from "@rilldata/web-common/components/calls-to-action/CTAContentContainer.svelte";
   import CtaLayoutContainer from "@rilldata/web-common/components/calls-to-action/CTALayoutContainer.svelte";
   import CtaMessage from "@rilldata/web-common/components/calls-to-action/CTAMessage.svelte";
   import Spinner from "@rilldata/web-common/features/entity-management/Spinner.svelte";
+  import { EntityStatus } from "@rilldata/web-common/features/entity-management/types";
+  import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
 
   $: organization = $page.params.organization;
   $: project = $page.params.project;
@@ -46,8 +46,8 @@
         </CtaMessage>
       </div>
       <CtaButton
-        on:click={() => goto(`/${organization}/${project}/-/alerts/${$alert}`)}
-        variant="primary-outline"
+        variant="secondary"
+        href={`/${organization}/${project}/-/alerts/${$alert}`}
       >
         Go to Alerts page
       </CtaButton>

diff --git a/web-admin/src/routes/[organization]/[project]/-/reports/[report]/export/+page.svelte b/web-admin/src/routes/[organization]/[project]/-/reports/[report]/export/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { goto } from "$app/navigation";
   import { page } from "$app/stores";
   import { createDownloadReportMutation } from "@rilldata/web-admin/features/projects/download-report";
   import CtaButton from "@rilldata/web-common/components/calls-to-action/CTAButton.svelte";
@@ -68,8 +67,8 @@
       </div>
     {/if}
     <CtaButton
-      on:click={() => goto(`/${organization}/${project}/-/reports/${reportId}`)}
-      variant="primary-outline"
+      variant="secondary"
+      href={`/${organization}/${project}/-/reports/${reportId}`}
     >
       Go to report page
     </CtaButton>

diff --git a/web-admin/src/routes/[organization]/[project]/-/reports/[report]/open/+page.svelte b/web-admin/src/routes/[organization]/[project]/-/reports/[report]/open/+page.svelte
@@ -48,9 +48,8 @@
         </CtaMessage>
       </div>
       <CtaButton
-        on:click={() =>
-          goto(`/${organization}/${project}/-/reports/${reportId}`)}
-        variant="primary-outline"
+        href={`/${organization}/${project}/-/reports/${reportId}`}
+        variant="secondary"
       >
         Go to report page
       </CtaButton>

diff --git a/web-common/src/components/ErrorPage.svelte b/web-common/src/components/ErrorPage.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { goto } from "$app/navigation";
   import CtaButton from "@rilldata/web-common/components/calls-to-action/CTAButton.svelte";
   import CtaContentContainer from "@rilldata/web-common/components/calls-to-action/CTAContentContainer.svelte";
   import CtaLayoutContainer from "@rilldata/web-common/components/calls-to-action/CTALayoutContainer.svelte";
@@ -26,9 +25,7 @@
       {body}
     </CtaMessage>
     {#if !fatal}
-      <CtaButton variant="primary-outline" on:click={() => goto("/")}>
-        Back to home
-      </CtaButton>
+      <CtaButton variant="secondary" href="/">Back to home</CtaButton>
     {/if}
     <CtaNeedHelp />
   </CtaContentContainer>

diff --git a/web-common/src/components/button/Button.svelte b/web-common/src/components/button/Button.svelte
@@ -25,6 +25,7 @@
   export let selected = false;
   export let large = false;
   export let small = false;
+  export let wide = false;
   export let noStroke = false;
   export let rounded = false;
   export let href: string | null = null;
@@ -54,6 +55,7 @@
   class:loading
   class:large
   class:small
+  class:wide
   class:compact
   class:rounded
   class:danger={status === "error"}
@@ -333,6 +335,11 @@
     @apply h-10;
   }
 
+  .wide {
+    @apply w-full max-w-[400px];
+    @apply h-10 text-sm;
+  }
+
   .compact {
     @apply px-2;
   }

diff --git a/web-common/src/components/calls-to-action/CTAButton.svelte b/web-common/src/components/calls-to-action/CTAButton.svelte
@@ -1,37 +1,9 @@
 <script lang="ts">
-  import { createEventDispatcher } from "svelte";
+  import Button from "../button/Button.svelte";
 
-  export let variant: "primary" | "primary-outline" | "secondary" = "primary";
+  export let variant: "primary" | "secondary" = "primary";
+  export let href: string | null = null;
   export let disabled = false;
-
-  function getVariantClass(variant: string) {
-    switch (variant) {
-      case "primary":
-        return "border-primary-600 bg-primary-600 text-white hover:bg-primary-500 hover:border-primary-500";
-      case "primary-outline":
-        return "border-primary-300 text-primary-600 hover:bg-slate-100 hover:border-gray-100";
-      case "secondary":
-        return "text-slate-600 border-slate-300 hover:bg-slate-100";
-    }
-  }
-
-  const dispatch = createEventDispatcher();
-
-  const handleClick = (event: MouseEvent) => {
-    if (!disabled) {
-      dispatch("click", event);
-    }
-  };
-
-  const disabledClasses = `disabled:cursor-not-allowed disabled:text-gray-700 disabled:bg-gray-200 disabled:border disabled:border-gray-400 disabled:opacity-50`;
 </script>
 
-<button
-  class="text-sm font-medium w-full max-w-[400px] h-10 border rounded-sm {getVariantClass(
-    variant,
-  )} {disabled && disabledClasses}"
-  on:click={handleClick}
-  {disabled}
->
-  <slot />
-</button>
+<Button type={variant} {href} {disabled} wide on:click><slot /></Button>