Nilsjacobsen/inlmc 138 add new lint report type to storybook

inlang/source-code/bundle-component/src/helper/crud/selector/delete.test.ts

@@ -25,13 +25,29 @@ describe("deleteSelector", () => {
 				},
 			],
 			declarations: [],
-			variants: [],
+			variants: [
+				{
+					id: "variantId",
+					messageId: "testId",
+					match: {
+						count: "1",
+						name: "John",
+					},
+					pattern: [
+						{
+							type: "text",
+							value: "Hello ",
+						},
+					],
+				},
+			],
 		}
 
 		deleteSelector({ message, index: 0 })
 
 		expect(message.selectors.length).toBe(1)
 		// @ts-ignore
 		expect(message.selectors[0]!.arg.name).toBe("name")
+		expect(Object.keys(message.variants[0]!.match).length).toBe(1)
 	})
 })

inlang/source-code/bundle-component/src/helper/crud/selector/delete.ts

@@ -11,13 +11,18 @@ import type { NestedMessage } from "@inlang/sdk-v2"
  */
 
 const deleteSelector = (props: { message: NestedMessage; index: number }) => {
-	props.message.selectors.splice(props.index, 1)
-	for (const variant of props.message.variants) {
-		for (const name in Object.keys(variant.match)) {
-			if (name === props.message.selectors[props.index]!.arg.name) {
-				delete variant.match[name]
+	const selectorName = props.message.selectors[props.index]!.arg.name
+	if (selectorName) {
+		props.message.selectors.splice(props.index, 1)
+		for (const variant of props.message.variants) {
+			for (const name in variant.match) {
+				if (name === selectorName) {
+					delete variant.match[name]
+				}
 			}
 		}
+	} else {
+		console.error("Index is not pointing on a selector")
 	}
 }
 

inlang/source-code/bundle-component/src/mock/lint.ts

@@ -30,21 +30,59 @@ import // createMockBundleLintReport,
 // 	}),
 // ]
 
+export const mockMessageLintReports = [
+	{
+		ruleId: "message.inlang.missingMessage",
+		type: "message",
+		typeId: "mock_message_id_de",
+		body: "The bundle `mock_bundle_human_id` is missing the reference message for the locale `en`",
+		level: "error",
+	},
+]
+
+export const mockVariantLintReports = [
+	{
+		ruleId: "variant.inlang.uppercaseVariant",
+		type: "variant",
+		typeId: "mock_variant_id_de_one",
+		body: "There is a variant that contains the term opral, which is not written in uppercase",
+		level: "error",
+	},
+]
+
+export const mockBundleLintReports = [
+	{
+		ruleId: "bundle.inlang.aliasIncorrect",
+		type: "bundle",
+		typeId: "mock_bundle_human_id",
+		body: "The alias is incorrect",
+		level: "error",
+	},
+]
+
 export const mockInstalledLintRules = [
 	{
-		id: "messageBundleLintRule.inlang.missingMessage",
+		id: "message.inlang.missingMessage",
 		displayName: "Missing Message",
 		description: "Reports when a message is missing in a message bundle",
 		module:
 			"https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-missing-translation@latest/dist/index.js",
 		level: "error",
 	},
 	{
-		id: "messageBundleLintRule.inlang.missingReference",
-		displayName: "Missing Reference",
-		description: "Reports when a reference message is missing in a message bundle",
+		id: "variant.inlang.uppercaseVariant",
+		displayName: "Uppercase Variant",
+		description: "Reports when opral is not written in uppercase",
+		module:
+			"https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-missing-translation@latest/dist/index.js",
+		level: "error",
+	},
+	{
+		id: "bundle.inlang.aliasIncorrect",
+		displayName: "Alias Incorrect",
+		description: "Reports when the alias is incorrect",
 		module:
 			"https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-missing-translation@latest/dist/index.js",
-		level: "warning",
+		level: "error",
 	},
 ]

inlang/source-code/bundle-component/src/stories/inlang-bundle-header.ts

@@ -1,6 +1,8 @@
 import type {
 	Declaration,
+	InstalledLintRule,
 	LanguageTag,
+	LintReport,
 	Message,
 	NestedBundle,
 	ProjectSettings2,
@@ -136,6 +138,15 @@ export default class InlangBundleHeader extends LitElement {
 	@property()
 	settings: ProjectSettings2 | undefined
 
+	@property()
+	bundleValidationReports: Array<any> | undefined
+
+	@property({ type: Array })
+	installedLintRules: InstalledLintRule[] | undefined
+
+	@property()
+	fixLint: (lintReport: LintReport, fix: LintReport["fixes"][0]["title"]) => void = () => {}
+
 	@property()
 	addInput: (input: Declaration) => void = () => {}
 
@@ -203,7 +214,6 @@ export default class InlangBundleHeader extends LitElement {
 														value="delete"
 														@click=${() => {
 															deleteInput({ messageBundle: this.bundle!, input })
-															// deleteSelector({ message, index })
 															this.requestUpdate()
 															for (const message of this.bundle!.messages) {
 																this.dispatchOnUpdateMessage(message, [])
@@ -282,6 +292,11 @@ export default class InlangBundleHeader extends LitElement {
 									</sl-menu>
 								</sl-dropdown>`
 						: ``}
+					<inlang-lint-report-tip
+						.lintReports=${this.bundleValidationReports}
+						.installedLintRules=${this.installedLintRules}
+						.fixLint=${this.fixLint}
+					></inlang-lint-report-tip>
 				</div>
 			</div>
 		`

inlang/source-code/bundle-component/src/stories/inlang-bundle.stories.ts

@@ -12,6 +12,12 @@ import { bundleWithoutSelectors } from "../mock/messageBundle.ts"
 import { pluralBundle } from "@inlang/sdk-v2"
 
 import "./actions/inlang-bundle-action.ts"
+import {
+	mockBundleLintReports,
+	mockInstalledLintRules,
+	mockMessageLintReports,
+	mockVariantLintReports,
+} from "../mock/lint.ts"
 
 const meta: Meta = {
 	component: "inlang-bundle",
@@ -60,7 +66,10 @@ export const Complex: StoryObj = {
 		return html`<inlang-bundle
 			.bundle=${pluralBundle}
 			.settings=${mockSettings}
-			.installedLintRules=${[]}
+			.installedLintRules=${mockInstalledLintRules}
+			.bundleValidationReports=${mockBundleLintReports}
+			.messageValidationReports=${mockMessageLintReports}
+			.variantValidationReports=${mockVariantLintReports}
 			@update-bundle=${(data: any) => console.info("updateBundle", data.detail.argument)}
 			@insert-message=${(data: any) => console.info("insertMessage", data.detail.argument)}
 			@update-message=${(data: any) => console.info("updateMessage", data.detail.argument)}

inlang/source-code/bundle-component/src/stories/inlang-bundle.ts

@@ -51,14 +51,8 @@ import getInputs from "../helper/crud/input/get.js"
 import createInput from "../helper/crud/input/create.js"
 import upsertVariant from "../helper/crud/variant/upsert.js"
 import patternToString from "../helper/crud/pattern/patternToString.js"
-import stringToPattern from "../helper/crud/pattern/stringToPattern.js"
 import sortAllVariants from "../helper/crud/variant/sortAll.js"
 import InlangBundleAction from "./actions/inlang-bundle-action.js"
-import deleteInput from "../helper/crud/input/delete.js"
-import deleteSelector from "../helper/crud/selector/delete.js"
-import addSelector from "../helper/crud/selector/add.js"
-import deleteVariant from "../helper/crud/variant/delete.js"
-import updateMatch from "../helper/crud/variant/updateMatch.js"
 
 @customElement("inlang-bundle")
 export default class InlangBundle extends LitElement {
@@ -75,6 +69,15 @@ export default class InlangBundle extends LitElement {
 	@property({ type: Array })
 	installedLintRules: InstalledLintRule[] | undefined
 
+	@property({ type: Array })
+	bundleValidationReports: Array<any> | undefined
+
+	@property({ type: Array })
+	messageValidationReports: Array<any> | undefined
+
+	@property({ type: Array })
+	variantValidationReports: Array<any> | undefined
+
 	//disable shadow root -> because of contenteditable selection API
 	override createRenderRoot() {
 		return this
@@ -362,6 +365,9 @@ export default class InlangBundle extends LitElement {
 				<inlang-bundle-header
 					.bundle=${this._bundle}
 					.settings=${this.settings}
+					.installedLintRules=${this.installedLintRules}
+					.bundleValidationReports=${this.bundleValidationReports}
+					.fixLint=${this._fixLint}
 					.addInput=${this._addInput}
 					.triggerSave=${this._triggerSave}
 					.triggerRefresh=${this._triggerRefresh}
@@ -375,15 +381,14 @@ export default class InlangBundle extends LitElement {
 					${this._locales() &&
 					this._locales()?.map((locale) => {
 						const message = this._bundle?.messages.find((message) => message.locale === locale)
+						const _messageValidationReports = this.messageValidationReports?.filter(
+							(report: any) => report.typeId === message?.id
+						)
 						// TODO SDK-v2 lint reports
-						const lintReports = [] as any[]
-						// const lintReports = this._bundle?.lintReports?.reports.filter(
-						// 	(report) => report.messageId === message?.id
-						// )
 						return html`<inlang-message
 							.locale=${locale}
 							.message=${message}
-							.lintReports=${lintReports}
+							.messageValidationReports=${_messageValidationReports}
 							.installedLintRules=${this.installedLintRules}
 							.settings=${this.settings}
 							.inputs=${this._inputs()}
@@ -405,6 +410,10 @@ export default class InlangBundle extends LitElement {
 								selectors: message?.selectors || [],
 							})?.map((fakevariant) => {
 								const variant = message?.variants.find((v) => v.id === fakevariant.id)
+								const _variantValidationReports: Array<any> | undefined =
+									this.variantValidationReports?.filter(
+										(report: any) => report.typeId === variant?.id
+									)
 								return html`<inlang-variant
 									slot="variant"
 									.variant=${variant}
@@ -416,7 +425,8 @@ export default class InlangBundle extends LitElement {
 									.addMessage=${this._addMessage}
 									.addInput=${this._addInput}
 									.locale=${locale}
-									.lintReports=${lintReports}
+									.variantValidationReports=${_variantValidationReports}
+									.messageValidationReports=${_messageValidationReports}
 									.installedLintRules=${this.installedLintRules}
 									.fixLint=${this._fixLint}
 								>

inlang/source-code/bundle-component/src/stories/inlang-lint-report-tip.ts

@@ -43,6 +43,7 @@ export default class InlangLintReportTip extends LitElement {
 				flex-direction: row;
 				gap: 12px;
 				padding: 8px 12px;
+				padding-bottom: 10px;
 				border-top: 1px solid var(--sl-input-border-color);
 			}
 			.dropdown-item:first-child {
@@ -177,20 +178,22 @@ export default class InlangLintReportTip extends LitElement {
 						<div class="report-content">
 							<p class="report-title">${this._getLintDisplayName(lintReport.ruleId)}</p>
 							<p class="report-body">${lintReport.body}</p>
-							<div class="report-fixes">
-								${lintReport.fixes?.map((fix) => {
-									return html`
-										<sl-button
-											@click=${() => {
-												this.fixLint(lintReport, fix.title)
-											}}
-											class="fix-button"
-											size="small"
-											>${fix.title}</sl-button
-										>
-									`
-								})}
-							</div>
+							${lintReport.fixes && lintReport.fixes.length > 0
+								? html`<div class="report-fixes">
+										${lintReport.fixes?.map((fix) => {
+											return html`
+												<sl-button
+													@click=${() => {
+														this.fixLint(lintReport, fix.title)
+													}}
+													class="fix-button"
+													size="small"
+													>${fix.title}</sl-button
+												>
+											`
+										})}
+								  </div>`
+								: ""}
 						</div>
 					</div>`
 				})}

inlang/source-code/bundle-component/src/stories/inlang-message.ts

@@ -161,7 +161,7 @@ export default class InlangMessage extends LitElement {
 	message: NestedMessage | undefined
 
 	@property()
-	lintReports: LintReport[] | undefined
+	messageValidationReports: Array<any> | undefined
 
 	@property()
 	installedLintRules: InstalledLintRule[] | undefined
@@ -332,13 +332,9 @@ export default class InlangMessage extends LitElement {
 										  >`
 										: ``
 									: ``}
-								${this.lintReports &&
-								this.lintReports.length > 0 &&
-								this.lintReports.some((report) => !report.target.variantId)
+								${this.messageValidationReports && this.messageValidationReports.length > 0
 									? html`<inlang-lint-report-tip
-											.lintReports=${this.lintReports.filter(
-												(report) => !report.target.variantId
-											) ?? []}
+											.lintReports=${this.messageValidationReports}
 											.installedLintRules=${this.installedLintRules}
 											.fixLint=${this.fixLint}
 									  ></inlang-lint-report-tip>`