>);
- const versionDataJson = serializeForScript(versionData);
-
- // Build error section HTML
- const hasAuthError = Object.values(cacheErrors).some(error => this.classifySourceError(error).isAuth);
- const errorSectionHtml = hasErrors ? `
-
-
- ${Object.entries(cacheErrors).map(([source, error], index) => {
- const { summary } = this.classifySourceError(error);
- return `
-
-
${this.escapeHtml(source)}
-
${this.escapeHtml(summary)}
-
-
${this.escapeHtml(error)}
-
- `;
- }).join('')}
- ${hasAuthError ? '
' : ''}
-
No components found. Click "Refresh" to load components from your configured sources.
' :
- componentGroups.map(source => {
- const sourceId = source.source.replace(/[^a-zA-Z0-9]/g, '_');
- const projectsHtml = (source.projects && Array.isArray(source.projects) ? source.projects : []).map(project => {
- const projectId = `${sourceId}_${project.path.replace(/[^a-zA-Z0-9]/g, '_')}`;
- const components = project.components && Array.isArray(project.components) ? project.components : [];
- const componentsHtml = components.length === 0 ?
- 'No components found in this project
' :
- components.map(component => {
- const componentKey = `${component.name}-${component.sourcePath}`;
- const initialVersion = component.defaultVersion || component.availableVersions[0];
- const hasVersions = component.availableVersions && component.availableVersions.length > 0;
-
- return `
-
-
-
${this.renderInlineMarkdown(component.description || '')}
- ${hasVersions && component.availableVersions.length > 1 ? `
-
- Default version: ${this.escapeHtml(component.defaultVersion)}
-
- ` : ''}
-
-
-
- ${componentsHtml}
-
-
-
-
- ${projectsHtml}
-
-
- ${componentsHtml}
-
-
-
-
-
-
-
-
-
- `;
+ const cacheErrorList = Object.entries(cacheErrors).map(([source, raw]) => ({
+ source,
+ summary: this.classifySourceError(raw).summary,
+ raw,
+ }));
+
+ return renderDocument(ComponentBrowserView, {
+ cspSource: webview.cspSource,
+ nonce,
+ styleUri: styleUri.toString(),
+ scriptUri: scriptUri.toString(),
+ sources: componentGroups,
+ cacheErrors: cacheErrorList,
+ hasAuthError: Object.values(cacheErrors).some(error => this.classifySourceError(error).isAuth),
+ versionData,
+ });
}
/**
@@ -897,147 +739,34 @@ export class ComponentBrowserProvider {
const styleUri = assetUri(webview, this.context.extensionUri, 'styles/componentDetails.css');
const scriptUri = assetUri(webview, this.context.extensionUri, 'client/componentDetails.js');
- const parameters = component.parameters || [];
const availableVersions = component.availableVersions || [component.version || 'main'];
- const headerSummary = component.summary;
- const headerUsage = component.usage;
- const headerNotes = Array.isArray(component.notes) ? component.notes : [];
- const hasContext = Boolean(headerSummary || headerUsage || headerNotes.length > 0);
- const rawYaml = component.rawYaml || '';
- const hasRawYaml = Boolean(rawYaml);
const templateFileUrl = this.buildTemplateFileUrl(component);
// `documentationUrl` is whatever the component's publisher put in its catalog entry. Validate before display; the
// anchors carry no URL, and clicking one has the extension host open it (see `openLink`).
const safeDocUrl = safeHttpUrl(component.documentationUrl);
const safeTemplateUrl = safeHttpUrl(templateFileUrl);
- return `
-
-
-
-
-
- Component: ${this.escapeHtml(component.name)}
- ${cspMetaTag(webview.cspSource, nonce)}
-
-
-
- ${this.escapeHtml(component.name)}
-
-
- ${this.renderInlineMarkdown(component.description || '')}
-
-
-
-
-
-
-
-
-
-
- ${parameters.length === 0 ?
- '
No parameters documented for this component.
' :
- `
- ${parameters.map((param: ComponentParameter) => `
-
-
-
- ${this.escapeHtml(param.name)}
-
- (${param.required ? 'required' : 'optional'})
-
-
-
${this.escapeHtml(param.description || `Parameter: ${param.name}`)}
-
Type: ${this.escapeHtml(param.type || 'string')}
- ${param.default !== undefined ?
- `
Default: ${this.escapeHtml(String(param.default))}
` : ''}
-
-
-
-
-
-
- `).join('')}
-
`
- }
-
-
Insert Options
-
-
-
-
-
-
-
-
Configure Component Sources
-
-
-
No GitLab component sources are configured. Please add sources in your settings.
-
-
Go to: Settings > Extensions > GitLab Component Helper > Component Sources
-
-
Example configuration:
-
- [
- {
- "name": "GitLab CI Examples",
- "path": "gitlab-org/gitlab-foss",
- "gitlabInstance": "gitlab.com"
- },
- {
- "name": "OpenTofu Components",
- "path": "components/opentofu",
- "gitlabInstance": "gitlab.com"
- },
- {
- "name": "Internal Components",
- "path": "your-group/your-project",
- "gitlabInstance": "gitlab.your-company.com"
- }
- ]
-
-
${this.escapeHtml(source)}
-
${this.escapeHtml(summary)}
-
-
${this.escapeHtml(error)}
-
Component Loading Errors
-
- There were errors loading components from the configured sources:
-
-
- ${errorItemsHtml}
-
-
-
- ${hasAuthError ? '' : ''}
-
-
-
-
-
-
-
- `;
+ return renderDocument(ErrorsView, {
+ cspSource: webview.cspSource,
+ nonce,
+ styleUri: styleUri.toString(),
+ scriptUri: scriptUri.toString(),
+ errors: entries.map(([source, raw]) => ({ source, summary: this.classifySourceError(raw).summary, raw })),
+ hasAuthError: entries.some(([, error]) => this.classifySourceError(error).isAuth),
+ });
}
private async showCacheStatus() {
@@ -1318,37 +964,14 @@ ${sourceErrors.size > 0 ? '\nErrors:\n' + Array.from(sourceErrors.entries()).map
const nonce = createNonce();
const styleUri = assetUri(webview, this.context.extensionUri, 'styles/errors.css');
const scriptUri = assetUri(webview, this.context.extensionUri, 'client/errors.js');
- return `
-
-
-
-
-
- ${cspMetaTag(webview.cspSource, nonce)}
- GitLab CI/CD Components - Error
-
-
-
- Component Loading Error
-
-
- ${isAuth
- ? `${this.escapeHtml(summary)}
-
-
${this.escapeHtml(message)}`
- : `
Error: ${this.escapeHtml(message)}`}
-
- ${isAuth ? '' : ''}
-
-
-
-
-
-
-
- `;
+ return renderDocument(ErrorView, {
+ cspSource: webview.cspSource,
+ nonce,
+ styleUri: styleUri.toString(),
+ scriptUri: scriptUri.toString(),
+ message,
+ authSummary: isAuth ? summary : undefined,
+ });
}
diff --git a/src/webview/csp.ts b/src/webview/csp.ts
index 72e0dd6..8a1bb4d 100644
--- a/src/webview/csp.ts
+++ b/src/webview/csp.ts
@@ -1,7 +1,7 @@
/**
* Content-Security-Policy plumbing for webview documents.
*
- * `vscode`-free and pure so the unit suite can drive it directly: `cspMetaTag` takes the webview's `cspSource` as a
+ * `vscode`-free and pure so the unit suite can drive it directly: `cspPolicy` takes the webview's `cspSource` as a
* string rather than the webview itself, leaving `src/webview/webviewHtml.ts` to hold the parts that need the API.
*/
@@ -28,7 +28,7 @@ export function createNonce(): string {
}
/**
- * Builds the Content-Security-Policy meta tag for a webview document.
+ * Builds the Content-Security-Policy for a webview document, for `Page` to set on its meta tag.
*
* Styles and scripts must come from files under the webview's own origin — no inline `