- Updated CI

.github/workflows/publish.yml

@@ -40,7 +40,7 @@ jobs:
         run: |
           echo "majorMinorPatch=$GitVersion_MajorMinorPatch" >> "$GITHUB_OUTPUT"
           echo "semver=$GitVersion_SemVer" >> "$GITHUB_OUTPUT"
-  tests:
+  tests_components:
     runs-on: ubuntu-latest
     defaults:
       run:
@@ -162,7 +162,7 @@ jobs:
 
   build_components:
     runs-on: ubuntu-latest
-    needs: [version,tests]
+    needs: [version,tests_components]
     defaults:
       run:
         working-directory: ./packages/components
@@ -171,7 +171,7 @@ jobs:
     steps:
       - uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version: '18'
           registry-url: 'https://registry.npmjs.org'
 
       - name: Checkout
@@ -265,6 +265,65 @@ jobs:
             fi
           fi
 
-          
+  deploy_teams:    
+    runs-on: ubuntu-latest
+    needs: [version,tests_components]
+    defaults:
+      run:
+        working-directory: ./packages/apps/teams
+    env:
+      VERSION: ${{ needs.version.outputs.semver }}
+    steps:
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+          registry-url: 'https://registry.npmjs.org'
 
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+          run_install: false
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: |
+          pnpm install
+
+      - name: Run PowerShell deployment
+        shell: pwsh
+        run: |
+          ../../deploy/deploy-teams.ps1 -Env CI -Version "$env:VERSION"
+
+      - name: Upload artifact
+        uses: actions/upload-artifact@v3
+        with:
+          name: appPackage
+          path: |
+            ${{ github.workspace }}/apps/teams/appPackage/build/*.zip
+            !${{ github.workspace }}/**/node_modules
+            !${{ github.workspace }}/**/src
+            !${{ github.workspace }}/**/env
+            !${{ github.workspace }}/**/infra
+            !${{ github.workspace }}/**/.pnpm-store
+            !${{ github.workspace }}/**/.vscode
+            !${{ github.workspace }}/**/.storybook
+            !${{ github.workspace }}/**/template
+            !${{ github.workspace }}/**/webpack
          

apps/teams/src/views/index.html

@@ -80,8 +80,10 @@
 
                 <!-- All: All results -->
                 <pnp-search-results id="b359f3dc-6b6a-4575-90ed-e5942bcbb8a6"
-                                    entity-types="driveItem"
-                                    query-text="*"                                
+                                    entity-types="listItem,externalItem"
+                                    query-text="*"
+                                    enable-result-types
+                                    connections="*"                                
                                     query-template='{searchTerms} -ParentLink:PreservationHoldLibrary (FileType:doc OR FileType:docx OR FileType:docm OR FileType:dot OR FileType:dotx OR FileType:dotm OR FileType:txt OR FileType:rtf OR FileType:aspx OR FileType:xls OR FileType:xlsx OR FileType:xlsm OR FileType:xlsb OR FileType:xlx OR FileType:xlt OR FileType:xltx OR FileType:xltm OR FileType:xml OR FileType:csv OR FileType:ppt OR FileType:pptx OR FileType:pptm OR FileType:pps OR FileType:ppsm OR FileType:ppsx OR FileType:pot OR FileType:potx OR FileType:potm OR FileType:pdf OR FileType:zip OR FileType:vsd OR FileType:vsdx OR FileType:vsdm OR FileType:html OR FileType:7z OR FileType:rar OR FileType:one OR FileType:mp4 OR FileType:avi OR FileType:flv OR FileType:wmv)'
                                     fields="name,title,weburl,created,createdBy,filetype,lastModifiedTime,lastModifiedDateTime,lastModifiedBy,modifiedBy,path,hitHighlightedProperties,hitHighlightedSummary,SPSiteURL,SiteTitle,defaultEncodingURL,parentLink,serverRedirectedURL,filename,previewUrl,thumbnailUrl,NormSiteID,NormUniqueID,NormListID"                                          
                                     show-paging

apps/teams/teamsapp.yml

@@ -17,30 +17,30 @@ provision:
     writeToEnvironmentFile:
       teamsAppId: TEAMS_APP_ID
 
-  # - uses: arm/deploy # Deploy given ARM templates parallelly.
-  #   with:
-  #     # AZURE_SUBSCRIPTION_ID is a built-in environment variable,
-  #     # if its value is empty, TeamsFx will prompt you to select a subscription.
-  #     # Referencing other environment variables with empty values
-  #     # will skip the subscription selection prompt.
-  #     subscriptionId: ${{AZURE_SUBSCRIPTION_ID}}
-  #     # AZURE_RESOURCE_GROUP_NAME is a built-in environment variable,
-  #     # if its value is empty, TeamsFx will prompt you to select or create one
-  #     # resource group.
-  #     # Referencing other environment variables with empty values
-  #     # will skip the resource group selection prompt.
-  #     resourceGroupName: ${{AZURE_RESOURCE_GROUP_NAME}}
-  #     templates:
-  #       - path: ./infra/azure.bicep # Relative path to this file
-  #         # Relative path to this yaml file.
-  #         # Placeholders will be replaced with corresponding environment
-  #         # variable before ARM deployment.
-  #         parameters: ./infra/azure.parameters.json
-  #         # Required when deploying ARM template
-  #         deploymentName: Create-resources-for-tab
-  #     # Teams Toolkit will download this bicep CLI version from github for you,
-  #     # will use bicep CLI in PATH if you remove this config.
-  #     #bicepCliVersion: v0.9.1
+  - uses: arm/deploy # Deploy given ARM templates parallelly.
+    with:
+      # AZURE_SUBSCRIPTION_ID is a built-in environment variable,
+      # if its value is empty, TeamsFx will prompt you to select a subscription.
+      # Referencing other environment variables with empty values
+      # will skip the subscription selection prompt.
+      subscriptionId: ${{AZURE_SUBSCRIPTION_ID}}
+      # AZURE_RESOURCE_GROUP_NAME is a built-in environment variable,
+      # if its value is empty, TeamsFx will prompt you to select or create one
+      # resource group.
+      # Referencing other environment variables with empty values
+      # will skip the resource group selection prompt.
+      resourceGroupName: ${{AZURE_RESOURCE_GROUP_NAME}}
+      templates:
+        - path: ./infra/azure.bicep # Relative path to this file
+          # Relative path to this yaml file.
+          # Placeholders will be replaced with corresponding environment
+          # variable before ARM deployment.
+          parameters: ./infra/azure.parameters.json
+          # Required when deploying ARM template
+          deploymentName: Create-resources-for-tab
+      # Teams Toolkit will download this bicep CLI version from github for you,
+      # will use bicep CLI in PATH if you remove this config.
+      #bicepCliVersion: v0.9.1
 
   # Validate using manifest schema
 
@@ -79,25 +79,25 @@ provision:
       appId: M365_APP_ID
 
 # Triggered when 'teamsapp deploy' is executed
-# deploy:
-#   - uses: cli/runNpmCommand
-#     name: build app
-#     with:
-#       args: run build --verbose
-#   # Deploy your application to Azure App Service using the zip deploy feature.
-#   # For additional details, refer to https://aka.ms/zip-deploy-to-app-services.
-#   - uses: azureAppService/zipDeploy
-#     with:
-#       # Deploy base folder
-#       artifactFolder: .
-#       workingDirectory: 'dist'
-#       # Ignore file location, leave blank will ignore nothing
-#       # ignoreFile: .webappignore
-#       # The resource id of the cloud resource to be deployed to.
-#       # This key will be generated by arm/deploy action automatically.
-#       # You can replace it with your existing Azure Resource id
-#       # or add it to your environment variable file.
-#       resourceId: ${{TAB_AZURE_APP_SERVICE_RESOURCE_ID}}
+deploy:
+  - uses: cli/runNpmCommand
+    name: build app
+    with:
+      args: run build --verbose
+  # Deploy your application to Azure App Service using the zip deploy feature.
+  # For additional details, refer to https://aka.ms/zip-deploy-to-app-services.
+  - uses: azureAppService/zipDeploy
+    with:
+      # Deploy base folder
+      artifactFolder: .
+      workingDirectory: 'dist'
+      # Ignore file location, leave blank will ignore nothing
+      # ignoreFile: .webappignore
+      # The resource id of the cloud resource to be deployed to.
+      # This key will be generated by arm/deploy action automatically.
+      # You can replace it with your existing Azure Resource id
+      # or add it to your environment variable file.
+      resourceId: ${{TAB_AZURE_APP_SERVICE_RESOURCE_ID}}
 
 # Triggered when 'teamsapp publish' is executed
 publish:

deploy/variables.ci.ps1

@@ -9,5 +9,16 @@ $global:ENV_AzDeployTenantId = $env:ENV_AzDeployTenantId
 $global:ENV_AzDeploySubcriptionId = $env:ENV_AzDeploySubcriptionId
 $global:ENV_AzResourceGroupName = $env:ENV_AzResourceGroupName
 $global:ENV_AzStorageAccountName = $env:ENV_AzStorageAccountName
+
 $global:ENV_AzBlobContainerName = $env:ENV_AzBlobContainerName
-$global:ENV_AzBlobContainerWebName = $env:ENV_AzBlobContainerWebName
+$global:ENV_AzBlobContainerWebName = $env:ENV_AzBlobContainerWebName
+
+# -----------------------------[TeamsFx] ------------------------------------
+$global:ENV_MSSearchAppClientId = $ENV_MSSearchAppClientId
+$global:ENV_MSSearchAppScopes = $ENV_MSSearchAppScopes
+
+$global:ENV_M365AccountName = $env:ENV_M365AccountName
+$global:ENV_M365AccountPassword = $env:ENV_M365AccountPassword
+$global:ENV_M365TenantId = $env:ENV_M365TenantId
+
+$global:ENV_EnvName = $env:ENV_EnvName

packages/components/dev/index.html

@@ -47,8 +47,11 @@
     -->
 
     <mgt-msal2-provider 
-        client-id="971daacd-e649-46ea-bc61-7a1a8b33a97b"
-        authority="https://login.microsoftonline.com/d7e957c6-c0d2-4ee3-88d5-bf5c0a56268b"
+        client-id="899d9e47-100b-4c31-99b0-478a0dd313c3"
+        authority="https://login.microsoftonline.com/organizations"
+        prompt="consent"
+        login-type="popup"
+        scopes="Bookmark.Read.All,ExternalItem.Read.All,Files.Read,Sites.Read.All"
 
     ></mgt-msal2-provider>
 
@@ -61,7 +64,7 @@
                 <span class="font-bold">PnP Modern Search - Core Components</span>
             </div>
 
-            <div><mgt-login ></mgt-login></div>
+            <div><mgt-login></mgt-login></div>
 
         </div>
 
@@ -111,11 +114,14 @@
 
             <!-- All: All results -->
             <pnp-search-results id="b359f3dc-6b6a-4575-90ed-e5942bcbb8a6"
-                                entity-types="driveItem"
+                                entity-types="listItem,externalItem"
                                 query-text="*"
                                 enable-debug
+                                enable-result-types
+                                use-mgt
+                                connections="*"
                                 query-template='{searchTerms} -ParentLink:PreservationHoldLibrary (FileType:doc OR FileType:docx OR FileType:docm OR FileType:dot OR FileType:dotx OR FileType:dotm OR FileType:txt OR FileType:rtf OR FileType:aspx OR FileType:xls OR FileType:xlsx OR FileType:xlsm OR FileType:xlsb OR FileType:xlx OR FileType:xlt OR FileType:xltx OR FileType:xltm OR FileType:xml OR FileType:csv OR FileType:ppt OR FileType:pptx OR FileType:pptm OR FileType:pps OR FileType:ppsm OR FileType:ppsx OR FileType:pot OR FileType:potx OR FileType:potm OR FileType:pdf OR FileType:zip OR FileType:vsd OR FileType:vsdx OR FileType:vsdm OR FileType:html OR FileType:7z OR FileType:rar OR FileType:one OR FileType:mp4 OR FileType:avi OR FileType:flv OR FileType:wmv)'
-                                fields="name,title,weburl,created,createdBy,filetype,lastModifiedTime,lastModifiedDateTime,lastModifiedBy,modifiedBy,path,hitHighlightedProperties,hitHighlightedSummary,SPSiteURL,SiteTitle,defaultEncodingURL,parentLink,serverRedirectedURL,filename,previewUrl,thumbnailUrl,NormSiteID,NormUniqueID,NormListID"                                          
+                                fields="name,title,weburl,created,createdBy,filetype,lastModifiedTime,lastModifiedDateTime,lastModifiedBy,modifiedBy,path,hitHighlightedProperties,hitHighlightedSummary,SPSiteURL,SiteTitle,defaultEncodingURL,parentLink,serverRedirectedURL,filename,previewUrl,thumbnailUrl,NormSiteID,NormUniqueID,NormListID,DriveId"                                          
                                 show-paging
                                 enable-suggestion
                                 sort-properties='[{"sortField":"Created","sortDirection":"desc","isDefaultSort":false,"isUserSort":true,"sortFieldDisplayName":{"fr-fr":"Créé le","default":"Created"}}]'

packages/components/src/components/BaseComponent.ts

@@ -1,6 +1,6 @@
 
 import { EventHandler, LocalizationHelper, MgtTemplatedTaskComponent } from "@microsoft/mgt-element";
-import { css, CSSResultGroup, html, PropertyValueMap, PropertyValues, unsafeCSS } from "lit";
+import { css, CSSResultGroup, html, LitElement, PropertyValueMap, PropertyValues, unsafeCSS } from "lit";
 import { property, state } from "lit/decorators.js";
 import { ErrorTypes, EventConstants, ThemeDefaultCSSVariablesValues, ThemeInternalCSSVariables, ThemePublicCSSVariables } from "../common/Constants";
 import { IComponentBinding } from "../models/common/IComponentBinding";
@@ -144,7 +144,7 @@ export abstract class BaseComponent extends ScopedElementsMixin(MgtTemplatedComp
                        ${unsafeCSS(`${ThemeInternalCSSVariables.textColor}: var(${ThemePublicCSSVariables.textColor}, ${ThemeDefaultCSSVariablesValues.defaultTextColor})`)};
                        ${unsafeCSS(`${ThemeInternalCSSVariables.textLight}: ${ThemeDefaultCSSVariablesValues.defaultTextLight}`)};
                        ${unsafeCSS(`${ThemeInternalCSSVariables.primaryBackgroundColorDark}: var(${ThemePublicCSSVariables.primaryBackgroundColorDark}, ${ThemeDefaultCSSVariablesValues.primaryBackgroundColorDark})`)};
-                       ${unsafeCSS(`${ThemeInternalCSSVariables.textColorDark}: var(${ThemePublicCSSVariables.textColorDark}, ${ThemeDefaultCSSVariablesValues.textColorDark})`)};
+                       ${unsafeCSS(`${ThemeInternalCSSVariables.textColorDark}: var(${ThemePublicCSSVariables.textColorDark}, ${ThemeDefaultCSSVariablesValues.textColorDark})`)};                 
                     } 
                 `
         ] as CSSResultGroup;

packages/components/src/components/search-results/SearchResultsComponent.ts

@@ -21,7 +21,7 @@ import { BuiltinFilterTemplates } from "../../models/common/BuiltinTemplate";
 import { DateHelper } from "../../helpers/DateHelper";
 import { PaginationComponent } from "./sub-components/pagination/PaginationComponent";
 import { SearchInputComponent } from "../search-input/SearchInputComponent";
-import { sanitizeSummary, SearchResponseEnhancedFields, SearchResultsHelper } from "../../helpers/SearchResultsHelper";
+import { sanitizeSummary, SearchResponseEnhancedFields, SearchResultsHelper, WellKnownSearchProperties } from "../../helpers/SearchResultsHelper";
 import { ISearchVerticalEventData } from "../../models/events/ISearchVerticalEventData";
 import { SearchVerticalsComponent } from "../search-verticals/SearchVerticalsComponent";
 import { repeat } from "lit/directives/repeat.js";
@@ -40,7 +40,7 @@ import { IComponentBinding } from "../../models/common/IComponentBinding";
 import { ComponentEventType } from "../../models/events/EventType";
 import { getSvg, SvgIcon } from "@microsoft/mgt-components/dist/es6/utils/SvgHelper";
 import { trimFileExtension, getNameFromUrl } from "@microsoft/mgt-components/dist/es6/utils/Utils";
-import { SearchHit } from "@microsoft/microsoft-graph-types";
+import { ListItem, SearchHit } from "@microsoft/microsoft-graph-types";
 import { MgtFile } from "@microsoft/mgt-components/dist/es6/components/mgt-file/mgt-file";
 import { MgtPerson } from "@microsoft/mgt-components/dist/es6/components/mgt-person/mgt-person";
 
@@ -493,11 +493,26 @@ export class SearchResultsComponent extends BaseComponent {
      * @returns
      */
     private renderListItem(result: SearchHit) {
-        const resource = result.resource as SearchResource;
+        const resource = result.resource as ListItem;
+        let renderIcon = getSvg(SvgIcon.FileOuter);
+
+        if (resource.webUrl?.endsWith(".aspx")) {
+            renderIcon = getSvg(SvgIcon.News);
+        } else if (resource?.fields["driveId"] && resource?.fields["normUniqueID"]) {
+            renderIcon = html`
+                <pnp-mgt-file
+                    drive-id="${resource?.fields["driveId"]}"
+                    item-id="${resource?.fields["normUniqueID"]}"
+                    view="image"
+                >
+                </pnp-mgt-file>
+            `;
+        }        
+
         return html`
             <div class="mt-4 mb-4 ml-1 mr-1 grid gap-2 grid-cols-searchResult">
                 <div class="h-7 w-7 text-textColor">
-                    ${resource.webUrl?.endsWith(".aspx") ? getSvg(SvgIcon.News) : getSvg(SvgIcon.FileOuter)}
+                    ${renderIcon}
                 </div>
             <div>
             <div class="font-semibold mt-1 mb-1 ml-0 mr-0 dark:text-textColorDark">
@@ -912,7 +927,6 @@ export class SearchResultsComponent extends BaseComponent {
 
         return [
             css`
-
                 img:before {
                     content: ' ';
                     display: block;
@@ -925,7 +939,7 @@ export class SearchResultsComponent extends BaseComponent {
                 }
 
                 // Apply only in SharePoint canvas
-                .ControlZone  svg, svg > path {
+                .ControlZone svg, svg > path {
                     ${unsafeCSS(`fill: var(${ThemeInternalCSSVariables.textColor})`)};
                     height: 100%;
                     width: 100%;
@@ -935,7 +949,7 @@ export class SearchResultsComponent extends BaseComponent {
                     svg, svg > path {
                         ${unsafeCSS(`fill: var(${ThemeInternalCSSVariables.textColorDark})`)};
                     } 
-                }             
+                }    
             `,
             BaseComponent.themeStyles, // Allow component to use them CSS variables from design. The component is a first level component so it is OK to define them variables here
             BaseComponent.styles // Use base styles (i.e. Tailwind CSS classes)

packages/components/src/helpers/SearchResultsHelper.ts

@@ -26,7 +26,8 @@ export enum WellKnownSearchProperties {
     Summary = "summary",
     NormListID = "normlistid",
     NormUniqueID = "normuniqueid",
-    NormSiteID = "normsiteid"
+    NormSiteID = "normsiteid",
+    DriveId = "driveId"
 }
 
 export const sanitizeSummary = (summary: string) => {

packages/components/src/helpers/SearchSvgHelper.ts

@@ -54,5 +54,4 @@ export const getInternalSvg = (svgIcon: SearchSvgIcon) => {
         case SearchSvgIcon.ArrowLeft:
             return html`<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 2048 2048" focusable="false"><path d="M1443 2045L421 1024 1443 3l90 90-930 931 930 931-90 90z"></path></svg>`;
     }
-};
-
+};

packages/components/webpack.common.cjs

@@ -22,18 +22,6 @@ module.exports = {
           /node_modules/
         ]
       },
-      {
-        test: /\.ts?$/,
-        use: [                           
-          {
-            loader: "postcss-loader"
-          }          
-        ],
-        exclude: [
-          /node_modules/,
-          /tailwind-styles-css\.ts/
-        ]
-      },
       {
         test: /\.(png|jpg|jpeg|gif)$/i,
         type: "asset/resource",