Skip to content

Commit e0f42c2

Browse files
gavinbarrongavinbarron
committed
Merge branch 'next/mgt-chat' into feat/native-graph-notifications
2 parents 6cc861a + 4b84b3e commit e0f42c2

File tree

11 files changed

+104
-133
lines changed

11 files changed

+104
-133
lines changed

‎.github/workflows/pr-chat.yml‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
2+
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
3+
4+
name: Deploy mgt-chat sample app
5+
6+
on:
7+
push:
8+
branches: [next/mgt-chat]
9+
10+
jobs:
11+
react-contoso:
12+
runs-on: ubuntu-latest
13+
14+
strategy:
15+
matrix:
16+
node-version: [16.x]
17+
18+
steps:
19+
- uses: actions/checkout@v4
20+
- name: Use Node.js ${{ matrix.node-version }}
21+
uses: actions/setup-node@v3
22+
with:
23+
node-version: ${{ matrix.node-version }}
24+
registry-url: 'https://registry.npmjs.org'
25+
26+
- name: Install deps 🛠
27+
run: |
28+
echo "installing yarn"
29+
npm install -g yarn
30+
echo "installing deps for packages"
31+
yarn
32+
33+
- name: Setup env file
34+
shell: bash
35+
run: |
36+
cp samples/react-contoso/.env.sample samples/react-contoso/.env
37+
sed -i 's|REACT_APP_CLIENT_ID="00000000-0000-0000-0000-000000000000"|REACT_APP_CLIENT_ID="${{secrets.REACT_CONTOSO_CHAT}}"|g' samples/react-contoso/.env
38+
sed -i 's|REACT_APP_BACKEND_CLIENT_ID="00000000-0000-0000-0000-000000000000"|REACT_APP_BACKEND_CLIENT_ID="${{secrets.REACT_CONTOSO_CHAT_BACKEND}}"|g' samples/react-contoso/.env
39+
sed -i 's|REACT_APP_BASE_DIR="/"|REACT_APP_BASE_DIR="/next/mgt-chat"|g' samples/react-contoso/.env
40+
41+
- name: Build 🛠
42+
run: |
43+
yarn build
44+
yarn build:react-contoso
45+
46+
- name: Deploy mgt.dev/next/mgt-chat 🚀
47+
uses: JamesIves/[email protected]
48+
with:
49+
branch: gh-pages
50+
folder: samples/react-contoso/build
51+
target-folder: next/mgt-chat

‎.github/workflows/storybook.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,4 +43,5 @@ jobs:
4343
clean-exclude: |
4444
pr
4545
v3
46+
mgt-chat
4647
token: ${{ secrets.GITHUB_TOKEN }}

‎samples/react-contoso/.env.sample‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,5 @@ REACT_APP_SITE_NAME="Contoso Dashboard"
55
REACT_APP_CLIENT_ID="00000000-0000-0000-0000-000000000000"
66
REACT_APP_URL_AZURE_FUNCTION="https://contoso.azurewebsites.net"
77
REACT_APP_BACKEND_CLIENT_ID="00000000-0000-0000-0000-000000000000"
8+
REACT_APP_BASE_DIR="/"
89

‎samples/react-contoso/package.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"name": "react-contoso",
33
"version": "1.3.0",
44
"private": true,
5+
"homepage": ".",
56
"dependencies": {
67
"@fluentui/merge-styles": "^8.0.3",
78
"@fluentui/react": "^8.0.0",
@@ -22,11 +23,14 @@
2223
"eslint-config-react-app": "^7.0.1",
2324
"react": "^17.0.0",
2425
"react-dom": "^17.0.0",
25-
"react-router-dom": "^5.2.0",
26+
"react-router-dom": "^6.15.0",
2627
"react-scripts": "5.0.1",
2728
"typescript": "^4.9.5",
2829
"web-vitals": "^2.1.4"
2930
},
31+
"devDependencies": {
32+
"@babel/plugin-proposal-private-property-in-object": "^7.21.11"
33+
},
3034
"scripts": {
3135
"start": "react-scripts start",
3236
"build": "react-scripts build",

‎samples/react-contoso/public/incidents.json‎

Lines changed: 0 additions & 30 deletions
This file was deleted.

‎samples/react-contoso/src/Layout.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { HashRouter, Route, Switch } from 'react-router-dom';
2+
import { BrowserRouter, Route, Routes } from 'react-router-dom';
33
import { Header } from './components/Header';
44
import { SideNavigation } from './components/SideNavigation';
55
import { HomePage } from './pages/HomePage';
@@ -67,7 +67,7 @@ export const Layout: React.FunctionComponent = theme => {
6767
return (
6868
<FluentProvider theme={appContext.state.theme.fluentTheme}>
6969
<div className={styles.page}>
70-
<HashRouter>
70+
<BrowserRouter basename={process.env.REACT_APP_BASE_DIR ?? '/'}>
7171
<Header></Header>
7272
<div className={styles.main}>
7373
<div
@@ -79,18 +79,18 @@ export const Layout: React.FunctionComponent = theme => {
7979
<SideNavigation items={navigationItems}></SideNavigation>
8080
</div>
8181
<div className={styles.content}>
82-
<Switch>
82+
<Routes>
8383
{navigationItems.map(
8484
item =>
8585
((item.requiresLogin && isSignedIn) || !item.requiresLogin) && (
86-
<Route exact={item.exact} path={item.url} children={item.component} key={item.key} />
86+
<Route path={item.url} element={item.component} key={item.key} />
8787
)
8888
)}
89-
<Route path="*" component={HomePage} />
90-
</Switch>
89+
<Route path="*" element={<HomePage />} />
90+
</Routes>
9191
</div>
9292
</div>
93-
</HashRouter>
93+
</BrowserRouter>
9494
</div>
9595
</FluentProvider>
9696
);

‎samples/react-contoso/src/components/Header.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { PACKAGE_VERSION } from '@microsoft/mgt-element';
44
import { InfoButton } from '@fluentui/react-components/unstable';
55
import { SimpleLogin } from './SimpleLogin';
66
import { useIsSignedIn } from '../hooks/useIsSignedIn';
7-
import { useHistory } from 'react-router-dom';
7+
import { useNavigate } from 'react-router-dom';
88
import { ThemeSwitcher } from './ThemeSwitcher';
99
import { useAppContext } from '../AppContext';
1010
import { Label, makeStyles, mergeClasses, shorthands, tokens } from '@fluentui/react-components';
@@ -115,16 +115,16 @@ const HeaderComponent: React.FunctionComponent = () => {
115115
const appContext = useAppContext();
116116
const setAppContext = appContext.setState;
117117
const location = useLocation();
118-
const history = useHistory();
118+
const navigate = useNavigate();
119119

120120
const onSearchTermChanged = (e: CustomEvent) => {
121121
if (!(e.detail === '' && appContext.state.searchTerm === '*') && e.detail !== appContext.state.searchTerm) {
122122
appContext.setState({ ...appContext.state, searchTerm: e.detail === '' ? '*' : e.detail });
123123

124124
if (e.detail === '') {
125-
history.push('/search');
125+
navigate('/search');
126126
} else {
127-
history.push('/search?q=' + e.detail);
127+
navigate('/search?q=' + e.detail);
128128
}
129129
}
130130
};

‎samples/react-contoso/src/components/SideNavigation.tsx‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Tab, TabList, makeStyles, mergeClasses, tokens } from '@fluentui/react-components';
22
import * as React from 'react';
3-
import { useHistory, useLocation } from 'react-router-dom';
3+
import { useNavigate, useLocation } from 'react-router-dom';
44
import { NavigationRegular } from '@fluentui/react-icons';
55
import { useAppContext } from '../AppContext';
66
import { NavigationItem } from '../models/NavigationItem';
@@ -20,15 +20,15 @@ const useStyles = makeStyles({
2020
});
2121

2222
export const SideNavigation: React.FunctionComponent<ISideNavigationProps> = props => {
23-
const history = useHistory();
23+
const navigate = useNavigate();
2424
const location = useLocation();
2525
const { items } = props;
26-
const [selectedTab, setSelectedTab] = React.useState<any>('/');
26+
const [selectedTab, setSelectedTab] = React.useState<any>('');
2727
const [isMinimized, setIsMinimized] = React.useState<boolean>(false);
2828
const styles = useStyles();
2929
const appContext = useAppContext();
3030

31-
const navigate = (event: any, data: any) => {
31+
const performNavigation = (event: any, data: any) => {
3232
if (data.value === 'navigation') {
3333
const futureIsMinimized = !isMinimized;
3434
setIsMinimized(futureIsMinimized);
@@ -37,18 +37,17 @@ export const SideNavigation: React.FunctionComponent<ISideNavigationProps> = pro
3737
sidebar: { ...appContext.state.sidebar, isMinimized: futureIsMinimized }
3838
});
3939
} else {
40-
setSelectedTab(data.value);
41-
history.push(data.value);
40+
navigate(data.value, { relative: 'route' });
4241
}
4342
};
4443

4544
React.useLayoutEffect(() => {
46-
setSelectedTab(location.pathname);
45+
setSelectedTab(location.pathname.substring(1));
4746
}, [location]);
4847

4948
return (
5049
<>
51-
<TabList size="medium" appearance="subtle" vertical onTabSelect={navigate} selectedValue={selectedTab}>
50+
<TabList size="medium" appearance="subtle" vertical onTabSelect={performNavigation} selectedValue={selectedTab}>
5251
<Tab icon={<NavigationRegular />} value={'navigation'} className={styles.tab}></Tab>
5352
{items.map((item: NavigationItem, index) => (
5453
<Tab

‎samples/react-contoso/src/index.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ brokerSettings.appId = process.env.REACT_APP_BACKEND_CLIENT_ID!;
2121
Providers.globalProvider = new Msal2Provider({
2222
clientId: process.env.REACT_APP_CLIENT_ID!,
2323
loginType: LoginType.Redirect,
24-
redirectUri: window.location.protocol + '//' + window.location.host,
2524
scopes: [
2625
'Bookmark.Read.All',
2726
'Calendars.Read',

‎samples/react-contoso/src/services/Navigation.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export const getNavigation = (isSignedIn: boolean) => {
2121

2222
navItems.push({
2323
name: 'Home',
24-
url: '/',
24+
url: '',
2525
icon: <HomeRegular />,
2626
key: 'home',
2727
requiresLogin: false,
@@ -32,7 +32,7 @@ export const getNavigation = (isSignedIn: boolean) => {
3232
if (isSignedIn) {
3333
navItems.push({
3434
name: 'Dashboard',
35-
url: '/dashboard',
35+
url: 'dashboard',
3636
icon: <TextBulletListSquareRegular />,
3737
key: 'dashboard',
3838
requiresLogin: true,
@@ -42,7 +42,7 @@ export const getNavigation = (isSignedIn: boolean) => {
4242

4343
navItems.push({
4444
name: 'Mail and Calendar',
45-
url: '/outlook',
45+
url: 'outlook',
4646
icon: <CalendarMailRegular />,
4747
key: 'outlook',
4848
requiresLogin: true,
@@ -52,7 +52,7 @@ export const getNavigation = (isSignedIn: boolean) => {
5252

5353
navItems.push({
5454
name: 'Files',
55-
url: '/files',
55+
url: 'files',
5656
icon: <DocumentRegular />,
5757
key: 'files',
5858
requiresLogin: true,
@@ -62,7 +62,7 @@ export const getNavigation = (isSignedIn: boolean) => {
6262

6363
navItems.push({
6464
name: 'Taxonomy',
65-
url: '/taxonomy',
65+
url: 'taxonomy',
6666
icon: <TagMultipleRegular />,
6767
key: 'files',
6868
requiresLogin: true,
@@ -72,7 +72,7 @@ export const getNavigation = (isSignedIn: boolean) => {
7272

7373
navItems.push({
7474
name: 'Chat',
75-
url: '/chat',
75+
url: 'chat',
7676
icon: <ChatRegular />,
7777
key: 'chat',
7878
requiresLogin: true,
@@ -82,7 +82,7 @@ export const getNavigation = (isSignedIn: boolean) => {
8282

8383
navItems.push({
8484
name: 'Search',
85-
url: '/search',
85+
url: 'search',
8686
pattern: '/search/:query',
8787
icon: <SearchRegular />,
8888
key: 'search',

0 commit comments

Comments
 (0)