diff --git a/.yarn/cache/@types-highlight.js-npm-10.1.0-22832e5dc2-284f47e89b.zip b/.yarn/cache/@types-highlight.js-npm-10.1.0-22832e5dc2-284f47e89b.zip new file mode 100644 index 0000000000..1458136ce9 Binary files /dev/null and b/.yarn/cache/@types-highlight.js-npm-10.1.0-22832e5dc2-284f47e89b.zip differ diff --git a/.yarn/cache/highlight.js-npm-11.8.0-6ff1e42749-d2578a57ae.zip b/.yarn/cache/highlight.js-npm-11.8.0-6ff1e42749-d2578a57ae.zip new file mode 100644 index 0000000000..2f1e25c8df Binary files /dev/null and b/.yarn/cache/highlight.js-npm-11.8.0-6ff1e42749-d2578a57ae.zip differ diff --git a/.yarn/cache/ngx-highlightjs-npm-10.0.0-aeef68d605-ea5d9f4b69.zip b/.yarn/cache/ngx-highlightjs-npm-10.0.0-aeef68d605-ea5d9f4b69.zip new file mode 100644 index 0000000000..f3340e9af3 Binary files /dev/null and b/.yarn/cache/ngx-highlightjs-npm-10.0.0-aeef68d605-ea5d9f4b69.zip differ diff --git a/PRODUCTION_DEPENDENCIES.md b/PRODUCTION_DEPENDENCIES.md index e430145c87..963b008d45 100644 --- a/PRODUCTION_DEPENDENCIES.md +++ b/PRODUCTION_DEPENDENCIES.md @@ -34,6 +34,7 @@ | [inputmask](https://github.com/RobinHerbots/Inputmask) | 5.0.7 | MIT | | [jwt-decode](https://github.com/auth0/jwt-decode) | 3.1.2 | MIT | | [ng2-charts](https://github.com/valor-software/ng2-charts) | 3.0.11 | ISC | +| [ngx-highlightjs](https://github.com/murhafsousli/ngx-highlightjs) | 10.0.0 | MIT | | [ngx-mat-select-search](https://github.com/bithost-gmbh/ngx-mat-select-search) | 6.0.0 | MIT | | [rxjs](https://github.com/reactivex/rxjs) | 7.5.7 | Apache-2.0 | | [tslib](https://github.com/Microsoft/tslib) | 2.4.0 | 0BSD | diff --git a/apps/dh/app-dh/src/styles.scss b/apps/dh/app-dh/src/styles.scss index d3ed0273ec..a29d788c97 100644 --- a/apps/dh/app-dh/src/styles.scss +++ b/apps/dh/app-dh/src/styles.scss @@ -16,3 +16,4 @@ */ /* You can add global styles to this file, and also import other style files */ @use "@energinet-datahub/watt"; +@import "~highlight.js/styles/github.css"; diff --git a/build/infrastructure/eo/chart/Chart.yaml b/build/infrastructure/eo/chart/Chart.yaml index ef15977dda..cd89874202 100644 --- a/build/infrastructure/eo/chart/Chart.yaml +++ b/build/infrastructure/eo/chart/Chart.yaml @@ -2,4 +2,4 @@ apiVersion: v2 name: eo-frontend description: A Helm chart for Kubernetes type: application -version: 0.3.308 +version: 0.3.309 diff --git a/build/infrastructure/eo/chart/values.yaml b/build/infrastructure/eo/chart/values.yaml index 5fda800ba0..ecde371f16 100644 --- a/build/infrastructure/eo/chart/values.yaml +++ b/build/infrastructure/eo/chart/values.yaml @@ -2,4 +2,4 @@ app: replicaCount: 2 image: name: ghcr.io/energinet-datahub/eo-frontend-app - tag: 0.3.308 + tag: 0.3.309 diff --git a/libs/dh/core/shell/src/lib/dh-core-shell.providers.ts b/libs/dh/core/shell/src/lib/dh-core-shell.providers.ts index f7a9ffbd62..8da34e34d6 100644 --- a/libs/dh/core/shell/src/lib/dh-core-shell.providers.ts +++ b/libs/dh/core/shell/src/lib/dh-core-shell.providers.ts @@ -41,6 +41,7 @@ import { danishDatetimeProviders } from '@energinet-datahub/watt/danish-date-tim import { applicationInsightsProviders } from '@energinet-datahub/dh/shared/util-application-insights'; import { dhAuthorizationInterceptor } from '@energinet-datahub/dh/shared/feature-authorization'; import { danishLocalProviders } from '@energinet-datahub/gf/configuration-danish-locale'; +import { HIGHLIGHT_OPTIONS, HighlightOptions } from 'ngx-highlightjs'; export const dhCoreShellProviders = [ importProvidersFrom([ @@ -78,4 +79,15 @@ export const dhCoreShellProviders = [ useFactory: MSALInterceptorConfigFactory, deps: [dhB2CEnvironmentToken], }, + { + provide: HIGHLIGHT_OPTIONS, + useValue: { + coreLibraryLoader: () => import('highlight.js/lib/core'), + lineNumbersLoader: () => import('ngx-highlightjs/line-numbers'), + languages: { + xml: () => import('highlight.js/lib/languages/xml'), + json: () => import('highlight.js/lib/languages/json'), + }, + }, + }, ]; diff --git a/libs/dh/message-archive/feature-log-search/src/lib/drawer/dh-message-archive-drawer.component.html b/libs/dh/message-archive/feature-log-search/src/lib/drawer/dh-message-archive-drawer.component.html index 1e3886943e..18f6c8e03e 100644 --- a/libs/dh/message-archive/feature-log-search/src/lib/drawer/dh-message-archive-drawer.component.html +++ b/libs/dh/message-archive/feature-log-search/src/lib/drawer/dh-message-archive-drawer.component.html @@ -64,7 +64,11 @@

{{ message?.messageId }}

- 
{{ documentContent }}
+ diff --git a/libs/dh/message-archive/feature-log-search/src/lib/drawer/dh-message-archive-drawer.component.scss b/libs/dh/message-archive/feature-log-search/src/lib/drawer/dh-message-archive-drawer.component.scss index 898813adcb..ca03306bae 100644 --- a/libs/dh/message-archive/feature-log-search/src/lib/drawer/dh-message-archive-drawer.component.scss +++ b/libs/dh/message-archive/feature-log-search/src/lib/drawer/dh-message-archive-drawer.component.scss @@ -30,8 +30,6 @@ } .message-content { - padding: var(--watt-space-ml); - &--loading { display: flex; justify-content: center; diff --git a/libs/dh/message-archive/feature-log-search/src/lib/drawer/dh-message-archive-drawer.component.ts b/libs/dh/message-archive/feature-log-search/src/lib/drawer/dh-message-archive-drawer.component.ts index d059cc295d..d0951e750d 100644 --- a/libs/dh/message-archive/feature-log-search/src/lib/drawer/dh-message-archive-drawer.component.ts +++ b/libs/dh/message-archive/feature-log-search/src/lib/drawer/dh-message-archive-drawer.component.ts @@ -28,6 +28,7 @@ import { WattDatePipe } from '@energinet-datahub/watt/date'; import { WattDrawerComponent, WATT_DRAWER, WattDrawerSize } from '@energinet-datahub/watt/drawer'; import { WattIconComponent } from '@energinet-datahub/watt/icon'; import { WattButtonComponent } from '@energinet-datahub/watt/button'; +import { WattCodeComponent } from '@energinet-datahub/watt/code'; import { WattDropdownOptions } from '@energinet-datahub/watt/dropdown'; import { DhMessageArchiveDocumentStore } from '@energinet-datahub/dh/message-archive/data-access-api'; import { DhEmDashFallbackPipe } from '@energinet-datahub/dh/shared/ui-util'; @@ -65,6 +66,7 @@ import { DocumentTypeNamePipe } from '../shared/dh-message-archive-documentTypeN RxLet, WattDescriptionListComponent, WattDescriptionListItemComponent, + WattCodeComponent, ], providers: [provideComponentStore(DhMessageArchiveDocumentStore)], }) diff --git a/libs/ui-watt/.storybook/styles.scss b/libs/ui-watt/.storybook/styles.scss index d3ed0273ec..a29d788c97 100644 --- a/libs/ui-watt/.storybook/styles.scss +++ b/libs/ui-watt/.storybook/styles.scss @@ -16,3 +16,4 @@ */ /* You can add global styles to this file, and also import other style files */ @use "@energinet-datahub/watt"; +@import "~highlight.js/styles/github.css"; diff --git a/libs/ui-watt/project.json b/libs/ui-watt/project.json index 86c792fdff..3e6a993e44 100644 --- a/libs/ui-watt/project.json +++ b/libs/ui-watt/project.json @@ -27,7 +27,7 @@ "executor": "@storybook/angular:start-storybook", "options": { "port": 4400, - "host": "0.0.0.0", + "host": "localhost", "configDir": "libs/ui-watt/.storybook", "browserTarget": "ui-watt:build-storybook", "compodoc": true, @@ -35,7 +35,8 @@ }, "configurations": { "ci": { - "quiet": true + "quiet": true, + "open": false } } }, diff --git a/libs/ui-watt/src/lib/components/code/index.ts b/libs/ui-watt/src/lib/components/code/index.ts new file mode 100644 index 0000000000..8845caf83c --- /dev/null +++ b/libs/ui-watt/src/lib/components/code/index.ts @@ -0,0 +1,17 @@ +/** + * @license + * Copyright 2020 Energinet DataHub A/S + * + * Licensed under the Apache License, Version 2.0 (the "License2"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +export { WattCodeComponent } from './watt-code.component'; diff --git a/libs/ui-watt/src/lib/components/code/watt-code.component.scss b/libs/ui-watt/src/lib/components/code/watt-code.component.scss new file mode 100644 index 0000000000..3cd8e9d07f --- /dev/null +++ b/libs/ui-watt/src/lib/components/code/watt-code.component.scss @@ -0,0 +1,60 @@ +/** + * @license + * Copyright 2020 Energinet DataHub A/S + * + * Licensed under the Apache License, Version 2.0 (the "License2"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +watt-code { + display: block; + overflow: auto; + + pre { + display: flex; + margin-top: 0; + margin-bottom: 0; + word-wrap: break-word; + + code { + flex: 1; + line-height: 1.8em; + font-size: 14px; + min-height: 100%; + padding: 1em 1.2em; + + table.hljs-ln { + border-collapse: separate; + border-spacing: 0; + border: 1px solid var(--watt-color-neutral-grey-300); + border-radius: 4px; + } + + td.hljs-ln-line.hljs-ln-code { + padding-left: var(--watt-space-ml); + } + + td.hljs-ln-line.hljs-ln-numbers { + user-select: none; + border-left: 1px solid var(--watt-color-neutral-grey-300); + border-right: 1px solid var(--watt-color-neutral-grey-300); + padding-right: var(--watt-space-l); + padding-left: var(--watt-space-m); + background: var(--watt-color-primary-ultralight); + color: var(--watt-color-primary-dark); + } + + span.hljs-tag span.hljs-attr::before { + content: "\a"; + } + } + } +} diff --git a/libs/ui-watt/src/lib/components/code/watt-code.component.ts b/libs/ui-watt/src/lib/components/code/watt-code.component.ts new file mode 100644 index 0000000000..16244478bc --- /dev/null +++ b/libs/ui-watt/src/lib/components/code/watt-code.component.ts @@ -0,0 +1,39 @@ +/** + * @license + * Copyright 2020 Energinet DataHub A/S + * + * Licensed under the Apache License, Version 2.0 (the "License2"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { Component, ChangeDetectionStrategy, Input, ViewEncapsulation } from '@angular/core'; +import { HighlightModule } from 'ngx-highlightjs'; + +type languages = 'xml' | 'json'; + +@Component({ + selector: 'watt-code', + template: ` + 
+        
+
+ `, + styleUrls: ['./watt-code.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None, + standalone: true, + imports: [HighlightModule], +}) +export class WattCodeComponent { + @Input({ required: true }) code: string | null = null; + @Input() languages!: languages[]; + @Input() lineNumbers = true; +} diff --git a/libs/ui-watt/src/lib/components/code/watt-code.stories.ts b/libs/ui-watt/src/lib/components/code/watt-code.stories.ts new file mode 100644 index 0000000000..af70734bcb --- /dev/null +++ b/libs/ui-watt/src/lib/components/code/watt-code.stories.ts @@ -0,0 +1,165 @@ +/** + * @license + * Copyright 2020 Energinet DataHub A/S + * + * Licensed under the Apache License, Version 2.0 (the "License2"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { Meta, StoryFn, applicationConfig } from '@storybook/angular'; + +import { WattCodeComponent } from './watt-code.component'; +import { HIGHLIGHT_OPTIONS } from 'ngx-highlightjs'; + +const meta: Meta = { + title: 'Components/Code', + component: WattCodeComponent, + decorators: [ + applicationConfig({ + providers: [ + { + provide: HIGHLIGHT_OPTIONS, + useValue: { + coreLibraryLoader: () => import('highlight.js/lib/core'), + lineNumbersLoader: () => import('ngx-highlightjs/line-numbers'), + languages: { + xml: () => import('highlight.js/lib/languages/xml'), + json: () => import('highlight.js/lib/languages/json'), + }, + }, + }, + ], + }), + ], +}; + +export default meta; + +const Template: StoryFn = (args) => ({ + props: args, + template: ` + + `, +}); + +export const XmlWithLineNumbers = Template.bind({}); + +XmlWithLineNumbers.args = { + code: ` + + + String + E58 + E02 + E16 + a + A08 + a + A33 + 2001-12-17T09:30:47Z + + whateverasdasd + + 571313180400012882 + E17 + String + D01 + D01 + D01 + 0 + false + D01 + PT1H + D01 + + 1000 + D03 + + 1000 + KWH + + a + String + a + String + + 500 + KWH + k + + 012345678912345 + + 110 + KWH + 8716867000030 + + 100 + 100 + D01 + 0 + MTQ + 870 + + + String + String + String + String + String + String + String + + + String + String + String + String + AA + + + String + 2021-06-17T09:30:47Z + String + String + + String + String + String + + true + a + 870 + 871 + a + E17 + 571234567891234636 + B14 + a + + String + 2021-07-01T22:00:00Z + + `, + languages: ['xml'], + lineNumbers: true, +}; + +export const JsonWithLineNumbers = Template.bind({}); + +JsonWithLineNumbers.args = { + code: `{ "foo": "bar" }`, + languages: ['json'], + lineNumbers: true, +}; diff --git a/package.json b/package.json index 15fa932cb8..ee4e7ce42d 100644 --- a/package.json +++ b/package.json @@ -84,8 +84,9 @@ "graphql": "16.6.0", "include-media": "2.0.0", "inputmask": "5.0.7", - "jwt-decode": "^3.1.2", + "jwt-decode": "3.1.2", "ng2-charts": "3.0.11", + "ngx-highlightjs": "10.0.0", "ngx-mat-select-search": "6.0.0", "rxjs": "7.5.7", "tslib": "2.4.0", @@ -152,6 +153,7 @@ "@testing-library/jest-dom": "5.16.5", "@testing-library/user-event": "13.5.0", "@types/crypto-js": "4.1.1", + "@types/highlight.js": "^10.1.0", "@types/inputmask": "5.0.3", "@types/inquirer": "^9.0.3", "@types/jest": "29.4.4", diff --git a/tsconfig.base.json b/tsconfig.base.json index 77c2f7b213..2dd03b8598 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -338,6 +338,9 @@ "@energinet-datahub/watt/clipboard": [ "libs/ui-watt/src/lib/components/clipboard/index.ts" ], + "@energinet-datahub/watt/code": [ + "libs/ui-watt/src/lib/components/code/index.ts" + ], "@energinet-datahub/watt/color": [ "libs/ui-watt/src/lib/foundations/color/index.ts" ], diff --git a/yarn.lock b/yarn.lock index fbaa03fb68..31332833a2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11197,6 +11197,15 @@ __metadata: languageName: node linkType: hard +"@types/highlight.js@npm:^10.1.0": + version: 10.1.0 + resolution: "@types/highlight.js@npm:10.1.0" + dependencies: + highlight.js: "*" + checksum: 284f47e89bfe300f307ad76523a257ff12ed7cf0318cdc0a7fe6965a1d7e21840d133cfc623ec705495550d37341c278c2c9641bafce8b8dbb4bea4acd46f0ec + languageName: node + linkType: hard + "@types/html-minifier-terser@npm:^5.0.0": version: 5.1.2 resolution: "@types/html-minifier-terser@npm:5.1.2" @@ -17770,6 +17779,7 @@ cors@latest: "@testing-library/jest-dom": 5.16.5 "@testing-library/user-event": 13.5.0 "@types/crypto-js": 4.1.1 + "@types/highlight.js": ^10.1.0 "@types/inputmask": 5.0.3 "@types/inquirer": ^9.0.3 "@types/jest": 29.4.4 @@ -17805,11 +17815,12 @@ cors@latest: jest-environment-jsdom: 29.4.3 jest-preset-angular: 13.1.1 jest-preview: 0.3.1 - jwt-decode: ^3.1.2 + jwt-decode: 3.1.2 kill-port-process: 3.1.0 msw: 1.2.3 ng-mocks: 14.0.1 ng2-charts: 3.0.11 + ngx-highlightjs: 10.0.0 ngx-mat-select-search: 6.0.0 nx: 16.6.0 nx-cloud: 16.2.0 @@ -21242,6 +21253,13 @@ cors@latest: languageName: node linkType: hard +"highlight.js@npm:*, highlight.js@npm:^11.8.0": + version: 11.8.0 + resolution: "highlight.js@npm:11.8.0" + checksum: d2578a57aee7315946ff19379053fd0a28b127baabf7617ab1d28d62cdc4eaf3d75053569cb8479a5afdc7a68f1ba9a6c1d612d8ae399b4b9aa43093b4fb6831 + languageName: node + linkType: hard + "highlight.js@npm:^10.4.1, highlight.js@npm:~10.7.0": version: 10.7.3 resolution: "highlight.js@npm:10.7.3" @@ -24253,7 +24271,7 @@ cors@latest: languageName: node linkType: hard -"jwt-decode@npm:^3.1.2": +"jwt-decode@npm:3.1.2": version: 3.1.2 resolution: "jwt-decode@npm:3.1.2" checksum: 20a4b072d44ce3479f42d0d2c8d3dabeb353081ba4982e40b83a779f2459a70be26441be6c160bfc8c3c6eadf9f6380a036fbb06ac5406b5674e35d8c4205eeb @@ -26524,6 +26542,20 @@ cors@latest: languageName: node linkType: hard +"ngx-highlightjs@npm:10.0.0": + version: 10.0.0 + resolution: "ngx-highlightjs@npm:10.0.0" + dependencies: + highlight.js: ^11.8.0 + tslib: ^2.0.0 + peerDependencies: + "@angular/common": ">=16.0.0" + "@angular/core": ">=16.0.0" + rxjs: ">=7.0.0" + checksum: ea5d9f4b69a383c26ef4ca1abc8b62d24dc5baa20dcec9cfb03dac500a88b79166a0a4039362f4a91fb56cb89afc8a5e8e11b8c41dc4adc0e316e66dc56e5e8b + languageName: node + linkType: hard + "ngx-mat-select-search@npm:6.0.0": version: 6.0.0 resolution: "ngx-mat-select-search@npm:6.0.0"