commit changes new sample

samples/react-sales-orders/.gitignore

@@ -1,34 +1,20 @@
-# Logs
+# TeamsFx files
-logs
+env/.env.*.user
-*.log
+env/.env.local
-npm-debug.log*
-
-# Dependency directories
-node_modules
-
-# Build generated files
-dist
-lib
-release
-solution
-temp
-*.sppkg
-.heft
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# OSX
 .DS_Store
+build
+appPackage/build
 
-# Visual Studio files
+# dependencies
-.ntvs_analysis.dat
+/node_modules
-.vs
-bin
-obj
 
-# Resx Generated Code
+# testing
-*.resx.ts
+/coverage
 
-# Styles Generated Code
+# production
-*.scss.ts
+/build
+
+# misc
+.DS_Store
+.env
+.deployment

samples/react-sales-orders/appPackage/manifest.json

@@ -0,0 +1,63 @@
+{
+    "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.16/MicrosoftTeams.schema.json",
+    "manifestVersion": "1.16",
+    "packageName": "com.microsoft.teams.extension",
+    "id": "${{TEAMS_APP_ID}}",
+    "version": "1.0.0",
+    "developer": {
+        "name": "SPFx + Teams Dev",
+        "websiteUrl": "https://products.office.com/en-us/sharepoint/collaboration",
+        "privacyUrl": "https://privacy.microsoft.com/en-us/privacystatement",
+        "termsOfUseUrl": "https://www.microsoft.com/en-us/servicesagreement"
+    },
+    "name": {
+        "short": "salesorders-${{TEAMSFX_ENV}}",
+        "full": "Full name for salesorders"
+    },
+    "description": {
+        "short": "Short description of salesorders",
+        "full": "Full description of salesorders"
+    },
+    "icons": {
+        "color": "color.png",
+        "outline": "outline.png"
+    },
+    "accentColor": "#004578",
+    "staticTabs": [
+        {
+            "entityId": "750d6853-1282-450a-b080-37aef954d745",
+            "name": "salesorders",
+            "contentUrl": "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26personal%26componentId=750d6853-1282-450a-b080-37aef954d745%26forceLocale={locale}",
+            "websiteUrl": "https://products.office.com/en-us/sharepoint/collaboration",
+            "scopes": [
+                "personal"
+            ]
+        }
+    ],
+    "configurableTabs": [
+        {
+            "configurationUrl": "https://{teamSiteDomain}{teamSitePath}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest={teamSitePath}/_layouts/15/teamshostedapp.aspx%3FopenPropertyPane=true%26teams%26componentId=750d6853-1282-450a-b080-37aef954d745%26forceLocale={locale}",
+            "canUpdateConfiguration": true,
+            "scopes": [
+                "team"
+            ]
+        }
+    ],
+    "permissions": [
+        "identity",
+        "messageTeamMembers"
+    ],
+    "validDomains": [
+        "*.login.microsoftonline.com",
+        "*.sharepoint.com",
+        "*.sharepoint-df.com",
+        "spoppe-a.akamaihd.net",
+        "spoprod-a.akamaihd.net",
+        "resourceseng.blob.core.windows.net",
+        "msft.spoppe.com"
+    ],
+    "webApplicationInfo": {
+        "resource": "https://{teamSiteDomain}",
+        "id": "00000003-0000-0ff1-ce00-000000000000"
+    }
+}

samples/react-sales-orders/appPackage/manifest.local.json

@@ -0,0 +1,63 @@
+{
+    "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.16/MicrosoftTeams.schema.json",
+    "manifestVersion": "1.16",
+    "packageName": "com.microsoft.teams.extension",
+    "id": "${{TEAMS_APP_ID}}",
+    "version": "1.0.0",
+    "developer": {
+        "name": "SPFx + Teams Dev",
+        "websiteUrl": "https://products.office.com/en-us/sharepoint/collaboration",
+        "privacyUrl": "https://privacy.microsoft.com/en-us/privacystatement",
+        "termsOfUseUrl": "https://www.microsoft.com/en-us/servicesagreement"
+    },
+    "name": {
+        "short": "salesorders-${{TEAMSFX_ENV}}",
+        "full": "Full name for salesorders"
+    },
+    "description": {
+        "short": "Short description of salesorders",
+        "full": "Full description of salesorders"
+    },
+    "icons": {
+        "color": "color.png",
+        "outline": "outline.png"
+    },
+    "accentColor": "#004578",
+    "staticTabs": [
+        {
+            "entityId": "750d6853-1282-450a-b080-37aef954d745",
+            "name": "salesorders",
+            "contentUrl": "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest={teamSitePath}/_layouts/15/TeamsWorkBench.aspx%3FcomponentId=750d6853-1282-450a-b080-37aef954d745%26teams%26personal%26forceLocale={locale}%26loadSPFX%3Dtrue%26debugManifestsFile%3Dhttps%3A%2F%2Flocalhost%3A4321%2Ftemp%2Fmanifests.js",
+            "websiteUrl": "https://products.office.com/en-us/sharepoint/collaboration",
+            "scopes": [
+                "personal"
+            ]
+        }
+    ],
+    "configurableTabs": [
+        {
+            "configurationUrl": "https://{teamSiteDomain}{teamSitePath}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest={teamSitePath}/_layouts/15/TeamsWorkBench.aspx%3FcomponentId=750d6853-1282-450a-b080-37aef954d745%26openPropertyPane=true%26teams%26forceLocale={locale}%26loadSPFX%3Dtrue%26debugManifestsFile%3Dhttps%3A%2F%2Flocalhost%3A4321%2Ftemp%2Fmanifests.js",
+            "canUpdateConfiguration": true,
+            "scopes": [
+                "team"
+            ]
+        }
+    ],
+    "permissions": [
+        "identity",
+        "messageTeamMembers"
+    ],
+    "validDomains": [
+        "*.login.microsoftonline.com",
+        "*.sharepoint.com",
+        "*.sharepoint-df.com",
+        "spoppe-a.akamaihd.net",
+        "spoprod-a.akamaihd.net",
+        "resourceseng.blob.core.windows.net",
+        "msft.spoppe.com"
+    ],
+    "webApplicationInfo": {
+        "resource": "https://{teamSiteDomain}",
+        "id": "00000003-0000-0ff1-ce00-000000000000"
+    }
+}

samples/react-sales-orders/env/.env.dev

@@ -0,0 +1,7 @@
+# Built-in environment variables
+TEAMSFX_ENV=dev
+
+# Generated during provision, you can also add your own variables.
+TEAMS_APP_ID=
+
+# Secrets. Keys prefixed with `SECRET_` will be masked in Teams Toolkit logs.

samples/react-sales-orders/package.json

@@ -1,48 +1,17 @@
 {
-  "name": "salesorders",
+    "name": "teamsfx-template-spfx-tab",
-  "version": "0.0.1",
+    "version": "0.0.1",
-  "private": true,
+    "description": "",
-  "engines": {
+    "engines": {
-    "node": ">=16.13.0 <17.0.0 || >=18.17.1 <19.0.0"
+        "node": "16"
-  },
+    },
-  "main": "lib/index.js",
+    "author": "",
-  "scripts": {
+    "scripts": {
-    "build": "gulp bundle",
+        "test": "echo \"Error: no test specified\" && exit 1"
-    "clean": "gulp clean",
+    },
-    "test": "gulp test"
+    "devDependencies": {
-  },
+        "@microsoft/teamsfx-cli": "1.*"
-  "dependencies": {
+    },
-    "@fluentui/react": "^8.106.4",
+    "license": "MIT"
-    "@fluentui/react-components": "^9.37.3",
+    
-    "@fluentui/react-search-preview": "^0.1.30",
-    "@iconify/react": "^4.1.1",
-    "@microsoft/microsoft-graph-types": "^2.38.0",
-    "@microsoft/sp-component-base": "1.18.0",
-    "@microsoft/sp-core-library": "1.18.0",
-    "@microsoft/sp-lodash-subset": "1.18.0",
-    "@microsoft/sp-office-ui-fabric-core": "1.18.0",
-    "@microsoft/sp-property-pane": "1.18.0",
-    "@microsoft/sp-webpart-base": "1.18.0",
-    "date-fns": "^2.30.0",
-    "jotai": "^2.5.0",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
-    "tslib": "2.3.1"
-  },
-  "devDependencies": {
-    "@microsoft/eslint-config-spfx": "1.18.0",
-    "@microsoft/eslint-plugin-spfx": "1.18.0",
-    "@microsoft/rush-stack-compiler-4.7": "0.1.0",
-    "@microsoft/sp-build-web": "1.18.0",
-    "@microsoft/sp-module-interfaces": "1.18.0",
-    "@rushstack/eslint-config": "2.5.1",
-    "@types/react": "17.0.45",
-    "@types/react-dom": "17.0.17",
-    "@types/webpack-env": "~1.15.2",
-    "ajv": "^6.12.5",
-    "eslint": "8.7.0",
-    "eslint-plugin-react-hooks": "4.3.0",
-    "gulp": "4.0.2",
-    "typescript": "4.7.4"
-  }
 }

samples/react-sales-orders/src/.gitignore

@@ -0,0 +1,34 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Dependency directories
+node_modules
+
+# Build generated files
+dist
+lib
+release
+solution
+temp
+*.sppkg
+.heft
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# OSX
+.DS_Store
+
+# Visual Studio files
+.ntvs_analysis.dat
+.vs
+bin
+obj
+
+# Resx Generated Code
+*.resx.ts
+
+# Styles Generated Code
+*.scss.ts

samples/react-sales-orders/src/README.md

@@ -5,7 +5,8 @@
  This Sample show how to use Microsoft Graph Connector that use DB2 Database and display Sales Orders in a list.
 
 ![react-sales-orders](./src/assets/salesOrders.gif)
-![react-sales-orders](./src/assets/salesOrders01.png)
+![react-sales-orders](./src/assets/teams01.png)
+![react-sales-orders](./src/assets/salesOrders02.png)
  
 
 ## Compatibility

samples/react-sales-orders/src/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "salesorders",
+  "version": "0.0.1",
+  "private": true,
+  "engines": {
+    "node": ">=16.13.0 <17.0.0 || >=18.17.1 <19.0.0"
+  },
+  "main": "lib/index.js",
+  "scripts": {
+    "build": "gulp bundle",
+    "clean": "gulp clean",
+    "test": "gulp test"
+  },
+  "dependencies": {
+    "@fluentui/react": "^8.106.4",
+    "@fluentui/react-components": "^9.37.3",
+    "@fluentui/react-search-preview": "^0.1.30",
+    "@iconify/react": "^4.1.1",
+    "@microsoft/microsoft-graph-types": "^2.38.0",
+    "@microsoft/sp-component-base": "1.18.0",
+    "@microsoft/sp-core-library": "1.18.0",
+    "@microsoft/sp-lodash-subset": "1.18.0",
+    "@microsoft/sp-office-ui-fabric-core": "1.18.0",
+    "@microsoft/sp-property-pane": "1.18.0",
+    "@microsoft/sp-webpart-base": "1.18.0",
+    "date-fns": "^2.30.0",
+    "jotai": "^2.5.0",
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
+    "tslib": "2.3.1"
+  },
+  "devDependencies": {
+    "@microsoft/eslint-config-spfx": "1.18.0",
+    "@microsoft/eslint-plugin-spfx": "1.18.0",
+    "@microsoft/rush-stack-compiler-4.7": "0.1.0",
+    "@microsoft/sp-build-web": "1.18.0",
+    "@microsoft/sp-module-interfaces": "1.18.0",
+    "@rushstack/eslint-config": "2.5.1",
+    "@types/react": "17.0.45",
+    "@types/react-dom": "17.0.17",
+    "@types/webpack-env": "~1.15.2",
+    "ajv": "^6.12.5",
+    "eslint": "8.7.0",
+    "eslint-plugin-react-hooks": "4.3.0",
+    "gulp": "4.0.2",
+    "typescript": "4.7.4"
+  }
+}

samples/react-sales-orders/src/src/components/SalesordersControls.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-debugger */
 /* eslint-disable @typescript-eslint/no-floating-promises */
 import * as React from 'react';
 
@@ -34,7 +35,7 @@ import { useSalesordersStyles } from './useSalesordersStyles';
 export const SalesordersControl: React.FunctionComponent<ISalesordersProps> = (
   props: React.PropsWithChildren<ISalesordersProps>
 ) => {
-  const { context } = props;
+  const { context, hasTeamsContext } = props;
   const [appglobalState, setAppglobalState] = useAtom(appGlobalStateAtom);
   const styles = useSalesordersStyles();
   const divContainer = React.useRef<HTMLDivElement>(null);
@@ -51,11 +52,13 @@ export const SalesordersControl: React.FunctionComponent<ISalesordersProps> = (
   const [customers, setCustomers] = React.useState<ICustomer[]>([]);
   const [error, setError] = React.useState<Error>((undefined as unknown) as Error);
   
+ 
   React.useEffect(() => {
     setAppglobalState({ ...appglobalState, ...props });
     // bug,gridtemplateareas is not reconized as CSS property
     if (divContainer.current) {
-      divContainer.current.setAttribute("style", "grid-template-areas: 'left right right right';");
+      const height = !hasTeamsContext ? "calc(100vh - 147px)" : "100vh";
+      divContainer.current.setAttribute("style", `grid-template-areas: 'left right right right'; height:   ${height}`);
     }
     setIsLoading(true);
   }, [props]);
@@ -74,6 +77,7 @@ export const SalesordersControl: React.FunctionComponent<ISalesordersProps> = (
             break;
         }
       } catch (error) {
+      debugger;
         setError(error);
       } finally {
         setIsLoading(false);
@@ -83,7 +87,7 @@ export const SalesordersControl: React.FunctionComponent<ISalesordersProps> = (
       setOrders(orders ); */
       /* setIsLoading(false); */
     })();
-  }, [searchText, selectedItem]);
+  }, [searchText, selectedItem, props, searchOrders, getCustomers]);
 
   const totalOrders = React.useMemo(() => {
     return orders.length;
@@ -167,8 +171,8 @@ export const SalesordersControl: React.FunctionComponent<ISalesordersProps> = (
 
   return (
     <>
-      <main className={styles.mainContainer}>
+      <main className={styles.mainContainer} style={{ height: !hasTeamsContext ? "calc(100vh - 147px)" : "100vh"}}>
-        <div className={styles.contentContainer} ref={divContainer}>
+        <div className={styles.contentContainer}   ref={divContainer}>
           <Left>
             <CompanyInfo />
             <Menu currentItem={selectedItem as IMenuItem} onItemClick={(item) => setSelectedItem(item)} />
@@ -194,13 +198,6 @@ export const SalesordersControl: React.FunctionComponent<ISalesordersProps> = (
               />
             </div>
             <RenderRightContent />
-            {/*  {isLoading ? (
-              <div style={{ paddingTop: 60 }}>
-                <Spinner />
-              </div>
-            ) : (
-              <>{!hasOrders ? <NoOrders /> : renderSelectedContent()}</>
-            )} */}
           </Right>
         </div>
       </main>

samples/react-sales-orders/src/src/components/customersGrid/CustomersGrid.tsx

@@ -1,6 +1,8 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 import * as React from 'react';
 
+import { useAtomValue } from 'jotai';
+
 import {
   Avatar,
   Badge,
@@ -18,7 +20,9 @@ import {
   tokens,
 } from '@fluentui/react-components';
 
+import { appGlobalStateAtom } from '../../atoms/appGlobalStateAtom';
 import { ICustomer } from '../../models/ICustomer';
+import { useCustomerGridStyles } from './useCustomerGridStyles';
 
 const columns: TableColumnDefinition<ICustomer>[] = [
   createTableColumn<ICustomer>({
@@ -220,17 +224,22 @@ export const CustomersGrid: React.FunctionComponent<ICustomersGridProps> = (
   props: React.PropsWithChildren<ICustomersGridProps>
 ) => {
   const { items } = props;
+   const appGlobalState = useAtomValue(appGlobalStateAtom);
+   const {hasTeamsContext } = appGlobalState;
   const [sortState, setSortState] = React.useState<Parameters<NonNullable<DataGridProps["onSortChange"]>>[1]>({
     sortColumn: "customer",
     sortDirection: "ascending",
   });
 
+
   const onSortChange = React.useCallback((e, nextSortState) => {
     setSortState(nextSortState);
   }, []);
 
+  const styles = useCustomerGridStyles();
+
   return (
-    <div style={{ paddingTop: 30 }}>
+    <div className={styles.gridContainer} style={{height: !hasTeamsContext ? 'calc(100vh - 397px': 'calc(100vh - 240px' }}>
       <DataGrid
         items={items}
         columns={columns}
@@ -257,3 +266,5 @@ export const CustomersGrid: React.FunctionComponent<ICustomersGridProps> = (
     </div>
   );
 };
+ 
+

samples/react-sales-orders/src/src/components/customersGrid/useCustomerGridStyles.ts

@@ -6,30 +6,27 @@ import {
 
 export const useCustomerGridStyles = makeStyles({
   
-    root: {
+  gridContainer: {
-      /*  backgroundColor: tokens.colorNeutralBackground2, */
+    paddingTop: "30px",
-      display: "flex",
+    width: "100%",
-      flexDirection: "column",
+    height:  'calc(100vh - 240px)',
-      justifyContent: "flex-start",
+    backgroundColor: tokens.colorNeutralBackground2,
-      fontFamily: `${tokens.fontFamilyBase} !important`,
+    overflowY: "auto",
-      ...shorthands.flex("1"),
+    overflowX: "hidden",
-      ...shorthands.padding("20px"),
+    "scrollbar-color":  tokens.colorNeutralBackground1,
-      ...shorthands.gap("20px"),
+    "scrollbar-width": "thin",
-      minWidth: "380px",
+    "::-webkit-scrollbar-thumb": {
+      backgroundColor: tokens?.colorBrandStroke2,
+      ...shorthands.borderRadius("10px"),
+      ...shorthands.borderWidth("1px"),
     },
+    "::-webkit-scrollbar": {
+      height: "10px",
+      width: "7px",
+    },
+  },
 
-    wrapper: {
-      ...shorthands.padding("10px"),
-    },
-    gradientOverlay: {
-      position: "absolute",
-      top: "0",
-      left: "0",
-      width: "100%",
-      height: "100%",
  
-      ...shorthands.borderRadius("8px"),
-    },
     titleStyles: {
       paddingLeft: "20px",
       paddingRight: "20px",

samples/react-sales-orders/src/src/components/ordersGrid/OrdersGrid.tsx

@@ -1,6 +1,8 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 import * as React from 'react';
 
+import { useAtomValue } from 'jotai';
+
 import {
   Avatar,
   Badge,
@@ -18,6 +20,7 @@ import {
   tokens,
 } from '@fluentui/react-components';
 
+import { appGlobalStateAtom } from '../../atoms/appGlobalStateAtom';
 import { IOrder } from '../../models/IOrder';
 import { useOrdersGridStyles } from './useOrdersGridStyles';
 
@@ -176,9 +179,9 @@ const columnSizingOptions = {
     idealWidth: 120,
   },
   status: {
-    defaultWidth: 180,
+    defaultWidth: 120,
     minWidth: 120,
-    idealWidth: 180,
+    idealWidth: 120,
   },
 };
 
@@ -190,6 +193,8 @@ export const OrdersGrid: React.FunctionComponent<IOrdersGridProps> = (
   props: React.PropsWithChildren<IOrdersGridProps>
 ) => {
   const { items } = props;
+  const appGlobalState = useAtomValue(appGlobalStateAtom);
+   const {hasTeamsContext } = appGlobalState;
   const [sortState, setSortState] = React.useState<Parameters<NonNullable<DataGridProps["onSortChange"]>>[1]>({
     sortColumn: "customer",
     sortDirection: "ascending",
@@ -201,7 +206,7 @@ export const OrdersGrid: React.FunctionComponent<IOrdersGridProps> = (
   const styles = useOrdersGridStyles();
 
   return (
-    <div  className={styles.gridContainer}>
+      <div className={styles.gridContainer} style={{height: !hasTeamsContext ? 'calc(100vh - 420px': 'calc(100vh - 240px' }}>
       <DataGrid
         items={items}
         columns={columns}
@@ -224,6 +229,6 @@ export const OrdersGrid: React.FunctionComponent<IOrdersGridProps> = (
           )}
         </DataGridBody>
       </DataGrid>
-    </div>
+      </div>
   );
 };

samples/react-sales-orders/src/src/components/ordersGrid/useOrdersGridStyles.ts

@@ -8,7 +8,7 @@ export const useOrdersGridStyles = makeStyles({
   gridContainer: {
     paddingTop: "30px",
     width: "100%",
-    height:  'calc(100vh - 440px)',
+    height:  'calc(100vh - 240px)',
     backgroundColor: tokens.colorNeutralBackground2,
     overflowY: "auto",
     overflowX: "hidden",

samples/react-sales-orders/src/src/components/useSalesordersStyles.ts

@@ -7,16 +7,18 @@ import {
 export const useSalesordersStyles = makeStyles({
   mainContainer: {
     width: "100%",
-    height:  'calc(100vh - 200px)',
+    height: "100vh",
-    backgroundColor: tokens.colorNeutralBackground2,
  
+    backgroundColor: tokens.colorNeutralBackground2,
+    overflowY: "auto",
+    overflowX: "hidden",
   },
 
   contentContainer: {
    display: "grid",
     gridTemplateColumns: "min(100%, 300px) 1fr 1fr 1fr",
     gridTemplateRows: "1fr",
-    height:  'calc(100vh - 200px)',
+    height: "100vh",
   },
 
   leftContainer : {

samples/react-sales-orders/src/teams/manifest.json

@@ -0,0 +1,56 @@
+{
+  "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.14/MicrosoftTeams.schema.json",
+  "manifestVersion": "1.14",
+  "packageName": "Sales Orders",
+  "id": "750d6853-1282-450a-b080-37aef954d745",
+  "version": "1.0.0.0",
+  "developer": {
+    "name": "SPFx + Teams Dev",
+    "websiteUrl": "https://products.office.com/en-us/sharepoint/collaboration",
+    "privacyUrl": "https://privacy.microsoft.com/en-us/privacystatement",
+    "termsOfUseUrl": "https://www.microsoft.com/en-us/servicesagreement"
+  },
+  "name": {
+    "short": "Sales Orders"
+  },
+  "description": {
+    "short": "Sales Orders",
+    "full": "Sales Orders"
+  },
+  "icons": {
+    "outline": "750d6853-1282-450a-b080-37aef954d745_outline.png",
+    "color": "750d6853-1282-450a-b080-37aef954d745_color.png"
+  },
+  "accentColor": "#004578",
+    "configurableTabs": [
+    {
+      "configurationUrl": "https://{teamSiteDomain}{teamSitePath}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest={teamSitePath}/_layouts/15/teamshostedapp.aspx%3FopenPropertyPane=true%26teams%26componentId=750d6853-1282-450a-b080-37aef954d745%26forceLocale={locale}",
+      "canUpdateConfiguration": true,
+      "scopes": [
+        "team"
+      ]
+    }
+  ],
+    "staticTabs": [
+    {
+      "entityId": "750d6853-1282-450a-b080-37aef954d745",
+      "name": "Sales Orders",
+      "contentUrl": "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26personal%26componentId=750d6853-1282-450a-b080-37aef954d745%26forceLocale={locale}",
+      "websiteUrl": "https://products.office.com/en-us/sharepoint/collaboration",
+      "scopes": ["personal"]
+    }
+  ],
+  "validDomains": [
+    "*.login.microsoftonline.com",
+    "*.sharepoint.com",
+    "*.sharepoint-df.com",
+    "spoppe-a.akamaihd.net",
+    "spoprod-a.akamaihd.net",
+    "resourceseng.blob.core.windows.net",
+    "msft.spoppe.com"
+  ],
+  "webApplicationInfo": {
+    "resource": "https://{teamSiteDomain}",
+    "id": "00000003-0000-0ff1-ce00-000000000000"
+  }
+}

samples/react-sales-orders/teamsapp.local.yml

@@ -0,0 +1,60 @@
+# yaml-language-server: $schema=https://aka.ms/teams-toolkit/1.0.0/yaml.schema.json
+# Visit https://aka.ms/teamsfx-v5.0-guide for details on this file
+# Visit https://aka.ms/teamsfx-actions for details on actions
+version: 1.0.0
+
+provision:
+  # Creates a Teams app
+  - uses: teamsApp/create
+    with:
+      # Teams app name
+      name: salesorders-${{TEAMSFX_ENV}}
+    # Write the information of created resources into environment file for
+    # the specified environment variable(s).
+    writeToEnvironmentFile:
+      teamsAppId: TEAMS_APP_ID
+
+  # Validate using manifest schema
+  - uses: teamsApp/validateManifest
+    with:
+      # Path to manifest template
+      manifestPath: ./appPackage/manifest.local.json
+  # Build Teams app package with latest env value
+  - uses: teamsApp/zipAppPackage
+    with:
+      # Path to manifest template
+      manifestPath: ./appPackage/manifest.local.json
+      outputZipPath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+      outputJsonPath: ./appPackage/build/manifest.${{TEAMSFX_ENV}}.json
+  # Validate app package using validation rules
+  - uses: teamsApp/validateAppPackage
+    with:
+      # Relative path to this file. This is the path for built zip file.
+      appPackagePath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+
+  # Apply the Teams app manifest to an existing Teams app in
+  # Teams Developer Portal.
+  # Will use the app id in manifest file to determine which Teams app to update.
+  - uses: teamsApp/update
+    with:
+      # Relative path to this file. This is the path for built zip file.
+      appPackagePath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+
+  # Extend your Teams app to Outlook and the Microsoft 365 app
+  - uses: teamsApp/extendToM365
+    with:
+      # Relative path to the build app package.
+      appPackagePath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+    # Write the information of created resources into environment file for
+    # the specified environment variable(s).
+    writeToEnvironmentFile:
+      titleId: M365_TITLE_ID
+      appId: M365_APP_ID
+
+deploy:
+  # Run npm command
+  - uses: cli/runNpmCommand
+    name: install dependencies
+    with:
+      workingDirectory: src
+      args: install --no-audit

samples/react-sales-orders/teamsapp.yml

@@ -0,0 +1,116 @@
+# yaml-language-server: $schema=https://aka.ms/teams-toolkit/1.0.0/yaml.schema.json
+# Visit https://aka.ms/teamsfx-v5.0-guide for details on this file
+# Visit https://aka.ms/teamsfx-actions for details on actions
+version: 1.0.0
+
+environmentFolderPath: ./env
+
+# Triggered when 'teamsfx deploy' is executed
+deploy:
+  # Run npm command
+  - uses: cli/runNpmCommand
+    name: install dependencies
+    with:
+      workingDirectory: src
+      args: install
+  - uses: cli/runNpxCommand
+    with:
+      workingDirectory: src
+      args: gulp bundle --ship --no-color
+  - uses: cli/runNpxCommand
+    with:
+      workingDirectory: src
+      args: gulp package-solution --ship --no-color
+  - uses: spfx/deploy
+    with:
+      createAppCatalogIfNotExist: false
+      packageSolutionPath: ./src/config/package-solution.json
+
+# Triggered when 'teamsfx provision' is executed
+provision:
+  # Creates a Teams app
+  - uses: teamsApp/create
+    with:
+      # Teams app name
+      name: salesorders-${{TEAMSFX_ENV}}
+    # Write the information of created resources into environment file for
+    # the specified environment variable(s).
+    writeToEnvironmentFile:
+      teamsAppId: TEAMS_APP_ID
+
+  # Validate using manifest schema
+  - uses: teamsApp/validateManifest
+    with:
+      # Path to manifest template
+      manifestPath: ./appPackage/manifest.json
+  # Build Teams app package with latest env value
+  - uses: teamsApp/zipAppPackage
+    with:
+      # Path to manifest template
+      manifestPath: ./appPackage/manifest.json
+      outputZipPath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+      outputJsonPath: ./appPackage/build/manifest.${{TEAMSFX_ENV}}.json
+  # Validate app package using validation rules
+  - uses: teamsApp/validateAppPackage
+    with:
+      # Relative path to this file. This is the path for built zip file.
+      appPackagePath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+  # Apply the Teams app manifest to an existing Teams app in
+  # Teams Developer Portal.
+  # Will use the app id in manifest file to determine which Teams app to update.
+  - uses: teamsApp/update
+    with:
+      # Relative path to this file. This is the path for built zip file.
+      appPackagePath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+  # Extend your Teams app to Outlook and the Microsoft 365 app
+  - uses: teamsApp/extendToM365
+    with:
+      # Relative path to the build app package.
+      appPackagePath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+    # Write the information of created resources into environment file for
+    # the specified environment variable(s).
+    writeToEnvironmentFile:
+      titleId: M365_TITLE_ID
+      appId: M365_APP_ID
+
+# Triggered when 'teamsfx publish' is executed
+publish:
+  # Validate using manifest schema
+  - uses: teamsApp/validateManifest
+    with:
+      # Path to manifest template
+      manifestPath: ./appPackage/manifest.json
+  # Build Teams app package with latest env value
+  - uses: teamsApp/zipAppPackage
+    with:
+      # Path to manifest template
+      manifestPath: ./appPackage/manifest.json
+      outputZipPath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+      outputJsonPath: ./appPackage/build/manifest.${{TEAMSFX_ENV}}.json
+  - uses: teamsApp/copyAppPackageToSPFx
+    with:
+      appPackagePath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+      spfxFolder: ./src
+  # Validate app package using validation rules
+  - uses: teamsApp/validateAppPackage
+    with:
+      # Relative path to this file. This is the path for built zip file.
+      appPackagePath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+  # Apply the Teams app manifest to an existing Teams app in
+  # Teams Developer Portal.
+  # Will use the app id in manifest file to determine which Teams app to update.
+  - uses: teamsApp/update
+    with:
+      # Relative path to this file. This is the path for built zip file.
+      appPackagePath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+  # Publish the app to
+  # Teams Admin Center (https://admin.teams.microsoft.com/policies/manage-apps)
+  # for review and approval
+  - uses: teamsApp/publishAppPackage
+    with:
+      appPackagePath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+    # Write the information of created resources into environment file for
+    # the specified environment variable(s).
+    writeToEnvironmentFile:
+      publishedAppId: TEAMS_APP_PUBLISHED_APP_ID
+projectId: 02e1503f-0d66-4418-9b60-bdffce05db24