From f4e73d9e6391c14a4a2a7e548ae08240a066df2a Mon Sep 17 00:00:00 2001
From: Alex Tideman <alex.tideman@gmail.com>
Date: Thu, 31 Aug 2023 14:50:04 -0500
Subject: [PATCH] Delete the banners (#1609)

* Delete the banners

* Remove github-service
---
 cypress/integration/banner.spec.js            | 54 -------------------
 .../banner/banner-temporal-version.svelte     | 45 ----------------
 .../banner/banner-ui-version.svelte           | 35 ------------
 src/lib/components/banner/banner.svelte       | 54 -------------------
 src/lib/components/banner/banners.svelte      | 22 --------
 src/lib/i18n/locales/en/common.ts             |  2 -
 src/lib/models/banner-state.ts                |  4 --
 src/lib/services/github-service.ts            | 24 ---------
 src/lib/stores/banner.ts                      | 13 -----
 src/lib/types/global.ts                       |  5 --
 src/routes/(app)/+layout.svelte               |  4 --
 src/routes/(app)/+layout.ts                   | 11 +---
 12 files changed, 1 insertion(+), 272 deletions(-)
 delete mode 100644 cypress/integration/banner.spec.js
 delete mode 100644 src/lib/components/banner/banner-temporal-version.svelte
 delete mode 100644 src/lib/components/banner/banner-ui-version.svelte
 delete mode 100644 src/lib/components/banner/banner.svelte
 delete mode 100644 src/lib/components/banner/banners.svelte
 delete mode 100644 src/lib/models/banner-state.ts
 delete mode 100644 src/lib/services/github-service.ts
 delete mode 100644 src/lib/stores/banner.ts

diff --git a/cypress/integration/banner.spec.js b/cypress/integration/banner.spec.js
deleted file mode 100644
index 1d6827e38..000000000
--- a/cypress/integration/banner.spec.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import cluster from '../fixtures/cluster.json';
-
-describe('Banner', () => {
-  beforeEach(() => {
-    cy.interceptApi();
-    cy.visit('/');
-  });
-
-  it('should show Temporal New Version banner', () => {
-    cy.get('[data-testid=temporal-version-banner]').should('be.visible');
-  });
-
-  it('should show UI New Version banner', () => {
-    cy.get('[data-testid=temporal-version-banner]').should('be.visible');
-    cy.get('[data-testid=close-banner]').click();
-
-    cy.get('[data-testid=temporal-version-banner]').should('not.exist');
-    cy.get('[data-testid=ui-version-banner]').should('be.visible');
-  });
-
-  it('after closing banner, it should not be visible for the same version', () => {
-    cy.get('[data-testid=temporal-version-banner]').should('be.visible');
-    cy.get('[data-testid=close-banner]').click();
-
-    cy.visit('/');
-
-    cy.get('[data-testid=temporal-version-banner]').should('not.exist');
-  });
-
-  it('after closing banner, it should be visible when upgraded to a newer version', () => {
-    cy.intercept(Cypress.env('VITE_API_HOST') + '/api/v1/cluster*', {
-      ...cluster,
-      versionInfo: {
-        current: { version: '1.15.0' },
-        recommended: { version: '1.16.0' },
-      },
-    }).as('cluster-api');
-    cy.get('[data-testid=temporal-version-banner]').should('be.visible');
-    cy.get('[data-testid=close-banner]').click();
-    cy.get('[data-testid=temporal-version-banner]').should('not.exist');
-
-    cy.intercept(Cypress.env('VITE_API_HOST') + '/api/v1/cluster*', {
-      ...cluster,
-      versionInfo: {
-        current: { version: '1.16.0' },
-        recommended: { version: '1.17.0' },
-      },
-    }).as('cluster-api');
-
-    cy.visit('/');
-
-    cy.get('[data-testid=temporal-version-banner]').should('be.visible');
-  });
-});
diff --git a/src/lib/components/banner/banner-temporal-version.svelte b/src/lib/components/banner/banner-temporal-version.svelte
deleted file mode 100644
index 376eb7069..000000000
--- a/src/lib/components/banner/banner-temporal-version.svelte
+++ /dev/null
@@ -1,45 +0,0 @@
-<script lang="ts">
-  import { page } from '$app/stores';
-  
-  import { translate } from '$lib/i18n/translate';
-  import type { BannersState } from '$lib/models/banner-state';
-  import { isVersionNewer } from '$lib/utilities/version-check';
-  
-  import Banner from './banner.svelte';
-  
-
-  export let shownBanner: BannersState;
-
-  const { cluster } = $page.data;
-
-  const severities = {
-    High: 'high',
-    Medium: 'medium',
-    Low: 'low',
-  } as const;
-
-  const { recommended, current } = cluster?.versionInfo ?? {};
-  const alert = cluster?.versionInfo?.alerts?.[0];
-  const severity = alert ? severities[alert.severity] : severities.Low;
-  const key = `server-v${current?.version}`;
-  const link = `https://github.com/temporalio/temporal/releases/tag/v${cluster?.versionInfo?.recommended?.version}`;
-  const show = isVersionNewer(recommended?.version, current?.version);
-  const message =
-    severity === severities.Low
-      ? `📥 ${translate('banner-temporal-version', {
-          version: recommended?.version,
-        })}`
-      : `📥 ${alert?.message}`;
-</script>
-
-{#if show}
-  <Banner
-    {key}
-    {severity}
-    {message}
-    {link}
-    bind:shownBanner
-    data-testid="temporal-version-banner"
-    role="alertdialog"
-  />
-{/if}
diff --git a/src/lib/components/banner/banner-ui-version.svelte b/src/lib/components/banner/banner-ui-version.svelte
deleted file mode 100644
index 41b5eaf42..000000000
--- a/src/lib/components/banner/banner-ui-version.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script lang="ts">
-  import { translate } from '$lib/i18n/translate';
-  import type { BannersState } from '$lib/models/banner-state';
-  import type { UiVersionInfo } from '$lib/types/global';
-  import { isVersionNewer } from '$lib/utilities/version-check';
-  
-  import Banner from './banner.svelte';
-  
-
-  export let shownBanner: BannersState;
-  export let uiVersionInfo: UiVersionInfo;
-
-  const severity = 'low';
-  const key = `ui-v${uiVersionInfo?.current}`;
-  const message = `📥 ${translate('banner-ui-version', {
-    version: uiVersionInfo?.recommended,
-  })}`;
-  const show = isVersionNewer(
-    uiVersionInfo?.recommended,
-    uiVersionInfo?.current,
-  );
-  const link = `https://github.com/temporalio/ui-server/releases/tag/v${uiVersionInfo?.recommended}`;
-</script>
-
-{#if show}
-  <Banner
-    {key}
-    {severity}
-    {message}
-    {link}
-    bind:shownBanner
-    data-testid="ui-version-banner"
-    role="alertdialog"
-  />
-{/if}
diff --git a/src/lib/components/banner/banner.svelte b/src/lib/components/banner/banner.svelte
deleted file mode 100644
index d72b4d4cc..000000000
--- a/src/lib/components/banner/banner.svelte
+++ /dev/null
@@ -1,54 +0,0 @@
-<script lang="ts">
-  import IconButton from '$lib/holocene/icon-button.svelte';
-  import Link from '$lib/holocene/link.svelte';
-  import { translate } from '$lib/i18n/translate';
-  import type { BannersState } from '$lib/models/banner-state';
-  import { close, closedBanners } from '$lib/stores/banner';
-
-  export let key: string;
-  export let severity: 'high' | 'medium' | 'low';
-  export let message: string;
-  export let link: string;
-  export let shownBanner: BannersState;
-
-  $: show = !($closedBanners ?? []).includes(key);
-
-  $: {
-    if (!show) {
-      shownBanner++;
-    }
-  }
-</script>
-
-{#if show}
-  <section
-    class={`relative block text-center leading-10 ${severity}`}
-    {...$$restProps}
-  >
-    <Link href={link} newTab>
-      {message}
-    </Link>
-
-    <IconButton
-      on:click={() => close(key)}
-      data-testid="close-banner"
-      class="text-black-600 absolute top-0 right-0 h-10 w-10 mr-5"
-      icon="close"
-      label={translate('close')}
-    />
-  </section>
-{/if}
-
-<style lang="postcss">
-  .high {
-    @apply bg-red-200 text-red-900;
-  }
-
-  .medium {
-    @apply bg-orange-200 text-orange-900;
-  }
-
-  .low {
-    @apply bg-blue-100 text-blue-900;
-  }
-</style>
diff --git a/src/lib/components/banner/banners.svelte b/src/lib/components/banner/banners.svelte
deleted file mode 100644
index 334a49d38..000000000
--- a/src/lib/components/banner/banners.svelte
+++ /dev/null
@@ -1,22 +0,0 @@
-<script lang="ts">
-  import { page } from '$app/stores';
-  
-  import { BannersState } from '$lib/models/banner-state';
-  import type { UiVersionInfo } from '$lib/types/global';
-  
-  import BannerTemporalVersion from './banner-temporal-version.svelte';
-  import BannerUIVersion from './banner-ui-version.svelte';
-
-  export let uiVersionInfo: UiVersionInfo;
-
-  let shownBanner = BannersState.TemporalVersion;
-  const notifyOnNewVersion = $page.data?.settings.notifyOnNewVersion;
-</script>
-
-{#if notifyOnNewVersion}
-  {#if shownBanner === BannersState.TemporalVersion}
-    <BannerTemporalVersion bind:shownBanner />
-  {:else if shownBanner === BannersState.UIVersion}
-    <BannerUIVersion {uiVersionInfo} bind:shownBanner />
-  {/if}
-{/if}
diff --git a/src/lib/i18n/locales/en/common.ts b/src/lib/i18n/locales/en/common.ts
index bd785283a..cde8af60e 100644
--- a/src/lib/i18n/locales/en/common.ts
+++ b/src/lib/i18n/locales/en/common.ts
@@ -120,8 +120,6 @@ export const Strings = {
   'keyboard-shortcuts': 'Keyboard Shortcuts',
   'close-keyboard-shortcuts': 'Close keyboard shortcuts',
   none: 'None',
-  'banner-temporal-version': 'Temporal v{{version}} is available',
-  'banner-ui-version': 'Temporal UI v{{version}} is available',
   'user-profile': 'User Profile',
   'arrow-key-up': 'Arrow key up',
   'arrow-key-down': 'Arrow key down',
diff --git a/src/lib/models/banner-state.ts b/src/lib/models/banner-state.ts
deleted file mode 100644
index 96fab3042..000000000
--- a/src/lib/models/banner-state.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export enum BannersState {
-  TemporalVersion = 1,
-  UIVersion = 2,
-}
diff --git a/src/lib/services/github-service.ts b/src/lib/services/github-service.ts
deleted file mode 100644
index d759c5689..000000000
--- a/src/lib/services/github-service.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-export const fetchLatestUiVersion = async (
-  request = fetch,
-): Promise<string> => {
-  try {
-    const response = await request(
-      'https://api.github.com/repos/temporalio/ui-server/releases',
-    );
-    const body = await response.json();
-
-    if (!response.ok) {
-      return;
-    }
-
-    let version = undefined;
-    if (body.length > 0) {
-      const { tag_name } = body[0];
-      version = tag_name.replace('v', '');
-    }
-
-    return version;
-  } catch (e) {
-    return '';
-  }
-};
diff --git a/src/lib/stores/banner.ts b/src/lib/stores/banner.ts
deleted file mode 100644
index f4b4d744e..000000000
--- a/src/lib/stores/banner.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { get } from 'svelte/store';
-
-import { persistStore } from '$lib/stores/persist-store';
-
-export const closedBanners = persistStore<string[]>('closedBanners', null);
-
-export const close = (bannerId: string): void => {
-  let banners: string[] = get(closedBanners) ?? [];
-  banners = [...banners, bannerId];
-  banners = banners.slice(banners.length - 10, banners.length);
-
-  closedBanners.set(banners);
-};
diff --git a/src/lib/types/global.ts b/src/lib/types/global.ts
index 8d0d882c9..94015b46e 100644
--- a/src/lib/types/global.ts
+++ b/src/lib/types/global.ts
@@ -111,11 +111,6 @@ export type SelectOptionValue = number | string | boolean;
 
 export type BooleanString = 'true' | 'false';
 
-export type UiVersionInfo = {
-  current: string;
-  recommended: string;
-};
-
 export type DataEncoderStatus = 'notRequested' | 'success' | 'error';
 
 export type Color =
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index a1a9ae2ce..8b533d264 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -5,7 +5,6 @@
 
   import type { PageData } from './$types';
 
-  import Banners from '$lib/components/banner/banners.svelte';
   import DataEncoderSettings from '$lib/components/data-encoder-settings.svelte';
   import SideNavigation from '$lib/components/side-nav.svelte';
   import TopNavigation from '$lib/components/top-nav.svelte';
@@ -30,8 +29,6 @@
 
   export let data: PageData;
 
-  $: ({ uiVersionInfo } = data);
-
   let namespaceList: NamespaceListItem[];
 
   $: isCloud = $page.data?.settings?.runtimeEnvironment?.isCloud;
@@ -104,7 +101,6 @@
   <MainContentContainer>
     <DataEncoderSettings />
     <TopNavigation {logout} {namespaceList} />
-    <Banners {uiVersionInfo} />
     <div
       slot="main"
       class="flex w-full flex-col gap-4 p-8 h-[calc(100%-2.5rem)]"
diff --git a/src/routes/(app)/+layout.ts b/src/routes/(app)/+layout.ts
index 6b9700cf8..6e01f138f 100644
--- a/src/routes/(app)/+layout.ts
+++ b/src/routes/(app)/+layout.ts
@@ -3,12 +3,11 @@ import { redirect } from '@sveltejs/kit';
 import type { LayoutData, LayoutLoad } from './$types';
 
 import { fetchCluster } from '$lib/services/cluster-service';
-import { fetchLatestUiVersion } from '$lib/services/github-service';
 import { fetchNamespaces } from '$lib/services/namespaces-service';
 import { fetchSettings } from '$lib/services/settings-service';
 import { getAuthUser, setAuthUser } from '$lib/stores/auth-user';
 import type { GetClusterInfoResponse } from '$lib/types';
-import type { Settings, UiVersionInfo } from '$lib/types/global';
+import type { Settings } from '$lib/types/global';
 import {
   cleanAuthUserCookie,
   getAuthUserCookie,
@@ -41,16 +40,8 @@ export const load: LayoutLoad = async function ({
 
   const cluster: GetClusterInfoResponse = await fetchCluster(settings, fetch);
 
-  const uiVersionInfo: UiVersionInfo = {
-    current: settings.version,
-    recommended: settings.notifyOnNewVersion
-      ? await fetchLatestUiVersion(fetch)
-      : undefined,
-  };
-
   return {
     user,
-    uiVersionInfo,
     settings,
     cluster,
   };