Fixed lints, updated readme, sample.json, added devcontainer
This commit is contained in:
Hugo Bernier
GitHub
parent
550cb52216
commit
c6ec0dfa17
|
|
@ -0,0 +1,39 @@
|
|||
// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer
|
||||
{
|
||||
"name": "SPFx 1.16.1",
|
||||
"image": "docker.io/m365pnp/spfx:1.16.1",
|
||||
// Set *default* container specific settings.json values on container create.
|
||||
"settings": {},
|
||||
// Add the IDs of extensions you want installed when the container is created.
|
||||
"extensions": [
|
||||
"editorconfig.editorconfig",
|
||||
"dbaeumer.vscode-eslint"
|
||||
],
|
||||
// Use 'forwardPorts' to make a list of ports inside the container available locally.
|
||||
"forwardPorts": [
|
||||
4321,
|
||||
35729
|
||||
],
|
||||
"portsAttributes": {
|
||||
"4321": {
|
||||
"protocol": "https",
|
||||
"label": "Manifest",
|
||||
"onAutoForward": "silent",
|
||||
"requireLocalPort": true
|
||||
},
|
||||
// Not needed for SPFx>= 1.12.1
|
||||
// "5432": {
|
||||
// "protocol": "https",
|
||||
// "label": "Workbench",
|
||||
// "onAutoForward": "silent"
|
||||
// },
|
||||
"35729": {
|
||||
"protocol": "https",
|
||||
"label": "LiveReload",
|
||||
"onAutoForward": "silent",
|
||||
"requireLocalPort": true
|
||||
}
|
||||
},
|
||||
"postCreateCommand": "bash .devcontainer/spfx-startup.sh",
|
||||
"remoteUser": "node"
|
||||
}
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
echo
|
||||
echo -e "\e[1;94mInstalling Node dependencies\e[0m"
|
||||
npm install
|
||||
|
||||
## commands to create dev certificate and copy it to the root folder of the project
|
||||
echo
|
||||
echo -e "\e[1;94mGenerating dev certificate\e[0m"
|
||||
gulp trust-dev-cert
|
||||
|
||||
# Convert the generated PEM certificate to a CER certificate
|
||||
openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer
|
||||
|
||||
# Copy the PEM ecrtificate for non-Windows hosts
|
||||
cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem
|
||||
|
||||
## add *.cer to .gitignore to prevent certificates from being saved in repo
|
||||
if ! grep -Fxq '*.cer' ./.gitignore
|
||||
then
|
||||
echo "# .CER Certificates" >> .gitignore
|
||||
echo "*.cer" >> .gitignore
|
||||
fi
|
||||
|
||||
## add *.pem to .gitignore to prevent certificates from being saved in repo
|
||||
if ! grep -Fxq '*.pem' ./.gitignore
|
||||
then
|
||||
echo "# .PEM Certificates" >> .gitignore
|
||||
echo "*.pem" >> .gitignore
|
||||
fi
|
||||
|
||||
echo
|
||||
echo -e "\e[1;92mReady!\e[0m"
|
||||
|
||||
echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********"
|
||||
|
|
@ -2,15 +2,13 @@
|
|||
|
||||
## Summary
|
||||
|
||||
This sample webpart shows list of Azure apps in your tenant. A new Azure application can also be registered and can be edited using this webpart.
|
||||
This sample web part shows list of Azure apps in your tenant. A new Azure application can also be registered and can be edited using this web part.
|
||||
|
||||
**Add Azure App**
|
||||
|
||||
|
||||
|
||||
|
||||
**Edit Azure App**
|
||||
|
||||
|
||||
|
||||
|
||||
## Compatibility
|
||||
|
||||
|
|
@ -31,11 +29,11 @@ This sample webpart shows list of Azure apps in your tenant. A new Azure applica
|
|||
## Applies to
|
||||
|
||||
- [SharePoint Framework](https://aka.ms/spfx)
|
||||
- [Microsoft 365 tenant](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
|
||||
- [Microsoft 365 tenant](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
|
||||
|
||||
## Contributors
|
||||
## Contributors
|
||||
|
||||
[Diksha Bhura](https://github.com/Diksha-Bhura)
|
||||
- [Diksha Bhura](https://github.com/Diksha-Bhura)
|
||||
|
||||
## Version history
|
||||
|
||||
|
|
@ -56,17 +54,26 @@ This sample webpart shows list of Azure apps in your tenant. A new Azure applica
|
|||
- In the command-line run:
|
||||
- `gulp serve --nobrowser`
|
||||
|
||||
> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions.
|
||||
> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit <https://aka.ms/spfx-devcontainer> for further instructions.
|
||||
|
||||
## Help
|
||||
|
||||
We do not support samples, but we this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for community members to volunteer their time and help resolve issues.
|
||||
We do not support samples, but this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for community members to volunteer their time and help resolve issues.
|
||||
|
||||
If you're having issues building the solution, please run [spfx doctor](https://pnp.github.io/cli-microsoft365/cmd/spfx/spfx-doctor/) from within the solution folder to diagnose incompatibility issues with your environment.
|
||||
|
||||
You can try looking at [issues related to this sample](https://github.com/pnp/sp-dev-fx-webparts/issues?q=label%3A%22sample%3A%20react-graph-azureapps%22) to see if anybody else is having the same issues.
|
||||
|
||||
You can also try looking at [discussions related to this sample](https://github.com/pnp/sp-dev-fx-webparts/discussions?discussions_q=react-graph-azureapps) and see what the community is saying.
|
||||
|
||||
If you encounter any issues using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected%2Csample%3A%20react-graph-azureapps&template=bug-report.yml&sample=react-graph-azureapps&authors=@Diksha-Bhura&title=react-graph-azureapps%20-%20).
|
||||
|
||||
For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Aquestion%2Csample%3A%20react-graph-azureapps&template=question.yml&sample=react-graph-azureapps&authors=@Diksha-Bhura&title=react-graph-azureapps%20-%20).
|
||||
|
||||
Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Aenhancement%2Csample%3A%20react-graph-azureapps&template=suggestion.yml&sample=react-graph-azureapps&authors=@Diksha-Bhura&title=react-graph-azureapps%20-%20).
|
||||
|
||||
## Disclaimer
|
||||
|
||||
**THIS CODE IS PROVIDED _AS IS_ WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
|
||||
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
|
||||
|
||||
<img src="https://m365-visitor-stats.azurewebsites.net/sp-dev-fx-webparts/samples/react-graph-azureapps" />
|
||||
|
|
|
|||
|
|
@ -0,0 +1,56 @@
|
|||
[
|
||||
{
|
||||
"name": "pnp-sp-dev-spfx-web-parts-react-graph-azureapps",
|
||||
"source": "pnp",
|
||||
"title": "Azure Apps",
|
||||
"shortDescription": "This sample web part shows list of Azure apps in your tenant. A new Azure application can also be registered and can be edited using this web part.",
|
||||
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-azureapps",
|
||||
"downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-azureapps",
|
||||
"longDescription": [
|
||||
"This sample web part shows list of Azure apps in your tenant. A new Azure application can also be registered and can be edited using this web part."
|
||||
],
|
||||
"creationDateTime": "2023-05-07",
|
||||
"updateDateTime": "2023-05-07",
|
||||
"products": [
|
||||
"SharePoint"
|
||||
],
|
||||
"metadata": [
|
||||
{
|
||||
"key": "CLIENT-SIDE-DEV",
|
||||
"value": "React"
|
||||
},
|
||||
{
|
||||
"key": "SPFX-VERSION",
|
||||
"value": "1.16.1"
|
||||
}
|
||||
],
|
||||
"thumbnails": [
|
||||
{
|
||||
"type": "image",
|
||||
"order": 100,
|
||||
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-graph-azureapps/assets/Add-New-App.gif",
|
||||
"alt": "Web Part Preview"
|
||||
},
|
||||
{
|
||||
"type": "image",
|
||||
"order": 101,
|
||||
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-graph-azureapps/assets/Edit-App.gif",
|
||||
"alt": "Web Part Preview"
|
||||
}
|
||||
],
|
||||
"authors": [
|
||||
{
|
||||
"gitHubAccount": "Diksha-Bhura",
|
||||
"pictureUrl": "https://github.com/Diksha-Bhura.png",
|
||||
"name": "Diksha Bhura"
|
||||
}
|
||||
],
|
||||
"references": [
|
||||
{
|
||||
"name": "Build your first SharePoint client-side web part",
|
||||
"description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
|
||||
"url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
@ -1,7 +1,9 @@
|
|||
import { MSGraphClientV3 } from '@microsoft/sp-http';
|
||||
|
||||
export interface IRegisterAppProps{
|
||||
export interface IRegisterAppProps {
|
||||
graphClient: MSGraphClientV3,
|
||||
modal:() => any,
|
||||
callBack:(latestapp: any) => any,
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
modal: () => any,
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
callBack: (latestapp: any) => any,
|
||||
}
|
||||
|
|
@ -18,7 +18,7 @@ export default class RegisterApp extends React.Component<IRegisterAppProps, IReg
|
|||
};
|
||||
}
|
||||
|
||||
private onNameChanged = (event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => {
|
||||
private onNameChanged = (event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string): void => {
|
||||
this.setState((prevState: IRegisterAppState, nextState: IRegisterAppState): IRegisterAppState => {
|
||||
nextState = cloneDeep(prevState);
|
||||
nextState.appName = newValue;
|
||||
|
|
@ -36,6 +36,7 @@ export default class RegisterApp extends React.Component<IRegisterAppProps, IReg
|
|||
}
|
||||
|
||||
private onRegisterApp = (): Promise<void> => {
|
||||
// eslint-disable-next-line no-async-promise-executor
|
||||
return new Promise(async (resolve, reject) => {
|
||||
try {
|
||||
|
||||
|
|
@ -43,12 +44,12 @@ export default class RegisterApp extends React.Component<IRegisterAppProps, IReg
|
|||
"displayName": this.state.appName,
|
||||
"signInAudience": this.state.signInAudience
|
||||
}
|
||||
let result = await this.props.graphClient
|
||||
const result = await this.props.graphClient
|
||||
.api("/applications")
|
||||
.post(newAppDetails);
|
||||
|
||||
if (result.id) {
|
||||
let app: IAppModel = {
|
||||
const app: IAppModel = {
|
||||
Id: "",
|
||||
appId: "",
|
||||
displayName: "",
|
||||
|
|
@ -60,7 +61,7 @@ export default class RegisterApp extends React.Component<IRegisterAppProps, IReg
|
|||
app.appId = result.appId;
|
||||
app.displayName = result.displayName;
|
||||
app.createdDateTime = moment(new Date(result.createdDateTime)).format("llll");
|
||||
|
||||
|
||||
this.props.callBack(app);
|
||||
|
||||
resolve();
|
||||
|
|
@ -70,12 +71,13 @@ export default class RegisterApp extends React.Component<IRegisterAppProps, IReg
|
|||
console.log(result);
|
||||
}
|
||||
catch (exception) {
|
||||
|
||||
// do nothing
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
private handlerRegisterClick = () => {
|
||||
private handlerRegisterClick = (): void => {
|
||||
// eslint-disable-next-line @typescript-eslint/no-floating-promises
|
||||
this.onRegisterApp().then(
|
||||
this.props.modal()
|
||||
)
|
||||
|
|
@ -103,7 +105,7 @@ export default class RegisterApp extends React.Component<IRegisterAppProps, IReg
|
|||
<ChoiceGroup defaultSelectedKey="AzureADMyOrg" options={options} onChange={this.onSupportedAccountChanged.bind(this)} />
|
||||
|
||||
<br />
|
||||
<PrimaryButton text='Register' disabled={this.state.appName != "" ? false : true} onClick={this.handlerRegisterClick.bind(this)} />
|
||||
<PrimaryButton text='Register' disabled={this.state.appName !== "" ? false : true} onClick={this.handlerRegisterClick.bind(this)} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ export default class azureAppsWebPart extends BaseClientSideWebPart<IazureAppsWe
|
|||
private graphClient: MSGraphClientV3;
|
||||
|
||||
protected onInit(): Promise<void> {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
return new Promise<void>((resolve: () => void, reject: (error: any) => void): void => {
|
||||
this.context.msGraphClientFactory
|
||||
.getClient("3")
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ export default class azureApps extends React.Component<IAzureAppsProps, IAzureAp
|
|||
|
||||
componentDidMount(): void {
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-floating-promises
|
||||
this.getApps().then((retrievedApps) => {
|
||||
|
||||
retrievedApps.forEach(async currentApp => {
|
||||
|
|
@ -49,19 +50,20 @@ export default class azureApps extends React.Component<IAzureAppsProps, IAzureAp
|
|||
}
|
||||
|
||||
private getApps = (): Promise<IAppModel[]> => {
|
||||
// eslint-disable-next-line no-async-promise-executor
|
||||
return new Promise<IAppModel[]>(async (resolve, reject) => {
|
||||
try {
|
||||
let retrievedApps: IAppModel[] = [];
|
||||
let result = await this.props.graphClient
|
||||
const retrievedApps: IAppModel[] = [];
|
||||
const result = await this.props.graphClient
|
||||
.api("applications")
|
||||
.get();
|
||||
|
||||
if (result && result.value && result.value.length > 0) {
|
||||
|
||||
for (let index = 0; index < result.value.length; index++) {
|
||||
let currApp = result.value[index];
|
||||
if (currApp.createdDateTime != null) {
|
||||
let app: IAppModel = {
|
||||
const currApp = result.value[index];
|
||||
if (currApp.createdDateTime !== null) {
|
||||
const app: IAppModel = {
|
||||
Id: "",
|
||||
appId: "",
|
||||
displayName: "",
|
||||
|
|
@ -93,24 +95,25 @@ export default class azureApps extends React.Component<IAzureAppsProps, IAzureAp
|
|||
})
|
||||
}
|
||||
|
||||
private getAllOwners = (id: string): Promise<any> => {
|
||||
let users: IDocumentCardActivityPerson[] = [];
|
||||
private getAllOwners = (id: string): Promise<IDocumentCardActivityPerson[]> => {
|
||||
const users: IDocumentCardActivityPerson[] = [];
|
||||
// eslint-disable-next-line no-async-promise-executor
|
||||
return new Promise(async (resolve, reject) => {
|
||||
try {
|
||||
let result = await this.props.graphClient
|
||||
const result = await this.props.graphClient
|
||||
.api("/applications/" + id + "/owners").
|
||||
get();
|
||||
|
||||
if (result && result.value && result.value.length) {
|
||||
for (let index = 0; index < result.value.length; index++) {
|
||||
let currentUser = result.value[index]
|
||||
let userDetails: IDocumentCardActivityPerson = {
|
||||
const currentUser = result.value[index]
|
||||
const userDetails: IDocumentCardActivityPerson = {
|
||||
name: "",
|
||||
profileImageSrc: ""
|
||||
};
|
||||
|
||||
userDetails.name = currentUser.displayName,
|
||||
userDetails.profileImageSrc = ''
|
||||
userDetails.name = currentUser.displayName;
|
||||
userDetails.profileImageSrc = '';
|
||||
|
||||
users.push(userDetails);
|
||||
}
|
||||
|
|
@ -124,10 +127,11 @@ export default class azureApps extends React.Component<IAzureAppsProps, IAzureAp
|
|||
});
|
||||
}
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
|
||||
public refreshCallback = async (latestapp: IAppModel) => {
|
||||
let apps = this.state.apps;
|
||||
const apps = this.state.apps;
|
||||
apps.push(latestapp);
|
||||
console.log("Apps on callback: "+this.state.apps.length);
|
||||
console.log("Apps on callback: " + this.state.apps.length);
|
||||
await this.setState((prevState: IAzureAppsState, newState: IAzureAppsState) => {
|
||||
newState = cloneDeep(prevState);
|
||||
newState.apps.push(latestapp);
|
||||
|
|
@ -135,10 +139,10 @@ export default class azureApps extends React.Component<IAzureAppsProps, IAzureAp
|
|||
|
||||
return newState;
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
|
||||
public ModalAction() {
|
||||
public ModalAction(): void {
|
||||
this.setState((prevState: IAzureAppsState, newState: IAzureAppsState) => {
|
||||
newState = cloneDeep(prevState);
|
||||
newState.isModalOpen = !this.state.isModalOpen;
|
||||
|
|
@ -147,10 +151,10 @@ export default class azureApps extends React.Component<IAzureAppsProps, IAzureAp
|
|||
})
|
||||
}
|
||||
|
||||
private handlerRefreshClick = ():void => {
|
||||
private handlerRefreshClick = (): void => {
|
||||
window.location.reload();
|
||||
|
||||
this.setState((prevState: IAzureAppsState, newState:IAzureAppsState):IAzureAppsState => {
|
||||
this.setState((prevState: IAzureAppsState, newState: IAzureAppsState): IAzureAppsState => {
|
||||
newState = cloneDeep(prevState);
|
||||
|
||||
newState.isRefreshed = true;
|
||||
|
|
@ -171,11 +175,11 @@ export default class azureApps extends React.Component<IAzureAppsProps, IAzureAp
|
|||
},
|
||||
};
|
||||
|
||||
_.orderBy(this.state.apps, function(o){
|
||||
_.orderBy(this.state.apps, function (o) {
|
||||
return moment(new Date(o.createdDateTime)).format("hh:mm:ss")
|
||||
},['desc']);
|
||||
}, ['desc']);
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div className={styles.mainarea}>
|
||||
{
|
||||
|
|
@ -188,10 +192,10 @@ export default class azureApps extends React.Component<IAzureAppsProps, IAzureAp
|
|||
<DefaultButton text='Register App' onClick={this.ModalAction.bind(this)} />
|
||||
</Sticky>
|
||||
{
|
||||
|
||||
|
||||
this.state.apps.length ?
|
||||
this.state.apps.map(currentApp => (
|
||||
<div>
|
||||
<div key={currentApp.Id}>
|
||||
{currentApp.users.length ?
|
||||
<DocumentCard
|
||||
className={styles.documentCard}
|
||||
|
|
@ -204,7 +208,7 @@ export default class azureApps extends React.Component<IAzureAppsProps, IAzureAp
|
|||
</DocumentCardDetails>
|
||||
</DocumentCard>
|
||||
:
|
||||
<div/>
|
||||
<div />
|
||||
}
|
||||
</div>
|
||||
|
||||
|
|
@ -233,8 +237,7 @@ export default class azureApps extends React.Component<IAzureAppsProps, IAzureAp
|
|||
<RegisterApp
|
||||
graphClient={this.props.graphClient}
|
||||
modal={this.ModalAction.bind(this)}
|
||||
callBack={this.refreshCallback.bind(this)}>
|
||||
</RegisterApp>
|
||||
callBack={this.refreshCallback.bind(this)} />
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
|
|
@ -243,15 +246,15 @@ export default class azureApps extends React.Component<IAzureAppsProps, IAzureAp
|
|||
<Dialog dialogContentProps={{
|
||||
title: "Refresh to get the latest app."
|
||||
}}
|
||||
styles={{
|
||||
main:{
|
||||
maxHeight: '150px !important',
|
||||
minHeight: '150px !important'
|
||||
}
|
||||
}}
|
||||
hidden={this.state.isRefreshed}>
|
||||
styles={{
|
||||
main: {
|
||||
maxHeight: '150px !important',
|
||||
minHeight: '150px !important'
|
||||
}
|
||||
}}
|
||||
hidden={this.state.isRefreshed}>
|
||||
<DialogFooter>
|
||||
<DefaultButton text='Refresh' onClick={this.handlerRefreshClick.bind(this)}/>
|
||||
<DefaultButton text='Refresh' onClick={this.handlerRefreshClick.bind(this)} />
|
||||
</DialogFooter>
|
||||
</Dialog>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue