@allurereport/web-allure2 3.0.0-beta.10

package/src/utils/settingsFactory.js

@@ -0,0 +1,149 @@
+import LocalStorageModel from "@/data/localstorage/LocalStorageModel.js";
+
+const globalSettingsDefaults = {
+  sidebarCollapsed: false,
+  sideBySidePosition: [50, 50],
+};
+
+const treePluginDefaults = {
+  visibleStatuses: {
+    failed: true,
+    broken: true,
+    skipped: true,
+    unknown: true,
+    passed: true,
+  },
+  visibleMarks: {
+    flaky: false,
+    newFailed: false,
+    newPassed: false,
+    newBroken: false,
+    retriesStatusChange: false,
+  },
+  showGroupInfo: false,
+  treeSorting: {
+    ascending: true,
+    sorter: "sorter.name",
+  },
+};
+
+const widgetGridPluginDefaults = {
+  widgets: [[], []],
+};
+
+function getGlobalSettings() {
+  const SettingsModel = LocalStorageModel.extend({
+    defaults() {
+      return { ...globalSettingsDefaults, language: document.documentElement.lang || "en" };
+    },
+
+    getLanguage() {
+      return this.get("language");
+    },
+
+    setLanguage(value) {
+      return this.save("language", value);
+    },
+
+    isSidebarCollapsed() {
+      return this.get("sidebarCollapsed");
+    },
+
+    setSidebarCollapsed(value) {
+      return this.save("sidebarCollapsed", value);
+    },
+
+    getSideBySidePosition() {
+      return this.get("sideBySidePosition");
+    },
+
+    setSideBySidePosition(size) {
+      return this.save("sideBySidePosition", size);
+    },
+  });
+  const settings = new SettingsModel();
+  settings.fetch();
+  return settings;
+}
+
+function getSettingsForPlugin(pluginName, defaults = {}) {
+  const SettingsModel = LocalStorageModel.extend({
+    storageKey() {
+      return `ALLURE_REPORT_SETTINGS_${pluginName.toUpperCase()}`;
+    },
+    defaults() {
+      return defaults;
+    },
+  });
+  const settings = new SettingsModel();
+  settings.fetch();
+  return settings;
+}
+
+function getSettingsForWidgetGridPlugin(pluginName, defaults = widgetGridPluginDefaults) {
+  const SettingsModel = LocalStorageModel.extend({
+    storageKey() {
+      return `ALLURE_REPORT_SETTINGS_${pluginName.toUpperCase()}`;
+    },
+    defaults() {
+      return defaults;
+    },
+    getWidgetsArrangement() {
+      return this.get("widgets");
+    },
+    setWidgetsArrangement(value) {
+      this.save("widgets", value);
+    },
+  });
+  const settings = new SettingsModel();
+  settings.fetch();
+  return settings;
+}
+
+function getSettingsForTreePlugin(pluginName, defaults = treePluginDefaults) {
+  const SettingsModel = LocalStorageModel.extend({
+    storageKey() {
+      return `ALLURE_REPORT_SETTINGS_${pluginName.toUpperCase()}`;
+    },
+    defaults() {
+      return defaults;
+    },
+
+    getVisibleStatuses() {
+      return this.get("visibleStatuses");
+    },
+
+    setVisibleStatuses(value) {
+      return this.save("visibleStatuses", value);
+    },
+
+    getVisibleMarks() {
+      return this.get("visibleMarks");
+    },
+
+    setVisibleMarks(value) {
+      return this.save("visibleMarks", value);
+    },
+
+    getTreeSorting() {
+      return this.get("treeSorting");
+    },
+
+    setTreeSorting(value) {
+      this.save("treeSorting", value);
+    },
+
+    isShowGroupInfo() {
+      return this.get("showGroupInfo");
+    },
+
+    setShowGroupInfo(value) {
+      this.save("showGroupInfo", value);
+    },
+  });
+  const settings = new SettingsModel();
+  settings.fetch();
+  return settings;
+}
+
+export { getGlobalSettings, getSettingsForPlugin, getSettingsForTreePlugin, getSettingsForWidgetGridPlugin };

package/src/utils/sorting.js

@@ -0,0 +1,21 @@
+import { sortBy } from "underscore";
+
+function getByPath(obj, path) {
+  return path.split(".").reduce((context, key) => context[key], obj);
+}
+
+export function updateSort(sortField, { field, order }) {
+  if (sortField === field) {
+    order = order === "asc" ? "desc" : "asc";
+    return { field, order };
+  }
+  return { field: sortField, order: "asc" };
+}
+
+export function doSort(array, { field, order }) {
+  const result = sortBy(array, (item) => getByPath(item, field));
+  if (order === "desc") {
+    return result.reverse();
+  }
+  return result;
+}

package/src/utils/statuses.js

@@ -0,0 +1 @@
+export const values = ["failed", "broken", "passed", "skipped", "unknown"];

package/src/utils/translation.js

@@ -0,0 +1,63 @@
+import i18next from "i18next";
+import gtag from "./gtag.js";
+import settings from "./settings.js";
+
+export const LANGUAGES = [
+  { id: "az", title: "Azərbaycanca" },
+  { id: "br", title: "Brazil" },
+  { id: "de", title: "Deutsch" },
+  { id: "en", title: "English" },
+  { id: "es", title: "Español" },
+  { id: "fr", title: "Français" },
+  { id: "he", title: "Hebrew" },
+  { id: "isv", abbr: "Ⱄ", title: "Medžuslovjansky" },
+  { id: "ja", title: "日本語" },
+  { id: "kr", title: "한국어" },
+  { id: "nl", title: "Nederlands" },
+  { id: "pl", title: "Polski" },
+  { id: "ru", title: "Русский" },
+  { id: "sv", title: "Svenska" },
+  { id: "tr", title: "Türkçe" },
+  { id: "zh", title: "中文" },
+];
+
+export function initTranslations() {
+  return new Promise(async (resolve, reject) => {
+    await Promise.all(
+      LANGUAGES.map((lang) => lang.id).map(async (lang) => {
+        const locale = await import(`../translations/${lang}.json`);
+
+        addTranslation(lang, JSON.parse(locale.default));
+      }),
+    );
+
+    const language = settings.getLanguage() || "en";
+
+    i18next.init(
+      {
+        lng: language,
+        interpolation: {
+          escapeValue: false,
+        },
+        fallbackLng: "en",
+      },
+      (err) => (err ? reject(err) : resolve()),
+    );
+
+    i18next.on("initialized", () => {
+      const pluralResolver = i18next.services.pluralResolver;
+
+      pluralResolver.addRule("isv", pluralResolver.getRule("be"));
+    });
+
+    gtag("init_language", { language });
+  });
+}
+
+export function addTranslation(lang, json) {
+  i18next.on("initialized", () => {
+    i18next.services.resourceStore.addResourceBundle(lang, i18next.options.ns[0], json, true, true);
+  });
+}
+
+export default i18next;

package/src/variables.scss

@@ -0,0 +1,71 @@
+$brand-blue: #0044bb;
+$brand-red: #ff0000;
+
+$color-passed: #97cc64;
+$color-failed: #fd5a3e;
+$color-broken: #ffd050;
+$color-skipped: #aaa;
+$color-unknown: #d35ebe;
+
+$background-light-passed: #eef9eb;
+$background-light-failed: #ffe7e6;
+$background-light-broken: #fffae6;
+$background-light-skipped: #f2f2f2;
+$background-light-unknown: #faebf7;
+
+$background-passed: #a6e19d;
+$background-failed: #ffaca6;
+$background-broken: #ffeca0;
+$background-skipped: #cccccc;
+$background-unknown: #ecb7e2;
+
+$header-bg: #fff;
+$heading-bg: #f6f5f3;
+$body-bg: #fff;
+$content-bg: #fff;
+$attachment-bg: #f8f8f9;
+
+$border-color: #eceff1;
+$border-accent-color: #e5e5e5;
+
+$hover-color: #e4edfe;
+$selected-color: #fffacd;
+$summary-color: #f6f5f3;
+
+$text-color: #000;
+$text-muted-color: #999;
+
+$gap-size: 16px;
+$footer-gap-size: 32px;
+
+$small-screen: 1000px;
+$min-pane-size: 300px;
+
+/*  Sidebar  **/
+
+$sidebar-full-width: 180px;
+$sidebar-collapsed: 60px;
+
+$sidebar-separator-color: #4d4d4d;
+$sidebar-active-accent-color: #64b5f6;
+$app-nav-bg: #343434;
+$sidebar-active-text-color: #fff;
+$sidebar-hover-text-color: #fff;
+$sidebar-brand-color: #fff;
+$sidebar-text-shadow-color: #000;
+
+/* Links */
+
+$link-color: #000;
+$link-color-hover: #f00;
+
+/* Pane set */
+
+$pane-bg-color: #fff;
+$pane-shadow-color: #999;
+$pane-overlay-bg: rgba(240, 240, 240, 0.4);
+$pane-overlay-bg-hover: rgba(240, 240, 240, 0.2);
+
+/* Tooltip */
+$tooltip-bg: rgba(50, 50, 50, 0.8);
+$tooltip-color: #fff;

package/types.d.ts

@@ -0,0 +1,5 @@
+export type Allure2ReportOptions = {
+  reportName?: string;
+  reportLanguage?: string;
+  createdAt: number;
+}

package/webpack/utils.js

@@ -0,0 +1,10 @@
+import path, { dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname= dirname(fileURLToPath(import.meta.url));
+const __root = path.resolve(__dirname, "..");
+
+export function root(args) {
+  args = Array.prototype.slice.call(arguments, 0);
+  return path.join.apply(path, [__root].concat(args));
+}

package/webpack.config.js

@@ -0,0 +1,127 @@
+import MiniCssExtractPlugin from "mini-css-extract-plugin";
+import { dirname, join } from "node:path";
+import { env } from "node:process";
+import { fileURLToPath } from "node:url";
+import SpriteLoaderPlugin from "svg-sprite-loader/plugin.js";
+import webpack from "webpack";
+import { WebpackManifestPlugin } from "webpack-manifest-plugin";
+import * as utils from "./webpack/utils.js";
+
+const { SINGLE_FILE_MODE } = env;
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+export default (env, argv) => {
+  const config = {
+    entry: "./src/index.js",
+    output: {
+      path: join(__dirname, SINGLE_FILE_MODE ? "dist/single" : "dist/multi"),
+      filename: "app-[hash:8].js",
+      assetModuleFilename: `[name]-[hash:8][ext]`,
+    },
+    module: {
+      rules: [
+        {
+          test: /\.(ts|js)x?$/,
+          use: "babel-loader",
+          exclude: /node_modules/,
+        },
+        {
+          test: /\.css$/,
+          use: [MiniCssExtractPlugin.loader, "css-loader"]
+        },
+        {
+          test: /\.scss$/,
+          use: [
+            MiniCssExtractPlugin.loader,
+            {
+              loader: "css-loader",
+              // TODO: uncomment when we'll start migration to preact
+              // options: {
+              //   modules: true,
+              // },
+            },
+            {
+              loader: "sass-loader",
+              options: {
+                api: "modern",
+              }
+            },
+          ],
+        },
+        {
+          test: /\.hbs$/,
+          use: {
+            loader: "handlebars-loader",
+            options: {
+              helperDirs: [
+                utils.root("src/helpers"),
+                utils.root("src/blocks"),
+              ],
+            },
+          },
+        },
+        {
+          test: /translations\/\D+\.json$/,
+          type: "asset/source",
+        },
+        // FIXME: how can we solve the problem with svg in css?
+        // {
+        //   test: /\.svg$/,
+        //   type: "asset/inline",
+        //   resourceQuery: /inline/,
+        // },
+        {
+          test: /\.svg$/,
+          loader: "svg-sprite-loader",
+        },
+        {
+          test: /\.(ico)(\?.*)?$/,
+          loader: "file-loader",
+        },
+        {
+          test: /\.(png|jpe?g|gif|woff2?|otf|ttf|eot)$/i,
+          type: SINGLE_FILE_MODE ? "asset/inline" : "asset/resource",
+        },
+      ],
+    },
+    devServer: {
+      open: true,
+      hot: true,
+    },
+    plugins: [
+      new webpack.DefinePlugin({
+        "DEVELOPMENT": argv?.mode === "development",
+        "process.env": {
+          DEBUG_INFO_ENABLED: argv?.mode === "development",
+        },
+      }),
+      new MiniCssExtractPlugin({
+        filename: "styles-[hash:8].css",
+      }),
+      new SpriteLoaderPlugin(),
+      new WebpackManifestPlugin({
+        publicPath: "",
+      }),
+    ],
+    resolve: {
+      modules: ["node_modules"],
+      extensions: [".js", ".json"],
+      alias: {
+        "@": join(__dirname, "src"),
+      },
+    },
+  };
+
+  if (SINGLE_FILE_MODE) {
+    config.optimization = {
+      splitChunks: false,
+    }
+    config.plugins.push(
+      new webpack.optimize.LimitChunkCountPlugin({
+        maxChunks: 1,
+      }),
+    );
+  }
+
+  return config;
+};