fix(findings): make sure findings collapse when changing project id

README.md

@@ -148,15 +148,16 @@ Rendered Markdown, such as data from GitLab issues, are only served from the src
 - [x] Meta tags
 - [x] CI/CD
 - [x] Eslint rules
-- [ ] Mock OAuth and GitLab API
-- [ ] PWA
+- [x] Mock OAuth and GitLab API
+- [ ] RocketChat API
+- [ ] Replace mobx with reactivecontroller + context
 - [ ] Unit Tests
 - [ ] Documentation
   - [ ] SSL
   - [ ] Security
   - [ ] Proxy config
   - [ ] Badges
-- [ ] Responsive
 - [ ] Security Audit
 - [ ] Cypress
+- [ ] PWA
 - [ ] Production

public/iframe.css

@@ -135,7 +135,7 @@ body.dark blockquote {
 }
 
 body.light blockquote::before {
-  color: var(--sl-color-gray-100);
+  color: var(--sl-color-gray-300);
 }
 
 body.dark blockquote::before {

src/elements/secure-iframe/secure-iframe.ts

@@ -14,6 +14,8 @@ export class SecureIframe extends MobxLitElement {
   private themeStore = themeStore
   private ref: Ref<HTMLIFrameElement> = createRef()
 
+  @property()
+  private sandbox = ''
   @property()
   private UNSAFE_html = ''
 
@@ -79,9 +81,9 @@ export class SecureIframe extends MobxLitElement {
 
   render() {
     return html`<iframe
-      class=${this.themeStore.theme}
       ${ref(this.ref)}
-      sandbox="allow-same-origin"
+      class=${this.themeStore.theme}
+      sandbox=${this.sandbox}
     ></iframe>`
   }
 }

src/features/project-detail/elements/finding-details-item.ts

@@ -57,6 +57,17 @@ export class FindingDetailsItem extends MobxLitElement {
     value.addEventListener('sl-show', () => this.onExpand())
   }
 
+  protected async updated(changed: Map<PropertyKey, unknown>): Promise<void> {
+    if (this.fetched) {
+      if (changed.has('projectId')) {
+        this.fetched = false
+        if (!this.detailsRef.value?.hidden) {
+          await this.detailsRef.value?.hide()
+        }
+      }
+    }
+  }
+
   private onExpand() {
     if (!this.fetched) {
       void projectsService.syncProjectFinding(this.projectId, this.finding.iid)
@@ -87,12 +98,13 @@ export class FindingDetailsItem extends MobxLitElement {
       projectFindingKey(projectId, iid)
     ]
 
-    let iframe = html`error`
+    let iframe = html``
 
     if (details?.isLoading) {
       iframe = html`loading...`
     } else if (!details?.isLoading && details?.data) {
       iframe = html`<secure-iframe
+        sandbox="allow-same-origin"
         .UNSAFE_html=${findingMarkdownHtml(finding, details.data, this.baseUrl)}
       ></secure-iframe>`
     }