feat(script): ✨ added script version to user scripts (#14)

feat(update-banner): ✨ added a script version check and tooltip to the button (#14)
davids-ensemble · May 18, 2024 · c9fd3e2 · c9fd3e2
1 parent 357c569
commit c9fd3e2
Show file tree

Hide file tree

Showing 8 changed files with 91 additions and 10 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -35,6 +35,10 @@ export namespace Components {
           * Whether the user is logged in. Certain information is only available when logged in.
          */
         "isLoggedIn": boolean;
+        /**
+          * The version of the script used to inject the panel.
+         */
+        "scriptVersion": string | undefined;
     }
     /**
      * The heading for the TJ panel. It contains the title and a button to toggle the panel.
@@ -54,6 +58,10 @@ export namespace Components {
           * The Jira summary of the task to display.
          */
         "jiraSummary": string;
+        /**
+          * The version of the script used to inject the panel.
+         */
+        "scriptVersion": string | undefined;
     }
     /**
      * A form to log into TJ.
@@ -106,7 +114,14 @@ export namespace Components {
          */
         "task": Task;
     }
+    /**
+     * A banner that displays when a new version of the component is available.
+     */
     interface TjUpdateBanner {
+        /**
+          * The version of the script used to inject the panel.
+         */
+        "scriptVersion": string | undefined;
     }
 }
 export interface TjFooterCustomEvent<T> extends CustomEvent<T> {
@@ -300,6 +315,9 @@ declare global {
         prototype: HTMLTjTaskTimesheetElement;
         new (): HTMLTjTaskTimesheetElement;
     };
+    /**
+     * A banner that displays when a new version of the component is available.
+     */
     interface HTMLTjUpdateBannerElement extends Components.TjUpdateBanner, HTMLStencilElement {
     }
     var HTMLTjUpdateBannerElement: {
@@ -354,6 +372,10 @@ declare namespace LocalJSX {
           * Emitted when the user presses the settings button.
          */
         "onShowSettings"?: (event: TjFooterCustomEvent<void>) => void;
+        /**
+          * The version of the script used to inject the panel.
+         */
+        "scriptVersion"?: string | undefined;
     }
     /**
      * The heading for the TJ panel. It contains the title and a button to toggle the panel.
@@ -377,6 +399,10 @@ declare namespace LocalJSX {
           * The Jira summary of the task to display.
          */
         "jiraSummary": string;
+        /**
+          * The version of the script used to inject the panel.
+         */
+        "scriptVersion"?: string | undefined;
     }
     /**
      * A form to log into TJ.
@@ -453,7 +479,14 @@ declare namespace LocalJSX {
          */
         "task": Task;
     }
+    /**
+     * A banner that displays when a new version of the component is available.
+     */
     interface TjUpdateBanner {
+        /**
+          * The version of the script used to inject the panel.
+         */
+        "scriptVersion"?: string | undefined;
     }
     interface IntrinsicElements {
         "contextual-help": ContextualHelp;
@@ -512,6 +545,9 @@ 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>;
+            /**
+             * A banner that displays when a new version of the component is available.
+             */
             "tj-update-banner": LocalJSX.TjUpdateBanner & JSXBase.HTMLAttributes<HTMLTjUpdateBannerElement>;
         }
     }

diff --git a/src/components/tj-jira-panel/components/footer/tj-footer.tsx b/src/components/tj-jira-panel/components/footer/tj-footer.tsx
@@ -28,6 +28,10 @@ export class TJFooter {
    * Whether the user is logged in. Certain information is only available when logged in.
    */
   @Prop() isLoggedIn: boolean;
+  /**
+   * The version of the script used to inject the panel.
+   */
+  @Prop() scriptVersion: string | undefined;
 
   @State() serverVersion: string;
   @State() isSettingsOpen = false;
@@ -53,7 +57,7 @@ export class TJFooter {
             }}
           />
         </div>
-        <tj-update-banner></tj-update-banner>
+        <tj-update-banner scriptVersion={this.scriptVersion}></tj-update-banner>
         <div>
           <p>
             {this.isLoggedIn ? `Logged in as ${User.username} (${User.userId}) @ ` : null}

diff --git a/src/components/tj-jira-panel/components/update-banner/tj-update-banner.css b/src/components/tj-jira-panel/components/update-banner/tj-update-banner.css
@@ -38,6 +38,11 @@
 .updateContent a.releaseNotesLink {
   color: var(--primary-color);
 }
+.updateButtonContainer {
+  width: 100%;
+  display: flex;
+  gap: 2px;
+}
 
 .updateButton {
   background: var(--accent-color);
@@ -48,4 +53,9 @@
   padding: 4px 8px;
   cursor: pointer;
   width: 100%;
+
+  &:disabled {
+    background: #ccc;
+    cursor: not-allowed;
+  }
 }
diff --git a/src/components/tj-jira-panel/components/update-banner/tj-update-banner.tsx b/src/components/tj-jira-panel/components/update-banner/tj-update-banner.tsx
@@ -1,16 +1,27 @@
-import { Component, State, h } from '@stencil/core';
+import { Component, Prop, State, h } from '@stencil/core';
 
 import { version } from '@root/package.json';
 
+/**
+ * A banner that displays when a new version of the component is available.
+ */
 @Component({
   tag: 'tj-update-banner',
   styleUrl: 'tj-update-banner.css',
   scoped: true,
 })
 export class TJUpdateBanner {
+  /**
+   * The version of the script used to inject the panel.
+   */
+  @Prop() scriptVersion: string | undefined = null;
+
   @State() latestVersion: string;
+  isButtonDisabled = !this.scriptVersion || new Date(this.scriptVersion) < new Date('2024-05-18');
 
   async componentWillLoad() {
+    console.log('scriptVersion', this.scriptVersion);
+    console.log(this.isButtonDisabled);
     if (!localStorage.getItem('tj_version')) {
       localStorage.setItem('tj_version', version);
     }
@@ -33,14 +44,24 @@ export class TJUpdateBanner {
         <div class="updateContent">
           <a
             class="releaseNotesLink"
-            href={`https://github.com/davids-ensemble/tj-jira-panel/releases/tag/v2.2.0`}
+            href={`https://github.com/davids-ensemble/tj-jira-panel/releases/tag/${this.latestVersion}`}
             target="_blank"
           >
             See release notes
           </a>
-          <button class="updateButton" onClick={this.updateAndRefresh}>
-            Update and Refresh
-          </button>
+          <div class="updateButtonContainer">
+            <button class="updateButton" onClick={this.updateAndRefresh} disabled={this.isButtonDisabled}>
+              Update and Refresh
+            </button>
+            {this.isButtonDisabled && (
+              <contextual-help variant="help">
+                <h6 slot="heading">Outdated script version</h6>
+                <p slot="content">
+                  In order to use this feature you need to update to at least user-script version 2024-05-18.
+                </p>
+              </contextual-help>
+            )}
+          </div>
         </div>
       </div>
     ) : null;

diff --git a/src/components/tj-jira-panel/tj-jira-panel.tsx b/src/components/tj-jira-panel/tj-jira-panel.tsx
@@ -17,6 +17,10 @@ export class TJJiraPanel {
    * The Jira summary of the task to display.
    */
   @Prop() jiraSummary!: string;
+  /**
+   * The version of the script used to inject the panel.
+   */
+  @Prop() scriptVersion: string | undefined;
 
   @State() isLoggedIn = false;
   @State() isLoading = true;
@@ -86,7 +90,7 @@ export class TJJiraPanel {
                 },
               ]}
             />
-            <tj-footer isLoggedIn={this.isLoggedIn}></tj-footer>
+            <tj-footer isLoggedIn={this.isLoggedIn} scriptVersion={this.scriptVersion}></tj-footer>
           </main>
         </Loader>
       </notifications-provider>

diff --git a/src/index.html b/src/index.html
@@ -27,7 +27,7 @@
 </head>
 
 <body>
-  <tj-jira-panel jira-id="JIRA-1999" jira-summary="Doing a thing"></tj-jira-panel>
+  <tj-jira-panel jira-id="JIRA-1999" jira-summary="Doing a thing" script-version="2024-05-18"></tj-jira-panel>
   <hr />
   <tj-jira-panel jira-id="JIRA-10392" jira-summary="Doing a thing"></tj-jira-panel>
 </body>

diff --git a/user-scripts/tj-jira-panel.arc.js b/user-scripts/tj-jira-panel.arc.js
@@ -1,4 +1,5 @@
 let jiraId = '';
+const SCRIPT_VERSION = '2024-05-18';
 
 const waitForElement = async selector => {
   while (document.querySelector(selector) === null) {
@@ -14,6 +15,7 @@ const insertTjSection = async () => {
   const tjWebComp = document.createElement('tj-jira-panel');
   tjWebComp.setAttribute('jira-id', jiraId);
   tjWebComp.setAttribute('jira-summary', jiraSummary);
+  tjWebComp.setAttribute('script-version', SCRIPT_VERSION);
   gitIssueWebpanel.insertAdjacentElement('afterend', tjWebComp);
 };
 

diff --git a/user-scripts/tj-jira-panel.user.js b/user-scripts/tj-jira-panel.user.js
@@ -1,12 +1,15 @@
 // ==UserScript==
 // @name         TJ Web Panel Injector
 // @namespace    http://tampermonkey.net/
-// @version      2024-04-05
+// @version      2024-05-18
 // @description  Inserts a TJ web panel into Adobe's jira
-// @author       You
+// @author       davids-ensemble
 // @match        https://jira.corp.adobe.com/*
 // ==/UserScript==
 
+let jiraId = '';
+const SCRIPT_VERSION = '2024-05-18';
+
 const waitForElement = async selector => {
   while (document.querySelector(selector) === null) {
     await new Promise(resolve => requestAnimationFrame(resolve));
@@ -21,6 +24,7 @@ const insertTjSection = async () => {
   const tjWebComp = document.createElement('tj-jira-panel');
   tjWebComp.setAttribute('jira-id', jiraId);
   tjWebComp.setAttribute('jira-summary', jiraSummary);
+  tjWebComp.setAttribute('script-version', SCRIPT_VERSION);
   gitIssueWebpanel.insertAdjacentElement('afterend', tjWebComp);
 };