Merge branch 'vNext' of https://github.com/IgniteUI/igniteui-angular-samples into mpopov/styling-samples-refactoring

Author: desig9stein

.github/CONTRIBUTING.md

@@ -1,8 +1,13 @@
-# <a name='#workflow'>Workflow</a>
+## In this topic
+ ### 1. [Development - applicable to issues and pull requests](#development)
+ ### 2. [Testing - applicable to pull requests](#testing)
+ ### 3. [Fixing bugs and adding new samples](#fixing)
+ ### 3.1. [Bug fixing guidelines](#bug)
+ ### 3.2. [Adding new samples guidelines](#new-sample)
 
-When working on an issue for the Ignite UI Angular Samples, you need to be aware of and to follow a correct status workflow. We have created a number of status labels in order to communicate well what the current status of a single issue/pull request is. The statuses are as follows:
+When working on an issue/new sample for the Ignite UI Angular Samples, you need to be aware of and to follow a correct status workflow. We have created a number of status labels in order to communicate well what the current status of a single issue/pull request is. The statuses are as follows:
 
-## Development - applicable to issues and pull requests
+# <a name='#development'>Development - applicable to issues and pull requests</a>
 
 1. `status: in-review` this is the initial status of an issue. If the label is not placed, go ahead and place it.
 2. `status: in-development` this is the status once you start working on an issue. Assign the issue to yourself if it hasn't been assigned already, remove the previous status and assign status: in-development.
@@ -24,7 +29,7 @@ Example status workflows:
 
 `status: in-review` => `status: not-to-fix` (Issue can be closed)
 
-## Testing - applicable to pull requests
+# <a name='#testing'>Testing - applicable to pull requests</a>
 1. `status: awaiting-test` this is the initial status of pull requests. If you're performing the pull request, please place this status on it. Pull requests are accepted if and only if all status checks pass, review is performed, and the pull request has been tested and contains `status: verified`.
 2. `status: in-test` place this status once you pick up the pull request for testing.
 3. `status: verified` place this status once you've tested the pull request, have verified that the issue is fixed, and have included all necessary automated tests for the issue.
@@ -39,3 +44,27 @@ Example status workflows:
 
 > Note: Testing a PR from Angular Samples (when new sample is added) with combination of PR related to topic update (or when new topic is added).
 Open both repositories ([DocFX Site Builder](https://github.com/IgniteUI/igniteui-docfx) and [Angular Demos](https://github.com/IgniteUI/igniteui-angular-samples)) and perform `npm start`. This will start both projects and you will see the embed sample in your topic under `localhost`.
+
+# <a name='#fixing'> Fixing bugs and adding new samples</a>
+## <a name='#bug'> Bug fixing guidelines</a>
+
+1. Depending on where the bug was found `the current version` or the `ongoing release version`, checkout a development branches from `vNext` or/and `master` branch. `vNext` is the version that is going to be used upon release (next version), and `master` is the branch with the current state (current version available on production). If the change/fix is applicable only to the ongoing release branch (`vNext`) there is no need to cherry-pick to `master` branch as the change/fix/feature will be pushed to `master` branch upon release.
+2. Run lint
+3. Pull request your changes and reference the issue. Use the enforced commit message format with applicable type, scope, etc.
+4. Don't forget to make the necessary status updates, as described in the workflow section.
+
+> Note: Cherry-pick to `master` branch only changes with **high priority**. There is no need to cherry-pick into `master` every bug fix/change from `vNext`> A regular mass merge PRs are going to be made from `vNext` into `master`.
+
+**Example workflow for a bug with high priority**
+The process will look like this:
+
+1.	Checkout new branch from `vNext`. For code example purposes let's say the new branch is called `fixing-bug-5423-vNext`.
+2.	Commit your changes to your `fixing-bug-5423-vNext` branch.
+3.	Push and PR to the `vNext` branch.
+4.	Switch to the `master` branch.
+5.  Create a new branch from `master`. For code example purposes let's say the new branch is called `fixing-bug-5423-master`.
+6.  Cherry pick your commit from the `fixing-bug-5423-vNext` branch: `git cherry-pick ..`
+7.  Push to your `fixing-bug-5423-master` branch and PR to the `master` branch.
+
+## <a name='#new-sample'> Adding new samples guidelines </a>
+Depending on where the the new sample should be added, `the current version` or the `ongoing release version`, checkout a development branches from `vNext` or/and `master` branch. `vNext` is the version that is going to be used upon release (next version), and `master` is the branch with the current state (current version). If the new sample is applicable only to the ongoing release branch (`vNext`) there is no need to cherry-pick to `master` branch as the new sample will be pushed to `master` branch upon release.

.github/workflows/build-app-crm.yml

@@ -1,19 +1,19 @@
 # This is a basic workflow to help you get started with Actions
 
-name: CI
+name: App CRM CI
 
 # Controls when the action will run. Triggers the workflow on push or pull request
 # events but only for the master branch
 on:
   push:
-    branches: [ master, vNext]
+    branches: [ master, vNext ]
     paths:
       - '**'
       - '!src/**'
       - '!live-editing/**'
       - '!projects/app-lob/**'
   pull_request:
-    branches: [ master, vNext]
+    branches: [ master, vNext ]
     paths:
       - '**'
       - '!src/**'
@@ -27,13 +27,23 @@ jobs:
     # The type of runner that the job will run on
     runs-on: ubuntu-latest
 
+    strategy:
+      matrix:
+        node-version: [16.x, 18.x]
+
     # Steps represent a sequence of tasks that will be executed as part of the job
     steps:
       # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
       - uses: actions/checkout@v2
 
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+            node-version: ${{ matrix.node-version }}
+            cache: 'npm'
+
       - name: Install dependencies
-        run: npm ci
+        run: npm ci --force
 
       - name: Run lint
         run: npm run lint

.github/workflows/build-app-lob.yml

@@ -1,12 +1,12 @@
 # This is a basic workflow to help you get started with Actions
 
-name: CI
+name: App LOB CI
 
 # Controls when the action will run. Triggers the workflow on push or pull request
 # events but only for the master branch
 on:
   push:
-    branches: [ master, vNext]
+    branches: [ master, vNext ]
     paths:
       - '**'
       - '!src/**'
@@ -16,7 +16,7 @@ on:
       - 'live-editing/generators/AppDVConfigGenerators.ts'
       - '!projects/app-crm/**'
   pull_request:
-    branches: [ master, vNext]
+    branches: [ master, vNext ]
     paths:
       - '**'
       - '!src/**'
@@ -32,13 +32,23 @@ jobs:
     # The type of runner that the job will run on
     runs-on: ubuntu-latest
 
+    strategy:
+      matrix:
+        node-version: [16.x, 18.x]
+
     # Steps represent a sequence of tasks that will be executed as part of the job
     steps:
       # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
       - uses: actions/checkout@v2
 
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+            node-version: ${{ matrix.node-version }}
+            cache: 'npm'
+
       - name: Install dependencies
-        run: npm ci
+        run: npm ci --force
 
       - name: Run lint
         run: npm run lint

.github/workflows/codeql.yml

@@ -0,0 +1,74 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL"
+
+on:
+  push:
+    branches: [ "master", "vNext" ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ "master", "vNext" ]
+  schedule:
+    - cron: '37 17 * * 1'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [ 'javascript' ]
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
+        # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v3
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v2
+      with:
+        languages: ${{ matrix.language }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+        
+        # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+        # queries: security-extended,security-and-quality
+
+        
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, Go, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v2
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+
+    #   If the Autobuild fails above, remove it and uncomment the following three lines. 
+    #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
+
+    # - run: |
+    #   echo "Run, Build Application using script"
+    #   ./location_of_script_within_repo/buildscript.sh
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v2
+      with:
+        category: "/language:${{matrix.language}}"

azure-pipelines.yml

@@ -12,7 +12,7 @@ steps:
 - script: npm config set $(igScope):_auth=$(token)
   displayName: 'Npm config auth'
 
-- script: npm ci
+- script: npm ci --force
   displayName: 'Install dependencies'
   env:
     AZURE_PIPELINES: "true"

gulpfile.js

@@ -18,7 +18,7 @@ const submodule = "igniteui-live-editing-samples";
 
 gulp.task("generate-live-editing", async () => {
     var appDv = argv.appDv !== undefined && argv.appDv.toLowerCase().trim() === "true";
-    const liveEditingOptions = appDv ? 
+    const liveEditingOptions = appDv ?
     {
         platform: 'angular',
         projectDir: "./projects/app-lob",
@@ -30,7 +30,7 @@ gulp.task("generate-live-editing", async () => {
     }
         :
     {
-        platform: 'angular', 
+        platform: 'angular',
         samplesDir: "./src/assets",
         configGeneratorPath: "./live-editing/generators/ConfigGenerators.ts",
         module: {
@@ -231,4 +231,4 @@ const cleanupAngularDemosLob = (cb) => {
     cb();
 }
 exports.repositoryfyAngularDemos = repositoryfyAngularDemos = gulp.series(cleanupAngularDemos, processDemosWithScss);
-exports.repositoryfyAngularDemosLob = repositoryfyAngularDemosLob =  gulp.series(cleanupAngularDemosLob, processDemosLobWithScss);
+exports.repositoryfyAngularDemosLob = repositoryfyAngularDemosLob =  gulp.series(cleanupAngularDemosLob, processDemosLobWithScss);

live-editing/configs/GridConfigGenerator.ts

@@ -1356,9 +1356,9 @@ export class GridConfigGenerator implements IConfigGenerator {
 
             ],
             appModuleConfig: new AppModuleConfig({
-                imports: ['GridValidatorServiceComponent', 'IgxGridModule', 'IgxFocusModule', 'IgxPreventDocumentScrollModule'],
+                imports: ['GridValidatorServiceComponent', 'IgxGridModule', 'IgxFocusModule', 'IgxPreventDocumentScrollModule', 'IgxSwitchModule'],
                 ngDeclarations: ['GridValidatorServiceComponent'],
-                ngImports: ['IgxPreventDocumentScrollModule', 'IgxGridModule', 'IgxFocusModule']
+                ngImports: ['IgxPreventDocumentScrollModule', 'IgxGridModule', 'IgxFocusModule', 'IgxSwitchModule']
             })
         }));
 
@@ -1410,6 +1410,18 @@ export class GridConfigGenerator implements IConfigGenerator {
             })
         }));
 
+        configs.push(new Config({
+            component: 'GridSummaryExportComponent',
+            additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/data/nwindData.ts'],
+            appModuleConfig: new AppModuleConfig({
+                imports: ['IgxGridModule', 'GridSummaryExportComponent', 'IgxPreventDocumentScrollModule', 'IgxExcelExporterService'],
+                ngDeclarations: ['GridSummaryExportComponent'],
+                ngImports: ['IgxPreventDocumentScrollModule', 'IgxGridModule'],
+                ngProviders: ['IgxExcelExporterService']
+            })
+        }));
+
+
         return configs;
     }
 }

live-editing/configs/HierarchicalGridConfigGenerator.ts

@@ -342,7 +342,7 @@ export class HierarchicalGridConfigGenerator implements IConfigGenerator {
         }));
 
         configs.push(new Config({
-            additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/data/hierarchical-data.ts'],
+            additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/data/hierarchical-data.ts', '/src/app/services/svgIcons.ts'],
             appModuleConfig: new AppModuleConfig({
                 imports: ['IgxHierarchicalGridModule', 'HGridPinningSampleComponent', 'IgxPreventDocumentScrollModule'],
                 ngDeclarations: ['HGridPinningSampleComponent'],
@@ -942,9 +942,9 @@ export class HierarchicalGridConfigGenerator implements IConfigGenerator {
                 '/src/app/data/hierarchical-data.ts'
             ],
             appModuleConfig: new AppModuleConfig({
-                imports: ['HierarchicalGridValidatorServiceComponent', 'IgxHierarchicalGridModule', 'IgxPreventDocumentScrollModule'],
+                imports: ['HierarchicalGridValidatorServiceComponent', 'IgxHierarchicalGridModule', 'IgxPreventDocumentScrollModule', 'IgxSwitchModule'],
                 ngDeclarations: ['HierarchicalGridValidatorServiceComponent'],
-                ngImports: ['IgxPreventDocumentScrollModule', 'IgxHierarchicalGridModule']
+                ngImports: ['IgxPreventDocumentScrollModule', 'IgxHierarchicalGridModule', 'IgxSwitchModule']
             })
         }));
 
@@ -999,6 +999,18 @@ export class HierarchicalGridConfigGenerator implements IConfigGenerator {
             })
         }));
 
+        configs.push(new Config({
+            additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/data/singersData.ts',
+                '/src/app/hierarchical-grid/models.ts'],
+            appModuleConfig: new AppModuleConfig({
+                imports: ['IgxHierarchicalGridModule', 'HGridSummaryExportComponent', 'IgxPreventDocumentScrollModule', 'IgxExcelExporterService'],
+                ngDeclarations: ['HGridSummaryExportComponent'],
+                ngImports: ['IgxPreventDocumentScrollModule', 'IgxHierarchicalGridModule'],
+                ngProviders: ['IgxExcelExporterService']
+            }),
+            component: 'HGridSummaryExportComponent'
+        }));
+
         return configs;
     }
 }

live-editing/configs/TreeGridConfigGenerator.ts

@@ -221,7 +221,7 @@ export class TreeGridConfigGenerator implements IConfigGenerator {
 
         // TreeGrid Column Pinning sample
         configs.push(new Config({
-            additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/tree-grid/data/employees-flat-detailed.ts'],
+            additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/tree-grid/data/employees-flat-detailed.ts', '/src/app/services/svgIcons.ts'],
             appModuleConfig: new AppModuleConfig({
                 imports: ['IgxPreventDocumentScrollModule', 'IgxTreeGridModule', 'TreeGridColumnPinningSampleComponent', 'IgxIconModule'],
                 ngDeclarations: ['TreeGridColumnPinningSampleComponent'],
@@ -1155,9 +1155,9 @@ export class TreeGridConfigGenerator implements IConfigGenerator {
             ],
             appModuleConfig: new AppModuleConfig({
                 imports: ['IgxPreventDocumentScrollModule', 'IgxTreeGridModule', 'TreeGridValidatorServiceComponent',
-                    'IgxButtonModule'],
+                    'IgxButtonModule', 'IgxSwitchModule'],
                 ngDeclarations: ['TreeGridValidatorServiceComponent'],
-                ngImports: ['IgxPreventDocumentScrollModule', 'IgxTreeGridModule', 'IgxButtonModule']
+                ngImports: ['IgxPreventDocumentScrollModule', 'IgxTreeGridModule', 'IgxButtonModule', 'IgxSwitchModule']
             })
         }));
 
@@ -1201,6 +1201,18 @@ export class TreeGridConfigGenerator implements IConfigGenerator {
             })
         }));
 
+         configs.push(new Config({
+            additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/tree-grid/data/foods.ts'],
+            appModuleConfig: new AppModuleConfig({
+                imports: ['IgxPreventDocumentScrollModule', 'IgxTreeGridModule', 'TreeGridSummaryExportComponent', 'IgxIconModule', 'IgxExcelExporterService'],
+                ngDeclarations: ['TreeGridSummaryExportComponent'],
+                ngImports: ['IgxPreventDocumentScrollModule', 'IgxTreeGridModule', 'IgxIconModule'],
+                ngProviders: ['IgxExcelExporterService']
+            }),
+            component: 'TreeGridSummaryExportComponent',
+            shortenComponentPathBy: '/tree-grid/'
+        }));
+
         return configs;
     }
 }