web: all aboard the anti-if bus, according to tooling (#10220)
* web: fix esbuild issue with style sheets Getting ESBuild, Lit, and Storybook to all agree on how to read and parse stylesheets is a serious pain. This fix better identifies the value types (instances) being passed from various sources in the repo to the three *different* kinds of style processors we're using (the native one, the polyfill one, and whatever the heck Storybook does internally). Falling back to using older CSS instantiating techniques one era at a time seems to do the trick. It's ugly, but in the face of the aggressive styling we use to avoid Flashes of Unstyled Content (FLoUC), it's the logic with which we're left. In standard mode, the following warning appears on the console when running a Flow: ``` Autofocus processing was blocked because a document already has a focused element. ``` In compatibility mode, the following **error** appears on the console when running a Flow: ``` crawler-inject.js:1106 Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'. at initDomMutationObservers (crawler-inject.js:1106:18) at crawler-inject.js:1114:24 at Array.forEach (<anonymous>) at initDomMutationObservers (crawler-inject.js:1114:10) at crawler-inject.js:1549:1 initDomMutationObservers @ crawler-inject.js:1106 (anonymous) @ crawler-inject.js:1114 initDomMutationObservers @ crawler-inject.js:1114 (anonymous) @ crawler-inject.js:1549 ``` Despite this error, nothing seems to be broken and flows work as anticipated. * web: all-aboard the anti-if bus, according to tooling This commit revises a number of bugs `eslint` has been complaining about for awhile now. This is the lesser of two PRs that will address this issue, and in this case the two biggest problems were inappropriate conditionals (using a `switch` for a single comparison), unnecessarily named returns, empty returns. This brings our use of conditions in-line with the coding standards we _say_ we want in eslintrc! * web: better names and logic for comparing the dates of Xliff vs generated files * Missed one. * Fixed a redirect issue that was creating an empty file in the ./web folder
This commit is contained in:
@ -5,9 +5,9 @@ import process from "process";
|
|||||||
|
|
||||||
const localizeRules = JSON.parse(fs.readFileSync("./lit-localize.json", "utf-8"));
|
const localizeRules = JSON.parse(fs.readFileSync("./lit-localize.json", "utf-8"));
|
||||||
|
|
||||||
function compareXlfAndSrc(loc) {
|
function generatedFileIsUpToDateWithXliffSource(loc) {
|
||||||
const xlf = path.join("./xliff", `${loc}.xlf`);
|
const xliff = path.join("./xliff", `${loc}.xlf`);
|
||||||
const src = path.join("./src/locales", `${loc}.ts`);
|
const gened = path.join("./src/locales", `${loc}.ts`);
|
||||||
|
|
||||||
// Returns false if: the expected XLF file doesn't exist, The expected
|
// Returns false if: the expected XLF file doesn't exist, The expected
|
||||||
// generated file doesn't exist, or the XLF file is newer (has a higher date)
|
// generated file doesn't exist, or the XLF file is newer (has a higher date)
|
||||||
@ -15,29 +15,28 @@ function compareXlfAndSrc(loc) {
|
|||||||
// generates a unique error message and halts the build.
|
// generates a unique error message and halts the build.
|
||||||
|
|
||||||
try {
|
try {
|
||||||
var xlfStat = fs.statSync(xlf);
|
var xlfStat = fs.statSync(xliff);
|
||||||
} catch (_error) {
|
} catch (_error) {
|
||||||
console.error(`lit-localize expected '${loc}.xlf', but XLF file is not present`);
|
console.error(`lit-localize expected '${loc}.xlf', but XLF file is not present`);
|
||||||
process.exit(1);
|
process.exit(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// If the generated file doesn't exist, of course it's not up to date.
|
||||||
try {
|
try {
|
||||||
var srcStat = fs.statSync(src);
|
var genedStat = fs.statSync(gened);
|
||||||
} catch (_error) {
|
} catch (_error) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
// if the xlf is newer (greater) than src, it's out of date.
|
// if the generated file is the same age or older (date is greater) than the xliff file, it's
|
||||||
if (xlfStat.mtimeMs > srcStat.mtimeMs) {
|
// presumed to have been generated by that file and is up-to-date.
|
||||||
return false;
|
return genedStat.mtimeMs >= xlfStat.mtimeMs;
|
||||||
}
|
|
||||||
return true;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// For all the expected files, find out if any aren't up-to-date.
|
// For all the expected files, find out if any aren't up-to-date.
|
||||||
|
|
||||||
const upToDate = localizeRules.targetLocales.reduce(
|
const upToDate = localizeRules.targetLocales.reduce(
|
||||||
(acc, loc) => acc && compareXlfAndSrc(loc),
|
(acc, loc) => acc && generatedFileIsUpToDateWithXliffSource(loc),
|
||||||
true,
|
true,
|
||||||
);
|
);
|
||||||
|
|
||||||
@ -61,7 +60,9 @@ if (!upToDate) {
|
|||||||
.map((locale) => `Locale '${locale}' has ${counts.get(locale)} missing translations`)
|
.map((locale) => `Locale '${locale}' has ${counts.get(locale)} missing translations`)
|
||||||
.join("\n");
|
.join("\n");
|
||||||
|
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
console.log(`Translation tables rebuilt.\n${report}\n`);
|
console.log(`Translation tables rebuilt.\n${report}\n`);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
console.log("Locale ./src is up-to-date");
|
console.log("Locale ./src is up-to-date");
|
||||||
|
@ -12,4 +12,5 @@ const cmd = [
|
|||||||
"-S './src/locales/**' ./src -s",
|
"-S './src/locales/**' ./src -s",
|
||||||
].join(" ");
|
].join(" ");
|
||||||
|
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
console.log(execSync(cmd, { encoding: "utf8" }));
|
console.log(execSync(cmd, { encoding: "utf8" }));
|
||||||
|
55
web/scripts/eslint-nightmare.mjs
Normal file
55
web/scripts/eslint-nightmare.mjs
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
import { execFileSync } from "child_process";
|
||||||
|
import { ESLint } from "eslint";
|
||||||
|
import path from "path";
|
||||||
|
import process from "process";
|
||||||
|
|
||||||
|
// Code assumes this script is in the './web/scripts' folder.
|
||||||
|
const projectRoot = execFileSync("git", ["rev-parse", "--show-toplevel"], {
|
||||||
|
encoding: "utf8",
|
||||||
|
}).replace("\n", "");
|
||||||
|
process.chdir(path.join(projectRoot, "./web"));
|
||||||
|
|
||||||
|
const eslintConfig = {
|
||||||
|
overrideConfig: {
|
||||||
|
env: {
|
||||||
|
browser: true,
|
||||||
|
es2021: true,
|
||||||
|
},
|
||||||
|
extends: [
|
||||||
|
"eslint:recommended",
|
||||||
|
"plugin:@typescript-eslint/recommended",
|
||||||
|
"plugin:lit/recommended",
|
||||||
|
"plugin:custom-elements/recommended",
|
||||||
|
"plugin:storybook/recommended",
|
||||||
|
"plugin:sonarjs/recommended",
|
||||||
|
],
|
||||||
|
parser: "@typescript-eslint/parser",
|
||||||
|
parserOptions: {
|
||||||
|
ecmaVersion: 12,
|
||||||
|
sourceType: "module",
|
||||||
|
},
|
||||||
|
plugins: ["@typescript-eslint", "lit", "custom-elements", "sonarjs"],
|
||||||
|
rules: {
|
||||||
|
"indent": "off",
|
||||||
|
"linebreak-style": ["error", "unix"],
|
||||||
|
"quotes": ["error", "double", { avoidEscape: true }],
|
||||||
|
"semi": ["error", "always"],
|
||||||
|
"@typescript-eslint/ban-ts-comment": "off",
|
||||||
|
"sonarjs/cognitive-complexity": ["error", 9],
|
||||||
|
"sonarjs/no-duplicate-string": "off",
|
||||||
|
"sonarjs/no-nested-template-literals": "off",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const updated = ["./src/", "./build.mjs", "./scripts/*.mjs"];
|
||||||
|
|
||||||
|
const eslint = new ESLint(eslintConfig);
|
||||||
|
const results = await eslint.lintFiles(updated);
|
||||||
|
const formatter = await eslint.loadFormatter("stylish");
|
||||||
|
const resultText = formatter.format(results);
|
||||||
|
const errors = results.reduce((acc, result) => acc + result.errorCount, 0);
|
||||||
|
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
|
console.log(resultText);
|
||||||
|
process.exit(errors > 1 ? 1 : 0);
|
@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
TARGET="./node_modules/@spotlightjs/overlay/dist/index-"[0-9a-f]*.js
|
TARGET="./node_modules/@spotlightjs/overlay/dist/index-"[0-9a-f]*.js
|
||||||
|
|
||||||
if [[ $(grep -L "QX2" "$TARGET" > /dev/null 2&>1) ]]; then
|
if [[ $(grep -L "QX2" "$TARGET" > /dev/null 2> /dev/null) ]]; then
|
||||||
patch --forward -V none --no-backup-if-mismatch -p0 $TARGET <<EOF
|
patch --forward -V none --no-backup-if-mismatch -p0 $TARGET <<EOF
|
||||||
|
|
||||||
TARGET=$(find "./node_modules/@spotlightjs/overlay/dist/" -name "index-[0-9a-f]*.js");
|
TARGET=$(find "./node_modules/@spotlightjs/overlay/dist/" -name "index-[0-9a-f]*.js");
|
||||||
|
@ -103,11 +103,7 @@ export class ApplicationWizardCommitApplication extends BasePanel {
|
|||||||
);
|
);
|
||||||
if (!providerModel) {
|
if (!providerModel) {
|
||||||
throw new Error(
|
throw new Error(
|
||||||
`Could not determine provider model from user request: ${JSON.stringify(
|
`Could not determine provider model from user request: ${JSON.stringify(this.wizard, null, 2)}`,
|
||||||
this.wizard,
|
|
||||||
null,
|
|
||||||
2,
|
|
||||||
)}`,
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -118,7 +114,6 @@ export class ApplicationWizardCommitApplication extends BasePanel {
|
|||||||
};
|
};
|
||||||
|
|
||||||
this.send(request);
|
this.send(request);
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -8,7 +8,7 @@ import "@goauthentik/elements/forms/SearchSelect";
|
|||||||
import YAML from "yaml";
|
import YAML from "yaml";
|
||||||
|
|
||||||
import { msg } from "@lit/localize";
|
import { msg } from "@lit/localize";
|
||||||
import { TemplateResult, html } from "lit";
|
import { TemplateResult, html, nothing } from "lit";
|
||||||
import { customElement, property } from "lit/decorators.js";
|
import { customElement, property } from "lit/decorators.js";
|
||||||
import { ifDefined } from "lit/directives/if-defined.js";
|
import { ifDefined } from "lit/directives/if-defined.js";
|
||||||
|
|
||||||
@ -66,14 +66,11 @@ export class PolicyTestForm extends Form<PropertyMappingTestRequest> {
|
|||||||
</ak-form-element-horizontal>`;
|
</ak-form-element-horizontal>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
renderExampleButtons(): TemplateResult {
|
renderExampleButtons() {
|
||||||
const header = html`<p>${msg("Example context data")}</p>`;
|
return this.mapping?.metaModelName === "authentik_sources_ldap.ldappropertymapping"
|
||||||
switch (this.mapping?.metaModelName) {
|
? html`<p>${msg("Example context data")}</p>
|
||||||
case "authentik_sources_ldap.ldappropertymapping":
|
${this.renderExampleLDAP()}`
|
||||||
return html`${header}${this.renderExampleLDAP()}`;
|
: nothing;
|
||||||
default:
|
|
||||||
return html``;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
renderExampleLDAP(): TemplateResult {
|
renderExampleLDAP(): TemplateResult {
|
||||||
|
@ -42,12 +42,11 @@ export function transformCredentialCreateOptions(
|
|||||||
user.id = u8arr(b64enc(u8arr(stringId)));
|
user.id = u8arr(b64enc(u8arr(stringId)));
|
||||||
const challenge = u8arr(credentialCreateOptions.challenge.toString());
|
const challenge = u8arr(credentialCreateOptions.challenge.toString());
|
||||||
|
|
||||||
const transformedCredentialCreateOptions = Object.assign({}, credentialCreateOptions, {
|
return {
|
||||||
|
...credentialCreateOptions,
|
||||||
challenge,
|
challenge,
|
||||||
user,
|
user,
|
||||||
});
|
};
|
||||||
|
|
||||||
return transformedCredentialCreateOptions;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface Assertion {
|
export interface Assertion {
|
||||||
@ -98,12 +97,11 @@ export function transformCredentialRequestOptions(
|
|||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
const transformedCredentialRequestOptions = Object.assign({}, credentialRequestOptions, {
|
return {
|
||||||
|
...credentialRequestOptions,
|
||||||
challenge,
|
challenge,
|
||||||
allowCredentials,
|
allowCredentials,
|
||||||
});
|
};
|
||||||
|
|
||||||
return transformedCredentialRequestOptions;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface AuthAssertion {
|
export interface AuthAssertion {
|
||||||
|
@ -92,11 +92,13 @@ export class Tabs extends AKElement {
|
|||||||
const pages = Array.from(this.querySelectorAll(":scope > [slot^='page-']"));
|
const pages = Array.from(this.querySelectorAll(":scope > [slot^='page-']"));
|
||||||
if (window.location.hash.includes(ROUTE_SEPARATOR)) {
|
if (window.location.hash.includes(ROUTE_SEPARATOR)) {
|
||||||
const params = getURLParams();
|
const params = getURLParams();
|
||||||
if (this.pageIdentifier in params && !this.currentPage) {
|
if (
|
||||||
if (this.querySelector(`[slot='${params[this.pageIdentifier]}']`) !== null) {
|
this.pageIdentifier in params &&
|
||||||
// To update the URL to match with the current slot
|
!this.currentPage &&
|
||||||
this.onClick(params[this.pageIdentifier] as string);
|
this.querySelector(`[slot='${params[this.pageIdentifier]}']`) !== null
|
||||||
}
|
) {
|
||||||
|
// To update the URL to match with the current slot
|
||||||
|
this.onClick(params[this.pageIdentifier] as string);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (!this.currentPage) {
|
if (!this.currentPage) {
|
||||||
|
@ -352,10 +352,13 @@ export class SearchSelect<T> extends CustomEmitterElement(AKElement) {
|
|||||||
const onFocus = (ev: FocusEvent) => {
|
const onFocus = (ev: FocusEvent) => {
|
||||||
this.open = true;
|
this.open = true;
|
||||||
this.renderMenu();
|
this.renderMenu();
|
||||||
if (this.blankable && this.renderedValue === this.emptyOption) {
|
if (
|
||||||
if (ev.target && ev.target instanceof HTMLInputElement) {
|
this.blankable &&
|
||||||
ev.target.value = "";
|
this.renderedValue === this.emptyOption &&
|
||||||
}
|
ev.target &&
|
||||||
|
ev.target instanceof HTMLInputElement
|
||||||
|
) {
|
||||||
|
ev.target.value = "";
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -117,19 +117,11 @@ export class SidebarItem extends AKElement {
|
|||||||
if (!this.path) {
|
if (!this.path) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
if (this.path) {
|
|
||||||
const ourPath = this.path.split(";")[0];
|
const ourPath = this.path.split(";")[0];
|
||||||
if (new RegExp(`^${ourPath}$`).exec(path)) {
|
const pathIsWholePath = new RegExp(`^${ourPath}$`).test(path);
|
||||||
return true;
|
const pathIsAnActivePath = this.activeMatchers.some((v) => v.test(path));
|
||||||
}
|
return pathIsWholePath || pathIsAnActivePath;
|
||||||
}
|
|
||||||
return this.activeMatchers.some((v) => {
|
|
||||||
const match = v.exec(path);
|
|
||||||
if (match !== null) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
expandParentRecursive(activePath: string, item: SidebarItem): void {
|
expandParentRecursive(activePath: string, item: SidebarItem): void {
|
||||||
|
@ -231,14 +231,11 @@ ${prompt.initialValue}</textarea
|
|||||||
|
|
||||||
shouldRenderInWrapper(prompt: StagePrompt): boolean {
|
shouldRenderInWrapper(prompt: StagePrompt): boolean {
|
||||||
// Special types that aren't rendered in a wrapper
|
// Special types that aren't rendered in a wrapper
|
||||||
if (
|
return !(
|
||||||
prompt.type === PromptTypeEnum.Static ||
|
prompt.type === PromptTypeEnum.Static ||
|
||||||
prompt.type === PromptTypeEnum.Hidden ||
|
prompt.type === PromptTypeEnum.Hidden ||
|
||||||
prompt.type === PromptTypeEnum.Separator
|
prompt.type === PromptTypeEnum.Separator
|
||||||
) {
|
);
|
||||||
return false;
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
renderField(prompt: StagePrompt): TemplateResult {
|
renderField(prompt: StagePrompt): TemplateResult {
|
||||||
|
@ -70,10 +70,7 @@ export class UserSettingsFlowExecutor
|
|||||||
})
|
})
|
||||||
.then((data) => {
|
.then((data) => {
|
||||||
this.challenge = data;
|
this.challenge = data;
|
||||||
if (this.challenge.responseErrors) {
|
return !this.challenge.responseErrors;
|
||||||
return false;
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
})
|
})
|
||||||
.catch((e: Error | ResponseError) => {
|
.catch((e: Error | ResponseError) => {
|
||||||
this.errorMessage(e);
|
this.errorMessage(e);
|
||||||
|
@ -10,20 +10,16 @@ import { PromptTypeEnum, StagePrompt } from "@goauthentik/api";
|
|||||||
@customElement("ak-user-stage-prompt")
|
@customElement("ak-user-stage-prompt")
|
||||||
export class UserSettingsPromptStage extends PromptStage {
|
export class UserSettingsPromptStage extends PromptStage {
|
||||||
renderPromptInner(prompt: StagePrompt): TemplateResult {
|
renderPromptInner(prompt: StagePrompt): TemplateResult {
|
||||||
switch (prompt.type) {
|
return prompt.type === PromptTypeEnum.Checkbox
|
||||||
// Checkbox requires slightly different rendering here due to the use of horizontal form elements
|
? html`<input
|
||||||
case PromptTypeEnum.Checkbox:
|
type="checkbox"
|
||||||
return html`<input
|
class="pf-c-check__input"
|
||||||
type="checkbox"
|
name="${prompt.fieldKey}"
|
||||||
class="pf-c-check__input"
|
?checked=${prompt.initialValue !== ""}
|
||||||
name="${prompt.fieldKey}"
|
?required=${prompt.required}
|
||||||
?checked=${prompt.initialValue !== ""}
|
style="vertical-align: bottom"
|
||||||
?required=${prompt.required}
|
/>`
|
||||||
style="vertical-align: bottom"
|
: super.renderPromptInner(prompt);
|
||||||
/>`;
|
|
||||||
default:
|
|
||||||
return super.renderPromptInner(prompt);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
renderField(prompt: StagePrompt): TemplateResult {
|
renderField(prompt: StagePrompt): TemplateResult {
|
||||||
|
Reference in New Issue
Block a user