Merge pull request #2581 from opral/nilsjacobsen/inlmc-59-settings-co…

…mponent-is-broken-with-those-settings feat: don't show lint rule levels if project does not provide lint rules
opral · Apr 12, 2024 · 58a49dc · 58a49dc
2 parents f676ac1 + ddea787
commit 58a49dc
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 43 deletions.
diff --git a/.changeset/swift-deers-jam.md b/.changeset/swift-deers-jam.md
@@ -0,0 +1,5 @@
+---
+"@inlang/settings-component": patch
+---
+
+Don't display the lint rule levels when there are no lint rules installed
diff --git a/...e-code/settings-component/src/stories/input-fields/object/lint-rule-level-object-input.ts b/...e-code/settings-component/src/stories/input-fields/object/lint-rule-level-object-input.ts
@@ -128,50 +128,52 @@ export class LintRuleLevelObjectInput extends LitElement {
 	}
 
 	override render() {
-		return html` <div part="property" class="property">
-			<div class="title-container">
-				<field-header
-					.fieldTitle=${this._title ? this._title : this.property}
-					.description=${this._description}
-					.optional=${this.required ? false : true}
-					exportparts="property-title, property-paragraph"
-				></field-header>
-			</div>
-			<div class="container">
-				${this.modules &&
-				this.modules.map((module) => {
-					return module.id.split(".")[0] !== "plugin"
-						? html`<div class="rule-container">
-								<sl-select
-									id=${module.id}
-									exportparts="listbox:option-wrapper"
-									value=${this.value ? (this.value as any)[module.id] : "warning"}
-									placeholder="warning"
-									class="select"
-									size="small"
-									@sl-change=${(e: Event) => {
-										this.handleUpdate(
-											module.id as `messageLintRule.${string}.${string}`,
-											(e.target as HTMLInputElement).value
-										)
-									}}
-								>
-									${this._valueOptions?.map((option) => {
-										return html`<sl-option
-											exportparts="base:option"
-											value=${option.const}
-											class="add-item-side"
+		return this.modules && this.modules.some((module) => module.id.split(".")[0] !== "plugin")
+			? html` <div part="property" class="property">
+					<div class="title-container">
+						<field-header
+							.fieldTitle=${this._title ? this._title : this.property}
+							.description=${this._description}
+							.optional=${this.required ? false : true}
+							exportparts="property-title, property-paragraph"
+						></field-header>
+					</div>
+					<div class="container">
+						${this.modules &&
+						this.modules.map((module) => {
+							return module.id.split(".")[0] !== "plugin"
+								? html`<div class="rule-container">
+										<sl-select
+											id=${module.id}
+											exportparts="listbox:option-wrapper"
+											value=${this.value ? (this.value as any)[module.id] : "warning"}
+											placeholder="warning"
+											class="select"
+											size="small"
+											@sl-change=${(e: Event) => {
+												this.handleUpdate(
+													module.id as `messageLintRule.${string}.${string}`,
+													(e.target as HTMLInputElement).value
+												)
+											}}
 										>
-											${option.const}
-										</sl-option>`
-									})}
-								</sl-select>
-								<p class="ruleId">${(module.displayName as { en: string }).en}</p>
-						  </div>`
-						: undefined
-				})}
-			</div>
-		</div>`
+											${this._valueOptions?.map((option) => {
+												return html`<sl-option
+													exportparts="base:option"
+													value=${option.const}
+													class="add-item-side"
+												>
+													${option.const}
+												</sl-option>`
+											})}
+										</sl-select>
+										<p class="ruleId">${(module.displayName as { en: string }).en}</p>
+								  </div>`
+								: undefined
+						})}
+					</div>
+			  </div>`
+			: undefined
 	}
 }