microsoft · Ramakrishnan24689 · Oct 31, 2022 · Oct 21, 2022 · Oct 21, 2022 · Oct 25, 2022
diff --git a/Persona/.eslintrc.json b/Persona/.eslintrc.json
@@ -0,0 +1,55 @@
+{
+  "env": {
+      "browser": true,
+      "es2021": true
+  },
+  "extends": [
+      "eslint:recommended",
+      "plugin:react/recommended",
+      "plugin:@typescript-eslint/recommended",
+      "plugin:prettier/recommended",
+      "prettier",
+      "plugin:sonarjs/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+      "ecmaFeatures": {
+          "jsx": true
+      },
+      "ecmaVersion": 12,
+      "sourceType": "module"
+  },
+  "plugins": [
+      "react",
+      "react-hooks",
+      "@typescript-eslint",
+      "prettier",
+      "sonarjs"
+  ],
+  "settings": {
+      "react": {
+        "pragma": "React",
+        "version": "detect"
+      }
+    },
+  "ignorePatterns": ["**/generated/*.ts"],
+  "rules": {
+      "eqeqeq": [2, "smart"],
+      "react-hooks/exhaustive-deps": "warn",
+      "prettier/prettier": "error",
+      "arrow-body-style": "off",
+      "prefer-arrow-callback": "off",
+      "linebreak-style": [
+          "error",
+          "windows"
+      ],
+      "quotes": [
+          "error",
+          "single"
+      ],
+      "semi": [
+          "error",
+          "always"
+      ]
+  }
+}
diff --git a/Persona/.gitignore b/Persona/.gitignore
@@ -0,0 +1,16 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# generated directory
+**/generated
+
+# output directory
+/out
+
+#coverage directory
+/coverage
+# msbuild output directories
+/bin
+/obj
diff --git a/Persona/.prettierrc.json b/Persona/.prettierrc.json
@@ -0,0 +1,8 @@
+{
+    "semi": true,
+    "trailingComma": "all",
+    "singleQuote": true,
+    "printWidth": 120,
+    "tabWidth": 4,
+    "endOfLine":"auto"    
+  }
diff --git a/Persona/Persona.pcfproj b/Persona/Persona.pcfproj
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project ToolsVersion="15.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <PropertyGroup>
+    <PowerAppsTargetsPath>$(MSBuildExtensionsPath)\Microsoft\VisualStudio\v$(VisualStudioVersion)\PowerApps</PowerAppsTargetsPath>
+  </PropertyGroup>
+
+  <Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" />
+  <Import Project="$(PowerAppsTargetsPath)\Microsoft.PowerApps.VisualStudio.Pcf.props" Condition="Exists('$(PowerAppsTargetsPath)\Microsoft.PowerApps.VisualStudio.Pcf.props')" />
+
+  <PropertyGroup>
+    <Name>Persona</Name>
+    <ProjectGuid>2f863d99-5a79-428c-93c9-949c313a5814</ProjectGuid>
+    <OutputPath>$(MSBuildThisFileDirectory)out\controls</OutputPath>
+    <PcfBuildMode>production</PcfBuildMode>
+  </PropertyGroup>
+
+  <PropertyGroup>
+    <TargetFrameworkVersion>v4.6.2</TargetFrameworkVersion>
+    <!--Remove TargetFramework when this is available in 16.1-->
+    <TargetFramework>net462</TargetFramework>
+    <RestoreProjectStyle>PackageReference</RestoreProjectStyle>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Microsoft.PowerApps.MSBuild.Pcf" Version="1.*" />
+    <PackageReference Include="Microsoft.NETFramework.ReferenceAssemblies" Version="1.0.0" PrivateAssets="All" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <ExcludeDirectories Include="$(MSBuildThisFileDirectory)\.gitignore" />
+    <ExcludeDirectories Include="$(MSBuildThisFileDirectory)\bin\**" />
+    <ExcludeDirectories Include="$(MSBuildThisFileDirectory)\obj\**" />
+    <ExcludeDirectories Include="$(OutputPath)\**" />
+    <ExcludeDirectories Include="$(MSBuildThisFileDirectory)\*.pcfproj" />
+    <ExcludeDirectories Include="$(MSBuildThisFileDirectory)\*.pcfproj.user" />
+    <ExcludeDirectories Include="$(MSBuildThisFileDirectory)\*.sln" />
+    <ExcludeDirectories Include="$(MSBuildThisFileDirectory)\node_modules\**" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <None Include="$(MSBuildThisFileDirectory)\**" Exclude="@(ExcludeDirectories)" />
+  </ItemGroup>
+
+  <Import Project="$(MSBuildToolsPath)\Microsoft.Common.targets" />
+  <Import Project="$(PowerAppsTargetsPath)\Microsoft.PowerApps.VisualStudio.Pcf.targets" Condition="Exists('$(PowerAppsTargetsPath)\Microsoft.PowerApps.VisualStudio.Pcf.targets')" />
+
+</Project>
diff --git a/Persona/Persona/ControlManifest.Input.xml b/Persona/Persona/ControlManifest.Input.xml
@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<manifest>
+  <control namespace="PowerCAT" constructor="Persona" version="0.0.1" display-name-key="Persona" description-key="Persona_Desc"  control-type="virtual" >
+    <property name="ImageUrl" display-name-key="ImageUrl" of-type="SingleLine.Text" usage="input" required="false" />
+    <property name="ImageInitials" display-name-key="ImageInitials" of-type="SingleLine.Text" usage="input" required="false" />
+    <property name="Text" display-name-key="Text" of-type="SingleLine.Text" usage="input" required="false" />
+    <property name="SecondaryText" display-name-key="SecondaryText" of-type="SingleLine.Text" usage="input" required="false" />
+    <property name="TertiaryText" display-name-key="TertiaryText" of-type="SingleLine.Text" usage="input" required="false" />
+    <property name="OptionalText" display-name-key="OptionalText" of-type="SingleLine.Text" usage="input" required="false" />
+    <property name="ImageAlt" display-name-key="ImageAlt" of-type="SingleLine.Text" usage="input" required="false" />
+    <property name="HidePersonaDetails" display-name-key="HidePersonaDetails" of-type="TwoOptions" usage="input" />
+    <property name="AccessibilityLabel" display-name-key="AccessibilityLabel" of-type="SingleLine.Text" usage="input" required="false" />
+    <property name="Theme" display-name-key="Theme" of-type="Multiple" usage="input" required="false" />
+
+    <property name="PersonaSize" display-name-key="PersonaSize" description-key="PersonaSize" usage="input" of-type="Enum" required="false">
+      <value name="Size8" display-name-key="Size8" description-key="Size8">17</value>
+      <value name="Size24" display-name-key="Size24" description-key="Size24">10</value>
+      <value name="Size32" display-name-key="Size32" description-key="Size32">11</value>
+      <value name="Size40" display-name-key="Size40" description-key="Size40">12</value>
+      <value name="Size48" display-name-key="Size48" description-key="Size48" default="true">13</value>
+      <value name="Size56" display-name-key="Size56" description-key="Size56">16</value>
+      <value name="Size72" display-name-key="Size72" description-key="Size72">14</value>
+      <value name="Size100" display-name-key="Size100" description-key="Size100">15</value>
+      <value name="Size120" display-name-key="Size120" description-key="Size120">18</value>
+    </property>
+
+    <property name="Presence" display-name-key="Presence" description-key="Presence" usage="input" of-type="Enum" required="false">
+      <value name="None" display-name-key="None" description-key="None">0</value>
+      <value name="Offline" display-name-key="Offline" description-key="Offline">1</value>
+      <value name="Online" display-name-key="Online" description-key="Online" default="true">2</value>
+      <value name="Away" display-name-key="Away" description-key="Away">3</value>
+      <value name="Dnd" display-name-key="Dnd" description-key="Dnd">4</value>
+      <value name="Blocked" display-name-key="Blocked" description-key="Blocked">5</value>
+      <value name="Busy" display-name-key="Busy" description-key="Busy">6</value>
+    </property>
+
+    <property name="PersonaInitialsColor" display-name-key="PersonaInitialsColor" description-key="PersonaInitialsColor" usage="input" of-type="Enum" required="false">
+      <value name="Light Blue" display-name-key="lightBlue" description-key="lightBlue">lightBlue</value>
+      <value name="Blue" display-name-key="blue" description-key="blue">blue</value>
+      <value name="Dark Blue" display-name-key="darkBlue" description-key="darkBlue">darkBlue</value>
+      <value name="Teal" display-name-key="teal" description-key="teal">teal</value>
+      <value name="Green" display-name-key="green" description-key="green" default="true">green</value>
+      <value name="Dark Green" display-name-key="darkGreen" description-key="darkGreen">darkGreen</value>
+      <value name="Light Pink" display-name-key="lightPink" description-key="lightPink">lightPink</value>
+      <value name="Pink" display-name-key="pink" description-key="pink">pink</value>
+      <value name="Magenta" display-name-key="magenta" description-key="magenta">magenta</value>
+      <value name="Purple" display-name-key="purple" description-key="purple">purple</value>
+      <value name="Orange" display-name-key="orange" description-key="orange">orange</value>
+      <value name="Light Red" display-name-key="lightRed" description-key="lightRed">lightRed</value>
+      <value name="DarkRed" display-name-key="darkRed" description-key="darkRed">darkRed</value>
+      <value name="Violet" display-name-key="violet" description-key="violet" default="true">violet</value>
+      <value name="Gold" display-name-key="gold" description-key="gold">gold</value>
+      <value name="Burgundy" display-name-key="burgundy" description-key="burgundy">burgundy</value>
+      <value name="WarmGray" display-name-key="warmGray" description-key="warmGray">warmGray</value>
+      <value name="Cyan" display-name-key="cyan" description-key="cyan">cyan</value>
+     <value name="Rust" display-name-key="rust" description-key="rust">rust</value>
+      <value name="CoolGray" display-name-key="coolGray" description-key="coolGray">coolGray</value>
+    </property>
+
+
+    <resources>
+      <code path="index.ts" order="1"/>
+      <resx path="strings/Persona.1033.resx" version="1.0.0" />
+      <platform-library name="React" version="16.8.6" />
+      <platform-library name="Fluent" version="8.29.0" />
+    </resources>
+
+  </control>
+</manifest>
diff --git a/Persona/Persona/ManifestTypes.ts b/Persona/Persona/ManifestTypes.ts
@@ -0,0 +1,47 @@
+import { PersonaPresence, PersonaSize, PersonaInitialsColor } from '@fluentui/react';
+
+export const CanvasPersonaPresence = {
+    '0': PersonaPresence.none,
+    '1': PersonaPresence.offline,
+    '2': PersonaPresence.online,
+    '3': PersonaPresence.away,
+    '4': PersonaPresence.dnd,
+    '5': PersonaPresence.blocked,
+    '6': PersonaPresence.busy,
+};
+
+export const CanvasPersonaSizes = {
+    '17': PersonaSize.size8,
+    '10': PersonaSize.size24,
+    '11': PersonaSize.size32,
+    '12': PersonaSize.size40,
+    '13': PersonaSize.size48,
+    '16': PersonaSize.size56,
+    '14': PersonaSize.size72,
+    '15': PersonaSize.size100,
+    '18': PersonaSize.size120,
+};
+
+export const PersonaInitialsColors = {
+    'lightBlue': PersonaInitialsColor.lightBlue,
+    'blue': PersonaInitialsColor.blue,
+    'darkBlue': PersonaInitialsColor.darkBlue,
+    'teal': PersonaInitialsColor.teal,
+    'green': PersonaInitialsColor.green,
+    'darkGreen': PersonaInitialsColor.darkGreen,
+    'lightPink': PersonaInitialsColor.lightPink,
+    'pink': PersonaInitialsColor.pink,
+    'magenta': PersonaInitialsColor.magenta,
+    'purple':PersonaInitialsColor.purple,
+    'orange':PersonaInitialsColor.orange,
+    'lightRed':PersonaInitialsColor.lightRed,
+    'darkRed':PersonaInitialsColor.darkRed,
+    'violet':PersonaInitialsColor.violet,
+    'gold':PersonaInitialsColor.gold,
+    'burgundy':PersonaInitialsColor.burgundy,
+    'warmGray':PersonaInitialsColor.warmGray,
+    'cyan':PersonaInitialsColor.cyan,
+    'rust':PersonaInitialsColor.rust,
+    'coolGray':PersonaInitialsColor.coolGray
+};
+
diff --git a/Persona/Persona/__mocks__/mock-context.ts b/Persona/Persona/__mocks__/mock-context.ts
@@ -0,0 +1,78 @@
+/* istanbul ignore file */
+
+export class MockContext<T> implements ComponentFramework.Context<T> {
+    constructor(parameters: T) {
+        this.parameters = parameters;
+        this.mode = {
+            allocatedHeight: -1,
+            allocatedWidth: -1,
+            isControlDisabled: false,
+            isVisible: true,
+            label: '',
+            setControlState: jest.fn(),
+            setFullScreen: jest.fn(),
+            trackContainerResize: jest.fn(),
+        };
+        this.client = {
+            disableScroll: false,
+            getClient: jest.fn(),
+            getFormFactor: jest.fn(),
+            isOffline: jest.fn(),
+        };
+
+        // Canvas apps currently assigns a positive tab-index
+        // so we must use this property to assign a positive tab-index also
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (this as any).accessibility = { assignedTabIndex: 0 };
+    }
+    client: ComponentFramework.Client;
+    device: ComponentFramework.Device;
+    factory: ComponentFramework.Factory;
+    formatting: ComponentFramework.Formatting;
+    mode: ComponentFramework.Mode;
+    navigation: ComponentFramework.Navigation;
+    resources: ComponentFramework.Resources;
+    userSettings: ComponentFramework.UserSettings;
+    utils: ComponentFramework.Utility;
+    webAPI: ComponentFramework.WebApi;
+    parameters: T;
+    updatedProperties: string[] = [];
+}
+
+export class MockState implements ComponentFramework.Dictionary {}
+
+export class MockStringProperty implements ComponentFramework.PropertyTypes.StringProperty {
+    constructor(raw?: string | null, formatted?: string | undefined) {
+        this.raw = raw ?? null;
+        this.formatted = formatted;
+    }
+    raw: string | null;
+    attributes?: ComponentFramework.PropertyHelper.FieldPropertyMetadata.StringMetadata | undefined;
+    error: boolean;
+    errorMessage: string;
+    formatted?: string | undefined;
+    security?: ComponentFramework.PropertyHelper.SecurityValues | undefined;
+    type: string;
+}
+
+export class MockEnumProperty<T> implements ComponentFramework.PropertyTypes.EnumProperty<T> {
+    constructor(raw?: T, type?: string) {
+        if (raw) this.raw = raw;
+        if (type) this.type = type;
+    }
+    type: string;
+    raw: T;
+}
+
+export class MockTwoOptionsProperty implements ComponentFramework.PropertyTypes.TwoOptionsProperty {
+    constructor(raw?: boolean) {
+        if (raw) this.raw = raw;
+    }
+    raw: boolean;
+    attributes?: ComponentFramework.PropertyHelper.FieldPropertyMetadata.TwoOptionMetadata | undefined;
+    error: boolean;
+    errorMessage: string;
+    formatted?: string | undefined;
+    security?: ComponentFramework.PropertyHelper.SecurityValues | undefined;
+    type: string;
+}
diff --git a/Persona/Persona/__mocks__/mock-parameters.ts b/Persona/Persona/__mocks__/mock-parameters.ts
@@ -0,0 +1,22 @@
+/* istanbul ignore file */
+
+import { IInputs } from '../generated/ManifestTypes';
+import { MockEnumProperty, MockStringProperty, MockTwoOptionsProperty } from './mock-context';
+
+export function getMockParameters(): IInputs {
+    return {
+        AccessibilityLabel: new MockStringProperty(),
+        Theme: new MockStringProperty(),
+        PersonaSize: new MockEnumProperty(),
+        ImageUrl: new MockStringProperty(),
+        ImageAlt: new MockStringProperty(),
+        Presence: new MockEnumProperty(),
+        ImageInitials: new MockStringProperty(),
+        OptionalText: new MockStringProperty(),
+        HidePersonaDetails: new MockTwoOptionsProperty(),
+        TertiaryText: new MockStringProperty(),
+        Text: new MockStringProperty(),
+        SecondaryText: new MockStringProperty(),
+        PersonaInitialsColor:new MockEnumProperty()
+    };
+}