I have an Azure DevOps extension that adds a custom Build results tab (ms.vss-build-web.build-results-tab). Everything is working fine except for the sizing of the component. When the page loads, my component is the correct size (the width of the screen, matching all of the built-in components). However once I resize the browser window, my component is stuck at its original size.
On load:
After resizing browser:
Calling SDK.resize() seems to have no impact whatsoever if called after the component has called SDK.notifyLoadSucceeded(). If I set a breakpoint, resize the window with the breakpoint hit, and then manually call SDK.resize() (before I've notified completion), then the tab resizes to the screen width.
For debugging purposes I've added a button that calls SDK.resize(). I've also tried adding a resize event handler to the window, and calling it from there. Neither works.
import * as SDK from "azure-devops-extension-sdk";
import * as ReactDOM from "react-dom";
import * as React from "react";
export class BuildResultsTab extends React.Component {
// this is a stripped down version
// component does some loading/processing between
// init and notifyLoadSucceeded
public async componentDidMount() {
SDK.init({loaded: false, applyTheme: true});
debugger; // manually resize browser here
SDK.resize(); // works
SDK.notifyLoadSucceeded();
debugger; // resize browser again
SDK.resize(); // does not seem to work
}
}
ReactDOM.render(<BuildResultsTab />, document.getElementById("report-viewer-container"));
Note that my component itself is set to fill its container (see CSS below):
<!-- this is reportViewerTab.html -->
<!DOCTYPE html>
<html lang="en">
<body>
<div id="report-viewer-container" style="padding: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0"></div>
<script type="text/javascript" src="main.js" charset="utf-8"></script>
</body>
</html>
The problem seems to be with the container itself (the one controlled by Azure DevOps that my component is sandboxed inside of). That iframe always has a static height and width set on it which corresponds to the size of the screen when the component first completes loading:
<!-- Note: This is the Azure DevOps controlled container -->
<iframe class="external-content--iframe flex-grow"
role="presentation" frameborder="0"
src="https://myorg.gallerycdn.vsassets.io/extensions/myorg/report-viewer/0.0.1.42923/1637068395422/report-viewer-tab/reportViewerTab.html"
style="height: 565px; width: 871px;"></iframe> <!-- SEE STATIC DIMENSIONS HERE -->
I don't set those values, so it must be Azure DevOps adding them (I assume as part of the resize call). The same thing happens in mobile; loading the tab looks great but if I then switch to landscape view everything resizes except my tab.
Am I missing something? Is there a way to get my tab's container to resize with the rest of the window? It's not a big deal, but it certainly is annoying.
I am using the azure-devops-ui v2.167.21 (React components) package alongside azure-devops-extension-sdk v2.0.11.
Here's a snippet of my extension manifest, in case it matters:
{
"manifestVersion": 1,
// snip
"targets": [{
"id": "Microsoft.VisualStudio.Services"
}],
"scopes": [ "vso.build" ],
// snip
"contributions": [
{
"id": "report-viewer-tab",
"type": "ms.vss-build-web.build-results-tab",
"description": "Report Viewer Tab",
"targets": [
"ms.vss-build-web.build-results-view"
],
"properties": {
"name": "Report Viewer",
"title":"Reports",
"uri": "report-viewer-tab/reportViewerTab.html",
"dynamic": true,
"supportsTasks": ["817c6dfe-0ecf-494b-9b94-0b13bdb7d613"],
"supportsMobile": true
},
"includes": [
"ms.vss-releaseManagement-web.release-service-data-external"
]
}
],
"files": [
// snip... appropriate paths are here
]
}
I've also tried setting contributions[0].properties.width to "100%" based on some examples found in a Github search but that didn't seem to do anything. That's also where the dynamic: true came from and I admit I have absolutely no clue what that is supposed to do--documentation on this stuff is fairly lacking.
