Fix "external override" bug. Resolves #26

single-spa · Apr 22, 2020 · 8889eac · 8889eac
1 parent e1df122
commit 8889eac
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 3 deletions.
diff --git a/src/ui/import-map-overrides.css b/src/ui/import-map-overrides.css
@@ -126,6 +126,21 @@ imo-popup a {
 .imo-overrides-table tr td:first-child {
   display: flex;
   align-items: center;
+  padding-right: 32px;
+  position: relative;
+}
+
+.imo-needs-refresh {
+  position: absolute;
+  right: 8px;
+  font-size: 32px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.imo-needs-refresh::before {
+  content: "\27F2";
 }
 
 .imo-status {
@@ -156,6 +171,10 @@ imo-popup a {
   background-color: orange;
 }
 
+.imo-next-default {
+  background-color: darkgoldenrod;
+}
+
 .imo-overrides-table tbody tr:hover {
   cursor: pointer;
   background-color: #404040;

diff --git a/src/ui/list/list.component.js b/src/ui/list/list.component.js
@@ -7,6 +7,7 @@ export default class List extends Component {
   state = {
     notOverriddenMap: { imports: {} },
     currentPageMap: { imports: {} },
+    nextPageMap: { imports: {} },
     dialogModule: null,
     dialogExternalMap: null,
     searchVal: "",
@@ -18,6 +19,9 @@ export default class List extends Component {
     window.importMapOverrides.getCurrentPageMap().then((currentPageMap) => {
       this.setState({ currentPageMap });
     });
+    window.importMapOverrides.getNextPageMap().then((nextPageMap) => {
+      this.setState({ nextPageMap });
+    });
     window.addEventListener("import-map-overrides:change", this.doUpdate);
     this.inputRef.focus();
   }
@@ -64,7 +68,8 @@ export default class List extends Component {
       nextOverriddenModules = [],
       disabledOverrides = [],
       defaultModules = [],
-      externalOverrideModules = [];
+      externalOverrideModules = [],
+      pendingRefreshDefaultModules = [];
 
     const overrideMap = window.importMapOverrides.getOverrideMap(true).imports;
 
@@ -95,6 +100,11 @@ export default class List extends Component {
         this.state.currentPageMap.imports[moduleName]
       ) {
         defaultModules.push(mod);
+      } else if (
+        this.state.notOverriddenMap.imports[moduleName] ===
+        this.state.nextPageMap.imports[moduleName]
+      ) {
+        pendingRefreshDefaultModules.push(mod);
       } else {
         externalOverrideModules.push(mod);
       }
@@ -192,7 +202,25 @@ export default class List extends Component {
               >
                 <td>
                   <div className="imo-status imo-next-override" />
-                  <div>Pending refresh</div>
+                  <div>Inline Override</div>
+                  <div className="imo-needs-refresh" />
+                </td>
+                <td>{mod.moduleName}</td>
+                <td>{toDomain(mod)}</td>
+                <td>{toFileName(mod)}</td>
+              </tr>
+            ))}
+            {pendingRefreshDefaultModules.map((mod) => (
+              <tr
+                role="button"
+                tabIndex={0}
+                onClick={() => this.setState({ dialogModule: mod })}
+                key={mod.moduleName}
+              >
+                <td style={{ position: "relative" }}>
+                  <div className="imo-status imo-next-default" />
+                  <div>Default</div>
+                  <div className="imo-needs-refresh" />
                 </td>
                 <td>{mod.moduleName}</td>
                 <td>{toDomain(mod)}</td>
@@ -350,7 +378,12 @@ export default class List extends Component {
     this.setState({ dialogModule: null });
   };
 
-  doUpdate = () => this.forceUpdate();
+  doUpdate = () => {
+    this.forceUpdate();
+    window.importMapOverrides.getNextPageMap().then((nextPageMap) => {
+      this.setState({ nextPageMap });
+    });
+  };
 
   addNewModule = (name, url) => {
     if (name && url) {