+
+ {
+ this.state.isLoading ?
+
+ :
+ this.state.hasError ?
+
+ {this.state.errorMessage}
+
+ :
+
+
+
+ }
+ {
+ !this.state.hasError && !this.state.isLoading &&
+
+ }
+ {
+ this.state.showPanel &&
+
+ }
+
+ );
+ }
+}
diff --git a/samples/react-tenant-properties/src/webparts/tenantProperties/components/TenantPropertyPanel.tsx b/samples/react-tenant-properties/src/webparts/tenantProperties/components/TenantPropertyPanel.tsx
new file mode 100644
index 000000000..909bf35b9
--- /dev/null
+++ b/samples/react-tenant-properties/src/webparts/tenantProperties/components/TenantPropertyPanel.tsx
@@ -0,0 +1,225 @@
+// João Mendes
+// Mar 2019
+import * as React from 'react';
+import styles from './TenantProperties.module.scss';
+import { ITenantPropertyPanelProps, panelMode } from './ITenantPropertyPanelProps';
+import { ITenantPropertyPanelSate } from './ITenantPropertyPanelState';
+import { escape } from '@microsoft/sp-lodash-subset';
+import spservice from '../../../services/spservices';
+
+import * as strings from 'TenantPropertiesWebPartStrings';
+import { TextField } from 'office-ui-fabric-react/lib/TextField';
+import { Panel, PanelType } from 'office-ui-fabric-react/lib/Panel';
+import { Dialog, DialogType, DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
+import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button';
+
+
+// Display Tenant Property Panel Component
+export default class TenantPropertyPanel extends React.Component