+ 
+
This is a vulnerability description
', + isHtml: true + } + ] + }) + ); + + const html = getShadowHTML(el); + expect(html).toContain('Diagnosis'); + // HTML content is collapsed by default + expect(html).not.toContain('This is a vulnerability description'); + }); + + it('should render the copy button', async () => { + el = await renderComponent( + createBlock({ + tabKeys: ['hostDetections'], + hostDetections: [{ label: 'IP', value: '192.168.1.1' }] + }) + ); + + const html = getShadowHTML(el); + expect(html).toContain('pi-copy-button'); + }); + + it('should render section breaks for isNewSectionLineBreak fields', async () => { + el = await renderComponent( + createBlock({ + tabKeys: ['hostDetections'], + hostDetections: [ + { label: 'Field1', value: 'value1' }, + { isNewSectionLineBreak: true }, + { label: 'Field2', value: 'value2' } + ] + }) + ); + + const html = getShadowHTML(el); + expect(html).toContain('section-break'); + }); + + it('should not render tabs when there is only one visible tab', async () => { + el = await renderComponent( + createBlock({ + tabKeys: ['hostDetections'], + hostDetections: [{ label: 'Field', value: 'value' }] + }) + ); + + const html = getShadowHTML(el); + expect(html).not.toContain('pi-tab-group'); + }); + + it('should render tabs when there are multiple visible tabs', async () => { + el = await renderComponent( + createBlock({ + tabKeys: ['hostDetections', 'knowledgeBase'], + hostDetections: [{ label: 'IP', value: '192.168.1.1' }], + knowledgeBase: [{ label: 'Title', value: 'Vuln Title', isTitle: true }] + }) + ); + + const html = getShadowHTML(el); + expect(html).toContain('pi-tab-group'); + expect(html).toContain('Host Detections'); + expect(html).toContain('Knowledge Base'); + }); + + it('should skip tabs with empty data arrays', async () => { + el = await renderComponent( + createBlock({ + tabKeys: ['hostDetections', 'emptyTab'], + hostDetections: [{ label: 'IP', value: '192.168.1.1' }], + emptyTab: [] + }) + ); + + const html = getShadowHTML(el); + // Should NOT show a tab group since only one tab has data + expect(html).not.toContain('pi-tab-group'); + }); + + it('should render copyable fields with copy button', async () => { + el = await renderComponent( + createBlock({ + tabKeys: ['hostDetections'], + hostDetections: [ + { label: 'QID', value: '38623', fieldIsCopyable: true, shouldCopyFieldLabel: true } + ] + }) + ); + + const html = getShadowHTML(el); + expect(html).toContain('copyable-field'); + expect(html).toContain('38623'); + expect(html).toContain('QID'); + }); + + it('should render links with pi-external-link for title fields with displayLink', async () => { + el = await renderComponent( + createBlock({ + tabKeys: ['hostDetections'], + hostDetections: [ + { + label: 'Host', + value: 'server1', + isTitle: true, + displayLink: 'https://example.com/host/1' + } + ] + }) + ); + + const html = getShadowHTML(el); + expect(html).toContain('pi-external-link'); + expect(html).toContain('https://example.com/host/1'); + }); + + it('should render list of links', async () => { + el = await renderComponent( + createBlock({ + tabKeys: ['hostDetections'], + hostDetections: [ + { + label: 'CVE IDs', + isListOfLinks: true, + value: [ + { + url: 'https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2024-0001', + id: 'CVE-2024-0001' + }, + { + url: 'https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2024-0002', + id: 'CVE-2024-0002' + } + ] + } + ] + }) + ); + + const html = getShadowHTML(el); + expect(html).toContain('CVE IDs'); + expect(html).toContain('CVE-2024-0001'); + expect(html).toContain('CVE-2024-0002'); + expect(html).toContain('pi-external-link'); + }); +}); diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..7bee2dc --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,21 @@ +{ + "compilerOptions": { + "target": "ES2020", + "module": "CommonJS", + "moduleResolution": "node", + "outDir": "./dist", + "rootDir": "./src", + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, + "strict": true, + "skipLibCheck": true, + "forceConsistentCasingInFileNames": true, + "resolveJsonModule": true, + "declaration": true, + "sourceMap": true, + "experimentalDecorators": true, + "useDefineForClassFields": false + }, + "include": ["src/**/*.ts"], + "exclude": ["node_modules", "dist", "web-components"] +} diff --git a/tsconfig.web.json b/tsconfig.web.json new file mode 100644 index 0000000..ce44f5f --- /dev/null +++ b/tsconfig.web.json @@ -0,0 +1,12 @@ +{ + "compilerOptions": { + "target": "ES2020", + "module": "ESNext", + "moduleResolution": "bundler", + "experimentalDecorators": true, + "useDefineForClassFields": false, + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "noEmit": true + }, + "include": ["web-components/**/*.ts"] +} diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 0000000..1d275b4 --- /dev/null +++ b/vite.config.js @@ -0,0 +1,36 @@ +import config from './config/config.json' with { type: 'json' }; +import { defineConfig } from 'vite'; +import { transformComponentNames, VIRTUAL_COMPONENTS_ID } from '@polarityio/vite-plugin-icl'; +import { resolve } from 'node:path'; + +export default defineConfig({ + plugins: [ + transformComponentNames({ + componentsDir: resolve(__dirname, 'web-components'), + componentRegistries: [ + '@polarityio/pi-components/component-registry.json', + ], + }), + ], + build: { + outDir: 'dist', + emptyOutDir: false, + lib: { + entry: VIRTUAL_COMPONENTS_ID, + name: 'qualys-v2_build', + fileName: () => { + const webComponentsConfig = config.webComponents; + return webComponentsConfig.moduleFilename; + }, + formats: ['es'], + }, + minify: false, + rollupOptions: { + output: { + globals: { + lit: 'lit', + }, + }, + }, + }, +}); diff --git a/vitest.config.ts b/vitest.config.ts new file mode 100644 index 0000000..e6cf8f6 --- /dev/null +++ b/vitest.config.ts @@ -0,0 +1,54 @@ +import { defineConfig } from 'vitest/config'; +import { playwright } from '@vitest/browser-playwright'; +import path from 'path'; +import { fileURLToPath } from 'url'; + +const __dirname = path.dirname(fileURLToPath(import.meta.url)); + +const resolveConfig = { + alias: [ + { + find: /^polarity-integration-utils\/requests$/, + replacement: path.resolve( + __dirname, + 'node_modules/polarity-integration-utils/dist/lib/requests/index.js' + ) + }, + { + find: /^polarity-integration-utils$/, + replacement: path.resolve( + __dirname, + 'node_modules/polarity-integration-utils/dist/lib/index.js' + ) + } + ] +}; + +export default defineConfig({ + resolve: resolveConfig, + test: { + projects: [ + { + resolve: resolveConfig, + test: { + name: 'server', + environment: 'node', + include: ['test/**/*.test.ts'], + exclude: ['test/web-components/**'] + } + }, + { + resolve: resolveConfig, + test: { + name: 'browser', + include: ['test/web-components/**/*.test.ts'], + browser: { + enabled: true, + provider: playwright(), + instances: [{ browser: 'chromium' }] + } + } + } + ] + } +}); diff --git a/web-components/details.ts b/web-components/details.ts new file mode 100644 index 0000000..63938c5 --- /dev/null +++ b/web-components/details.ts @@ -0,0 +1,628 @@ +import { css, html, nothing, unsafeCSS } from 'lit'; +import { property, state } from 'lit/decorators.js'; +import { unsafeHTML } from 'lit/directives/unsafe-html.js'; +import { IntegrationComponentBase, IBlock, typographyCSS } from '@polarityio/pi-components'; +import { faAngleUp, faAngleDown, faCopy } from '@polarityio/pi-icon'; + +interface DisplayField { + label?: string; + value?: any; + isTitle?: boolean; + isDate?: boolean; + isList?: boolean; + isListOfLinks?: boolean; + isHtml?: boolean; + isTextBlock?: boolean; + isNewSectionLineBreak?: boolean; + indent?: number; + collapsibleListItems?: boolean; + showLabelAndValue?: boolean; + fieldIsCopyable?: boolean; + shouldCopyFieldLabel?: boolean; + displayLink?: string; + icon?: string; + capitalize?: boolean; +} + +interface Details { + tabKeys: string[]; + [key: string]: DisplayField[] | string[] | any; +} + +/** + * Converts a camelCase or PascalCase key like "hostDetections" + * to a title-cased, spaced label like "Host Detections". + */ +function humanizeTabKey(key: string): string { + return key + .replace(/([a-z])([A-Z])/g, '$1 $2') + .replace(/([A-Z]+)([A-Z][a-z])/g, '$1 $2') + .replace(/^./, (c) => c.toUpperCase()); +} + +/** + * Formats an ISO 8601 date string using Intl.DateTimeFormat (Chrome 90 safe). + */ +function formatDate(value: string): string { + try { + const date = new Date(value); + if (isNaN(date.getTime())) return value; + const tz = Intl.DateTimeFormat().resolvedOptions().timeZone; + return new Intl.DateTimeFormat('en-US', { + month: '2-digit', + day: '2-digit', + year: 'numeric', + hour: '2-digit', + minute: '2-digit', + second: '2-digit', + hour12: false, + timeZone: tz + }).format(date); + } catch { + return String(value); + } +} + +function capitalizeStr(str: string): string { + if (!str) return ''; + return str.charAt(0).toUpperCase() + str.slice(1); +} + +export class DetailsComponent extends IntegrationComponentBase { + @property({ type: Object }) block: IBlock = { + integrationId: '', + acronym: '', + data: { details: {} as any, summary: [] } + }; + + @state() private _activeTab = ''; + @state() private _expandedStates: Record