feat: ✨ added an update banner and button (#12)

feat(script): ✨ updated user scripts to make the update button work (#12)

src/components.d.ts

@@ -106,6 +106,8 @@ export namespace Components {
          */
         "task": Task;
     }
+    interface TjUpdateBanner {
+    }
 }
 export interface TjFooterCustomEvent<T> extends CustomEvent<T> {
     detail: T;
@@ -298,6 +300,12 @@ declare global {
         prototype: HTMLTjTaskTimesheetElement;
         new (): HTMLTjTaskTimesheetElement;
     };
+    interface HTMLTjUpdateBannerElement extends Components.TjUpdateBanner, HTMLStencilElement {
+    }
+    var HTMLTjUpdateBannerElement: {
+        prototype: HTMLTjUpdateBannerElement;
+        new (): HTMLTjUpdateBannerElement;
+    };
     interface HTMLElementTagNameMap {
         "contextual-help": HTMLContextualHelpElement;
         "notification-toast": HTMLNotificationToastElement;
@@ -311,6 +319,7 @@ declare global {
         "tj-settings": HTMLTjSettingsElement;
         "tj-task-page": HTMLTjTaskPageElement;
         "tj-task-timesheet": HTMLTjTaskTimesheetElement;
+        "tj-update-banner": HTMLTjUpdateBannerElement;
     }
 }
 declare namespace LocalJSX {
@@ -444,6 +453,8 @@ declare namespace LocalJSX {
          */
         "task": Task;
     }
+    interface TjUpdateBanner {
+    }
     interface IntrinsicElements {
         "contextual-help": ContextualHelp;
         "notification-toast": NotificationToast;
@@ -457,6 +468,7 @@ declare namespace LocalJSX {
         "tj-settings": TjSettings;
         "tj-task-page": TjTaskPage;
         "tj-task-timesheet": TjTaskTimesheet;
+        "tj-update-banner": TjUpdateBanner;
     }
 }
 export { LocalJSX as JSX };
@@ -500,6 +512,7 @@ declare module "@stencil/core" {
              * A component that displays the timesheet for a given task allowing the user to record hours.
              */
             "tj-task-timesheet": LocalJSX.TjTaskTimesheet & JSXBase.HTMLAttributes<HTMLTjTaskTimesheetElement>;
+            "tj-update-banner": LocalJSX.TjUpdateBanner & JSXBase.HTMLAttributes<HTMLTjUpdateBannerElement>;
         }
     }
 }

src/components/tj-jira-panel/components/footer/tj-footer.tsx

@@ -53,6 +53,7 @@ export class TJFooter {
             }}
           />
         </div>
+        <tj-update-banner></tj-update-banner>
         <div>
           <p>
             {this.isLoggedIn ? `Logged in as ${User.username} (${User.userId}) @ ` : null}

src/components/tj-jira-panel/components/update-banner/tj-update-banner.css

@@ -0,0 +1,51 @@
+.updateContainer {
+  width: 200px;
+  border: 1px solid rgb(195, 195, 195);
+  border-radius: 8px;
+  overflow: hidden;
+  font-size: 14px;
+
+  &:hover {
+    border: 0;
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+  }
+
+  &:hover .updateContent {
+    max-height: 100px;
+    transition: 0.5s ease-in;
+    padding: 8px;
+  }
+}
+
+.updateHeader {
+  text-align: center;
+  border-radius: 8px 8px 0 0;
+  padding: 4px 0;
+  background: #f8f8f8;
+  font-weight: normal;
+  margin: 0;
+}
+
+.updateContent {
+  max-height: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  transition: 0.5s ease-out;
+  gap: 8px;
+}
+
+.updateContent a.releaseNotesLink {
+  color: var(--primary-color);
+}
+
+.updateButton {
+  background: var(--accent-color);
+  width: fit-content;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  padding: 4px 8px;
+  cursor: pointer;
+  width: 100%;
+}

src/components/tj-jira-panel/components/update-banner/tj-update-banner.tsx

@@ -0,0 +1,48 @@
+import { Component, State, h } from '@stencil/core';
+
+import { version } from '@root/package.json';
+
+@Component({
+  tag: 'tj-update-banner',
+  styleUrl: 'tj-update-banner.css',
+  scoped: true,
+})
+export class TJUpdateBanner {
+  @State() latestVersion: string;
+
+  async componentWillLoad() {
+    if (!localStorage.getItem('tj_version')) {
+      localStorage.setItem('tj_version', version);
+    }
+    const response = await fetch(
+      `https://cdn.jsdelivr.net/npm/@ens-davids/tj-jira-panel/package.json?bypassDiskCache=${Date.now()}`,
+    );
+    const data = await response.json();
+    this.latestVersion = data.version;
+  }
+
+  updateAndRefresh = async () => {
+    localStorage.setItem('tj_version', this.latestVersion);
+    window.location.reload();
+  };
+
+  render() {
+    return version !== this.latestVersion ? (
+      <div class="updateContainer">
+        <h4 class="updateHeader">New TJI Version Available</h4>
+        <div class="updateContent">
+          <a
+            class="releaseNotesLink"
+            href={`https://github.com/davids-ensemble/tj-jira-panel/releases/tag/v2.2.0`}
+            target="_blank"
+          >
+            See release notes
+          </a>
+          <button class="updateButton" onClick={this.updateAndRefresh}>
+            Update and Refresh
+          </button>
+        </div>
+      </div>
+    ) : null;
+  }
+}

user-scripts/tj-jira-panel.arc.js

@@ -19,7 +19,12 @@ const insertTjSection = async () => {
 
 const insertWebElementScript = () => {
   const script = document.createElement('script');
-  script.src = 'https://cdn.jsdelivr.net/npm/@ens-davids/tj-jira-panel/dist/tj-jira-panel/tj-jira-panel.esm.js';
+  const version = localStorage.getItem('tj_version');
+  let url = 'https://cdn.jsdelivr.net/npm/@ens-davids/tj-jira-panel/dist/tj-jira-panel/tj-jira-panel.esm.js';
+  if (version) {
+    url += `?v=${version}`;
+  }
+  script.src = url;
   script.type = 'module';
   script.onload = insertTjSection;
   document.head.appendChild(script);

user-scripts/tj-jira-panel.user.js

@@ -26,7 +26,12 @@ const insertTjSection = async () => {
 
 const insertWebElementScript = () => {
   const script = document.createElement('script');
-  script.src = 'https://cdn.jsdelivr.net/npm/@ens-davids/tj-jira-panel/dist/tj-jira-panel/tj-jira-panel.esm.js';
+  const version = localStorage.getItem('tj_version');
+  let url = 'https://cdn.jsdelivr.net/npm/@ens-davids/tj-jira-panel/dist/tj-jira-panel/tj-jira-panel.esm.js';
+  if (version) {
+    url += `?v=${version}`;
+  }
+  script.src = url;
   script.type = 'module';
   script.onload = insertTjSection;
   document.head.appendChild(script);