From 5a3a45ae11456cad9b67e6036078d4b3c5b103ba Mon Sep 17 00:00:00 2001
From: Thomas Prouvot <35368290+tprouvot@users.noreply.github.com>
Date: Thu, 13 Apr 2023 09:56:03 +0200
Subject: [PATCH] [general] feature : Allow user to update api version (#59)

#58

![2023-04-13_09-52-35
(1)](https://user-images.githubusercontent.com/35368290/231692542-866315bc-43d5-4d28-9230-0876c7810b59.gif)
---
 CHANGES.md          |   1 +
 addon/inspector.js  |   2 +-
 addon/manifest.json |   3 +-
 addon/popup.css     | 140 +++++++++++++++++++++++++++++++++++---------
 addon/popup.js      |  18 +++++-
 5 files changed, 130 insertions(+), 34 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index 3e8f3834..f6d864e4 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -3,6 +3,7 @@ Version 1.16
 
 General
 -------
+* Allow users to update API Version [feature 58](https://github.com/tprouvot/Chrome-Salesforce-inspector/issues/58)
 * Add org instance in the popup and a link to Salesforce trust status website [feature 53](https://github.com/tprouvot/Chrome-Salesforce-inspector/issues/53) (by [Camille Guillory](https://github.com/CamilleGuillory) )
 * Fix saved query when it contains ":" [issue 55](https://github.com/tprouvot/Chrome-Salesforce-inspector/issues/55) (by [Victor Garcia](https://github.com/victorgz/) )
 
diff --git a/addon/inspector.js b/addon/inspector.js
index 1ff0bc8b..7c002695 100644
--- a/addon/inspector.js
+++ b/addon/inspector.js
@@ -1,4 +1,4 @@
-export let apiVersion = "57.0";
+export let apiVersion = localStorage.getItem("apiVersion") == null ? "57.0" : localStorage.getItem("apiVersion");
 export let sfConn = {
 
   async getSession(sfHost) {
diff --git a/addon/manifest.json b/addon/manifest.json
index 8d18ac56..a0a22b99 100644
--- a/addon/manifest.json
+++ b/addon/manifest.json
@@ -32,8 +32,7 @@
       ],
       "js": [
         "button.js",
-        "inspect-inline.js",
-        "links.js"
+        "inspect-inline.js"
       ]
     }
   ],
diff --git a/addon/popup.css b/addon/popup.css
index d4a0295d..cd7f64ce 100644
--- a/addon/popup.css
+++ b/addon/popup.css
@@ -1,30 +1,41 @@
 * {
     box-sizing: border-box;
 }
-html, body {
+
+html,
+body {
     white-space: normal;
     font-family: Arial, Helvetica, sans-serif;
     margin: 0;
 }
+
 body {
     font-size: .8125rem;
 }
-html, body, #root, [data-reactroot] {
+
+html,
+body,
+#root,
+[data-reactroot] {
     height: 100%;
 }
+
 [data-reactroot] {
     display: flex;
     flex-direction: column;
 }
+
 .main {
     flex: 1;
     overflow-y: scroll;
 }
+
 .footer {
     padding: 12px 8px;
     background: #f4f6f9;
     border-top: 1px solid #d8dde6;
 }
+
 .header {
     background: #061c3f;
     padding: 8px;
@@ -32,11 +43,13 @@ html, body, #root, [data-reactroot] {
     display: flex;
     align-items: center;
 }
+
 .header-icon {
     margin-right: 12px;
     background-color: #d8be5f;
     border-radius: 4px;
 }
+
 .header-icon>svg {
     line-height: 1;
     width: 24px;
@@ -44,26 +57,42 @@ html, body, #root, [data-reactroot] {
     fill: white;
     vertical-align: middle;
 }
+
 a {
     color: #d8dde6;
 }
+
 a[href] {
     color: #0070d2;
     text-decoration: none;
     transition: color .1s linear;
 }
-a[href]:focus, a[href]:hover {
+
+a[href]:focus,
+a[href]:hover {
     text-decoration: underline;
     color: #005fb2;
 }
+
 a[href]:active {
     color: #00396b;
 }
+
 button,
 input {
     width: 100%;
 }
-.button, button.button.button[disabled], .base-button {
+
+input.api-input {
+    width: 32px;
+    font-size: inherit;
+    border: none;
+    background: transparent;
+}
+
+.button,
+button.button.button[disabled],
+.base-button {
     width: 100%;
     padding: 0 1rem;
     text-align: center;
@@ -74,44 +103,61 @@ input {
     border-radius: .25rem;
     line-height: 1.875rem;
     text-decoration: none;
-    transition: color 50ms linear,background-color 50ms linear;
+    transition: color 50ms linear, background-color 50ms linear;
     color: #d8dde6;
     cursor: default;
     margin-bottom: 4px;
 }
-.button:last-child, button.button.button[disabled]:last-child, .base-button:last-child {
+
+.button:last-child,
+button.button.button[disabled]:last-child,
+.base-button:last-child {
     margin-bottom: 0;
 }
+
 .base-button {
     border: none;
 }
-button.button, a.button[href], a.base-button[href] {
+
+button.button,
+a.button[href],
+a.base-button[href] {
     color: #0070d2;
     cursor: pointer;
     font-family: unset;
     font-size: unset;
 }
-button.button:hover, a[href].button:hover, .button:focus {
+
+button.button:hover,
+a[href].button:hover,
+.button:focus {
     background-color: #f4f6f9;
     color: #005fb2;
     text-decoration: none;
 }
-button.button:active, a[href]:active {
+
+button.button:active,
+a[href]:active {
     background-color: #eef1f6;
     color: #00396b;
     text-decoration: none;
 }
+
 .button:focus {
     outline: 0;
     box-shadow: 0 0 3px #0070D2;
     text-decoration: none;
 }
-.global-box, .all-data-box {
+
+.global-box,
+.all-data-box {
     padding: 12px 8px;
 }
+
 .all-data-box {
     border-bottom: 1px solid #d8dde6;
 }
+
 .all-data-input {
     font-size: .9em;
     font: inherit;
@@ -120,41 +166,49 @@ button.button:active, a[href]:active {
     color: #16325c;
     border: 1px solid #d8dde6;
     border-radius: 0 .25rem .25rem .25rem;
-    transition: border .1s linear,background-color .1s linear;
+    transition: border .1s linear, background-color .1s linear;
     display: inline-block;
     padding: 0 2rem 0 .75rem;
     line-height: 1.875rem;
     vertical-align: middle;
     flex-grow: 1;
 }
-.all-data-input:active, .all-data-input:focus {
+
+.all-data-input:active,
+.all-data-input:focus {
     outline: 0;
     border-color: #1589ee;
     background-color: #fff;
     box-shadow: 0 0 3px #0070D2;
 }
+
 .all-data-box-inner {
     margin-top: .5rem;
     display: flex;
     flex-direction: column;
-    min-height: 12em; /* should be heigh enough so the buttons below don't jump around when the contents of this box loads */
+    min-height: 12em;
+    /* should be heigh enough so the buttons below don't jump around when the contents of this box loads */
     color: #54698d;
     line-height: 1.5;
 }
+
 .all-data-box-inner.empty {
     justify-content: center;
     align-items: center;
 }
+
 .all-data-box-data {
     flex: 1;
     font-size: 0.9em;
 }
-.data-element {
-}
+
+.data-element {}
+
 .input-with-dropdown {
     position: relative;
     flex-grow: 1;
 }
+
 .input-with-dropdown svg {
     width: .75rem;
     height: .75rem;
@@ -164,9 +218,11 @@ button.button:active, a[href]:active {
     margin-top: -.375rem;
     fill: #54698d;
 }
+
 .autocomplete-container {
     position: relative;
 }
+
 .autocomplete {
     border: 1px solid #d8dde6;
     border-radius: .25rem;
@@ -179,6 +235,7 @@ button.button:active, a[href]:active {
     overflow-x: hidden;
     z-index: 1;
 }
+
 .autocomplete-item {
     display: block;
     padding: .25rem .5rem;
@@ -186,80 +243,99 @@ button.button:active, a[href]:active {
     line-height: 1.5;
     cursor: pointer;
 }
-.autocomplete-item-main, .autocomplete-item-sub, .data-element {
+
+.autocomplete-item-main,
+.autocomplete-item-sub,
+.data-element {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
 }
+
 .autocomplete-item-sub {
     font-size: .75rem;
     color: #54698d;
     margin-top: -.25rem;
 }
+
 .autocomplete-item mark {
     font-weight: 700;
     background-color: transparent;
 }
+
 .autocomplete-item.selected {
     background-color: #f4f6f9;
 }
+
 @keyframes bg-load {
-  50% {
-    background-color: #EEF6F1;
-    color: #006B2D;
-  }
+    50% {
+        background-color: #EEF6F1;
+        color: #006B2D;
+    }
 }
+
 .all-data-box.loading,
 .users-box.loading,
 #showStdPageDetailsBtn.loading {
     animation: bg-load 1s cubic-bezier(.5, .4, .5, .6) infinite;
 }
+
 .meta {
     font-size: 12px;
     text-align: right;
     display: flex;
     justify-content: space-between;
 }
+
 .meta .version {
     float: left;
     font-size: 0.8em;
     margin-top: 0.2em;
 }
+
 .meta .tip {
     text-align: center;
     color: #999999;
     font-size: 0.8em;
     margin-top: 0.2em;
 }
+
 .all-data-box-data table {
     text-align: left;
     border-spacing: 0px;
     border-collapse: separate;
 }
+
 .all-data-box-data td {
     padding: 0px;
 }
+
 .all-data-box-data th {
     padding: 0px;
     padding-right: 5px;
 }
+
 .top-space {
     margin-top: 1em;
 }
+
 .button-secondary {
     line-height: 1.2rem;
     width: auto;
     vertical-align: top;
     margin: 2px;
 }
+
 .center {
     text-align: center;
 }
+
 ul.small-tabs {
     margin: 0;
     padding: 0;
     font-size: 0.90em;
 }
+
 ul.small-tabs li {
     display: inline;
     border: solid 1px #d8dde6;
@@ -269,9 +345,11 @@ ul.small-tabs li {
     cursor: pointer;
     line-height: 1.5em;
 }
+
 ul.small-tabs li:first-child {
     margin: 0px;
 }
+
 ul.small-tabs li.active {
     /*background-color: #d8dde6;*/
     font-style: normal;
@@ -280,22 +358,28 @@ ul.small-tabs li.active {
     padding-top: 6px;
     border-radius: 3px;
 }
+
 ul.small-tabs li:hover {
     background-color: #f4f6f9;
 }
+
 .inactive {
-  color: #c0c0c0
+    color: #c0c0c0
 }
+
 .small {
-  font-size: 0.8em;
+    font-size: 0.8em;
 }
+
 .oneliner {
-  white-space: nowrap;
+    white-space: nowrap;
 }
+
 .flag {
-  vertical-align: middle;
-  opacity: 70%;
-}
-.hide{
-    display:none;
+    vertical-align: middle;
+    opacity: 70%;
 }
+
+.hide {
+    display: none;
+}
\ No newline at end of file
diff --git a/addon/popup.js b/addon/popup.js
index 27c7018e..68bad263 100644
--- a/addon/popup.js
+++ b/addon/popup.js
@@ -93,6 +93,10 @@ class App extends React.PureComponent {
     }
     //TODO: Add shortcut for "u to go to user aspect"
   }
+  onChangeApi(e) {
+    localStorage.setItem("apiVersion", e.target.value + ".0");
+    this.setState({ name: e.target.value });
+  }
   componentDidMount() {
     addEventListener("message", this.onContextUrlMessage);
     addEventListener("keydown", this.onShortcutKey);
@@ -161,9 +165,17 @@ class App extends React.PureComponent {
         h("div", { className: "footer" },
           h("div", { className: "meta" },
             h("div", { className: "version" },
-              h("a", { href: "https://github.com/tprouvot/Chrome-Salesforce-inspector/blob/master/CHANGES.md" }, "v" + addonVersion),
-              " / " + apiVersion + " / ",
-              h("a", { href: "https://status.salesforce.com/instances/" + orgInstance, target: linkTarget }, orgInstance),
+              h("a", { href: "https://github.com/tprouvot/Chrome-Salesforce-inspector/blob/master/CHANGES.md", title: "Release note" }, "v" + addonVersion),
+              " / ",
+              h("a", { href: "https://status.salesforce.com/instances/" + orgInstance, title: "Instance status", target: linkTarget }, orgInstance),
+              " / ",
+              h("input", {
+                className: "api-input",
+                type: "number",
+                title: "Update api version",
+                onChange: this.onChangeApi,
+                value: apiVersion.split(".0")[0]
+              }),
             ),
             h("div", { className: "tip" }, "[ctrl+alt+i] to open"),
             h("a", { className: "about", href: "https://github.com/tprouvot/Chrome-Salesforce-inspector", target: linkTarget }, "About"),