Feat/redesign

.github/actions/build-import-app-new/action.yml

@@ -0,0 +1,81 @@
+# v2.0.0
+name: Build Import App New
+
+inputs:
+  githubToken:
+    description: "GitHub Token"
+    required: true
+  npmToken:
+    description: "NPM Token"
+    required: true
+
+runs:
+  using: composite
+
+  steps:
+    - name: Set Vendor Portal ref
+      shell: bash
+      run: |
+        echo "REF=feat/redesign" >> $GITHUB_ENV
+
+    - name: Checkout Import module
+      uses: actions/checkout@v3
+      with:
+        repository: "VirtoCommerce/vc-module-import"
+        token: ${{ inputs.githubToken }}
+        path: "src/VirtoCommerce.ImportModule.Web/import-app"
+        ref: ${{ env.REF }}
+
+    - name: Install dependencies for Import App
+      shell: bash
+      working-directory: src/VirtoCommerce.ImportModule.Web/import-app
+      run: yarn
+
+    - name: Build Import Module
+      shell: bash
+      working-directory: src/VirtoCommerce.ImportModule.Web/import-app
+      run: yarn bootstrap
+
+    - name: Add auth token
+      shell: bash
+      working-directory: src/VirtoCommerce.ImportModule.Web/import-app
+      run: |
+        yarn config set --json npmRegistries '{ "//registry.npmjs.org": { "npmAuthToken": "'"${NPM_TOKEN}"'" } }'
+      env:
+        NPM_TOKEN: ${{ inputs.npmToken }}
+
+    - name: Check for NPM tag
+      shell: bash
+      working-directory: "src/VirtoCommerce.ImportModule.Web/import-app"
+      run: |
+        # Set default tag
+        NPM_TAG="latest"
+
+        # Check if package.json has npmTag
+        if [ -f "package.json" ]; then
+          NPM_TAG_FROM_PKG=$(node -p "try { const pkg = require('./package.json'); pkg.npmTag || ''; } catch(e) { '' }")
+          if [ ! -z "$NPM_TAG_FROM_PKG" ] && [ "$NPM_TAG_FROM_PKG" != "undefined" ] && [ "$NPM_TAG_FROM_PKG" != "null" ]; then
+            echo "Found npmTag in package.json: $NPM_TAG_FROM_PKG"
+            NPM_TAG="$NPM_TAG_FROM_PKG"
+          fi
+        fi
+
+        # Save to environment for later steps
+        echo "NPM_TAG=$NPM_TAG" >> $GITHUB_ENV
+        echo "Will publish with npm tag: $NPM_TAG"
+
+    - name: Publish Import module
+      shell: bash
+      working-directory: src/VirtoCommerce.ImportModule.Web/import-app
+      run: |
+        if [ "$NPM_TAG" = "latest" ]; then
+          yarn run publish || true
+        else
+          yarn run publish:tag --tag=$NPM_TAG || true
+        fi
+
+    - name: Build Import App
+      shell: bash
+      working-directory: src/VirtoCommerce.ImportModule.Web/import-app
+      run: yarn build
+

.github/actions/build-import-app/action.yml

@@ -32,10 +32,35 @@ runs:
       env:
         NPM_TOKEN: ${{ inputs.npmToken }}
 
+    - name: Check for NPM tag
+      shell: bash
+      working-directory: "src/VirtoCommerce.ImportModule.Web/import-app"
+      run: |
+        # Set default tag
+        NPM_TAG="latest"
+
+        # Check if package.json has npmTag
+        if [ -f "package.json" ]; then
+          NPM_TAG_FROM_PKG=$(node -p "try { const pkg = require('./package.json'); pkg.npmTag || ''; } catch(e) { '' }")
+          if [ ! -z "$NPM_TAG_FROM_PKG" ] && [ "$NPM_TAG_FROM_PKG" != "undefined" ] && [ "$NPM_TAG_FROM_PKG" != "null" ]; then
+            echo "Found npmTag in package.json: $NPM_TAG_FROM_PKG"
+            NPM_TAG="$NPM_TAG_FROM_PKG"
+          fi
+        fi
+
+        # Save to environment for later steps
+        echo "NPM_TAG=$NPM_TAG" >> $GITHUB_ENV
+        echo "Will publish with npm tag: $NPM_TAG"
+
     - name: Publish Import module
       shell: bash
       working-directory: src/VirtoCommerce.ImportModule.Web/import-app
-      run: yarn run publish || true
+      run: |
+        if [ "$NPM_TAG" = "latest" ]; then
+          yarn run publish || true
+        else
+          yarn run publish:tag --tag=$NPM_TAG || true
+        fi
 
     - name: Build Import App
       shell: bash

.github/workflows/module-ci.yml

@@ -98,6 +98,12 @@ jobs:
           githubToken: ${{ secrets.REPO_TOKEN }}
           npmToken: ${{ secrets.NPM_TOKEN }}
 
+      - name: Build New Import App
+        uses: ./.github/actions/build-import-app-new
+        with:
+          githubToken: ${{ secrets.REPO_TOKEN }}
+          npmToken: ${{ secrets.NPM_TOKEN }}
+
       - name: Build
         run: vc-build Compile
 
@@ -108,11 +114,11 @@ jobs:
         run: vc-build Compress -skip Clean+Restore+Compile+Test
 
       - name: Publish Nuget
-        if: ${{ (github.ref == 'refs/heads/dev' || github.ref == 'refs/heads/master') && github.event_name != 'workflow_dispatch' }}
+        if: ${{ (github.ref == 'refs/heads/dev' || github.ref == 'refs/heads/master' || github.ref == 'refs/heads/feat/redesign') && github.event_name != 'workflow_dispatch' }}
         uses: VirtoCommerce/vc-github-actions/publish-nuget@master
 
       - name: Publish to Blob
-        if: ${{ github.ref == 'refs/heads/master' || github.ref == 'refs/heads/dev' || github.event_name == 'pull_request' || (github.event_name == 'workflow_dispatch' && github.ref != 'refs/heads/master') }}
+        if: ${{ github.ref == 'refs/heads/master' || github.ref == 'refs/heads/dev' || github.ref == 'refs/heads/feat/redesign' || github.event_name == 'pull_request' || (github.event_name == 'workflow_dispatch' && github.ref != 'refs/heads/master') }}
         id: blobRelease
         uses: VirtoCommerce/vc-github-actions/publish-blob-release@master
         with:
@@ -143,7 +149,7 @@ jobs:
           fi;
 
       - name: Create deployment matrix
-        if: ${{ github.ref == 'refs/heads/dev' || github.ref == 'refs/heads/master'}}
+        if: ${{ github.ref == 'refs/heads/dev' || github.ref == 'refs/heads/master' || github.ref == 'refs/heads/feat/redesign'}}
         uses: VirtoCommerce/vc-github-actions/cloud-create-deploy-matrix@master
         id: deployment-matrix
         with:
@@ -185,7 +191,7 @@ jobs:
           echo "Jira Upload Build Info response: ${{ steps.push_build_info_to_jira.outputs.response }}"
 
   deploy-cloud:
-    if: ${{ (github.ref == 'refs/heads/master') || (github.ref == 'refs/heads/dev') }}
+    if: ${{ (github.ref == 'refs/heads/master') || (github.ref == 'refs/heads/dev') || github.ref == 'refs/heads/feat/redesign' }}
     needs: ci
     uses: VirtoCommerce/.github/.github/workflows/deploy-cloud.yml@VCI-805
     with:

src/VirtoCommerce.ImportModule.Web/import-app/package.json

@@ -30,49 +30,52 @@
     "@rollup/plugin-typescript": "^11.1.5",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^20.10.5",
-    "@typescript-eslint/eslint-plugin": "^6.16.0",
-    "@typescript-eslint/parser": "^6.16.0",
-    "@vc-shell/api-client-generator": "^1.0.341",
-    "@vc-shell/release-config": "^1.0.341",
-    "@vc-shell/ts-config": "^1.0.341",
+    "@typescript-eslint/eslint-plugin": "^7.4.0",
+    "@typescript-eslint/parser": "^7.4.0",
+    "@vc-shell/api-client-generator": "^1.1.4",
+    "@vc-shell/release-config": "^1.1.4",
+    "@vc-shell/ts-config": "^1.1.4",
     "@vitejs/plugin-vue": "5.0.3",
     "@vue/eslint-config-prettier": "^9.0.0",
-    "@vue/eslint-config-typescript": "^12.0.0",
+    "@vue/eslint-config-typescript": "^13.0.0",
     "autoprefixer": "^10.4.16",
     "conventional-changelog-cli": "^4.1.0",
     "cross-env": "^7.0.3",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-prettier": "^5.1.2",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-vue": "^9.19.2",
     "husky": "^8.0.3",
+    "jsdom": "^24.1.0",
     "lint-staged": "^15.2.0",
     "lodash-es": "^4.17.21",
     "postcss": "^8.4.32",
     "prettier": "^3.1.1",
-    "querystring-es3": "^0.2.1",
-    "sass": "^1.69.6",
+    "sass": "^1.87.0",
     "tailwindcss": "^3.4.0",
     "tsx": "^4.7.1",
-    "typescript": "~5.3.3",
-    "vite": "5.3.6",
-    "vite-plugin-checker": "^0.6.2",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.3",
+    "vite-plugin-checker": "^0.9.1",
     "vite-plugin-mkcert": "^1.17.1",
+    "vitest": "^1.6.0",
     "vue-eslint-parser": "^9.3.2",
-    "vue-tsc": "^1.8.27"
+    "vue-router-mock": "^1.1.0",
+    "vue-tsc": "^2.2.10"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^5.15.3",
-    "@vc-shell/config-generator": "^1.0.341",
-    "@vc-shell/framework": "^1.0.341",
+    "@vc-shell/config-generator": "^1.1.4",
+    "@vc-shell/framework": "^1.1.4",
+    "@vcmp-vendor-portal/api": "^1.1.3",
+    "@vcmp-vendor-portal/modules": "^1.1.3",
+    "@virtocommerce/import-app": "^1.0.168",
     "@vueuse/core": "^10.7.1",
     "@vueuse/integrations": "^10.7.1",
     "cross-spawn": "^7.0.3",
     "moment": "^2.30.1",
-    "roboto-fontface": "^0.10.0",
     "vee-validate": "^4.12.4",
-    "vue": "^3.4.19",
+    "vue": "^3.5.13",
     "vue-router": "^4.2.5"
   },
   "lint-staged": {

src/VirtoCommerce.ImportModule.Web/import-app/src/main.ts

@@ -7,8 +7,6 @@ import { RouterView } from "vue-router";
 import { bootstrap } from "./bootstrap";
 
 // Load required CSS
-import "@fortawesome/fontawesome-free/css/all.min.css";
-import "roboto-fontface/css/roboto/roboto-fontface.css";
 import "@vc-shell/framework/dist/index.css";
 
 async function startApp() {

src/VirtoCommerce.ImportModule.Web/import-app/src/modules/import/components/ImportStat.vue

@@ -33,7 +33,7 @@
         class="tw-flex !tw-flex-row tw-items-center tw-p-5"
       >
         <VcIcon
-          :icon="badge.icon"
+          :icon="`material-${badge.icon}`"
           size="xxl"
           :style="{ color: badge.color }"
         ></VcIcon>

src/VirtoCommerce.ImportModule.Web/import-app/src/modules/import/pages/import-new.vue

@@ -111,6 +111,7 @@
             :fill="true"
             class="import-new__history"
           >
+          <!-- @vue-generic {ImportRunHistory} -->
             <VcTable
               :columns="columns"
               :loading="importHistoryLoading"
@@ -426,7 +427,7 @@ const uploadActions = ref<INotificationActions[]>([
       clearErrorMessage();
     },
     outline: true,
-    variant: "danger",
+    variant: "secondary",
     isVisible: computed(() => !inProgress.value),
   },
   {

src/VirtoCommerce.ImportModule.Web/import-app/src/modules/import/pages/import-profiles.vue

@@ -8,6 +8,7 @@
     @expand="$emit('expand:blade')"
     @collapse="$emit('collapse:blade')"
   >
+  <!-- @vue-generic {ExtProfile} -->
     <VcTable
       :loading="profilesLoading"
       :columns="columns"

src/VirtoCommerce.ImportModule.Web/import-app/src/modules/vite.config.mts

@@ -32,6 +32,14 @@ export default defineConfig({
         "lodash-es",
         "@vueuse/core",
       ],
+      output: {
+        assetFileNames: (assetInfo) => {
+          if (assetInfo.name && assetInfo.name.endsWith(".css")) {
+            return "style.css";
+          }
+          return "assets/[name]-[hash][extname]";
+        },
+      },
     },
   },
   plugins: [libAssetsPlugin(), vue()],

src/VirtoCommerce.ImportModule.Web/import-app/src/pages/App.vue

@@ -57,5 +57,5 @@ async function customizationHandler() {
 </script>
 
 <style lang="scss">
-@import "./../styles/index.scss";
+@use "./../styles/index.scss";
 </style>

src/VirtoCommerce.ImportModule.Web/import-app/src/shims-vue.d.ts

@@ -8,16 +8,29 @@ declare module '*.vue' {
   export default component
 }
 
-declare module '@vue/runtime-core' {
-    interface ComponentCustomProperties {
-        $isPhone: Ref<boolean>;
-        $isTablet: Ref<boolean>;
-        $isMobile: Ref<boolean>;
-        $isDesktop: Ref<boolean>;
-        $isTouch: boolean;
-    }
-
-    interface ComponentOptionsBase extends CoreBladeAdditionalSettings {}
+declare module "@vue/runtime-core" {
+  interface ComponentCustomProperties extends _ComponentCustomProperties {
+    $mergeLocaleMessage: Composer<{}, {}, {}, string, never, string>["mergeLocaleMessage"];
+    $hasAccess: (permissions: string | string[] | undefined) => boolean;
+    $isPhone: Ref<boolean>;
+    $isTablet: Ref<boolean>;
+    $isMobile: Ref<boolean>;
+    $isDesktop: Ref<boolean>;
+    $isTouch: boolean;
+    $t: (key: string, ...args: any[]) => string;
+    $dynamicModules: {
+      [x: string]: {
+        components?: { [key: string]: Component };
+        composables?: { [key: string]: (...args: any[]) => any };
+        default: { install: (app: any, options?: any) => void };
+        schema: { [key: string]: DynamicGridSchema | DynamicDetailsSchema };
+        locales: { [key: string]: { [key: string]: string } };
+        notificationTemplates?: { [key: string]: Component };
+      };
+    };
+  }
+
+  interface ComponentOptionsBase extends CoreBladeAdditionalSettings {}
 }
 
 export {}

src/VirtoCommerce.ImportModule.Web/import-app/src/styles/index.scss

@@ -1,9 +1,7 @@
+@use 'custom';
+
 @tailwind base;
 
 @tailwind components;
 
-@import 'colors';
-
-@import 'custom';
-
 @tailwind utilities;

src/VirtoCommerce.ImportModule.Web/module.manifest

@@ -34,5 +34,11 @@
       <contentPath>import-app/dist</contentPath>
       <permission>import:access</permission>
     </app>
+    <app id="import-app-new">
+      <title>Import App New</title>
+      <iconUrl>/apps/import-app/img/icons/favicon-32x32.png</iconUrl>
+      <contentPath>import-app/dist</contentPath>
+      <permission>import:access</permission>
+    </app>
   </apps>
 </module>