Features/people picker

PeoplePicker/.eslintrc.json

@@ -0,0 +1,53 @@
+{
+  "env": {
+      "browser": true,
+      "es2021": true
+  },
+  "extends": [
+      "eslint:recommended",
+      "plugin:react/recommended",
+      "plugin:react-hooks/recommended",
+      "plugin:@typescript-eslint/recommended",
+      "plugin:prettier/recommended",
+      "prettier"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+      "ecmaFeatures": {
+          "jsx": true
+      },
+      "ecmaVersion": 12,
+      "sourceType": "module"
+  },
+  "plugins": [
+      "react",
+      "react-hooks",
+      "@typescript-eslint",
+      "prettier"
+  ],
+  "settings": {
+      "react": {
+        "pragma": "React",
+        "version": "detect"
+      }
+    },
+  "ignorePatterns": ["**/generated/*.ts"],
+  "rules": {
+    "eqeqeq": [2, "smart"],
+    "prettier/prettier": "error",
+    "arrow-body-style": "off",
+    "prefer-arrow-callback": "off",
+    "linebreak-style": [
+        "error",
+        "windows"
+    ],
+    "quotes": [
+        "error",
+        "single"
+    ],
+    "semi": [
+        "error",
+        "always"
+    ]
+  }
+}

PeoplePicker/.gitignore

@@ -0,0 +1,17 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# generated directory
+**/generated
+
+# coverage directory
+/coverage
+
+# output directory
+/out
+
+# msbuild output directories
+/bin
+/obj

PeoplePicker/.prettierrc.json

@@ -0,0 +1,8 @@
+{
+    "semi": true,
+    "trailingComma": "all",
+    "singleQuote": true,
+    "printWidth": 120,
+    "tabWidth": 4,
+    "endOfLine": "auto"
+}

PeoplePicker/PeoplePicker.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>PeoplePicker</Name>
+    <ProjectGuid>4f1851cb-52ae-4803-bce0-817b2091888f</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>

PeoplePicker/PeoplePicker/ContextExtended.ts

@@ -0,0 +1,8 @@
+// This is undocumented - but needed since canvas apps sets non-zero tabindexes
+// so we must use the tabindex provided by the context for accessibility purposes
+export interface ContextEx {
+    accessibility: {
+        assignedTabIndex: number;
+        assignedTooltip?: string;
+    };
+}

PeoplePicker/PeoplePicker/ControlManifest.Input.xml

@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest>
+  <control namespace="PowerCAT" constructor="PeoplePicker" version="0.0.1" display-name-key="PeoplePicker" description-key="PeoplePicker description" control-type="virtual">
+    <property name="Theme" display-name-key="Theme" of-type="Multiple" usage="input" required="false" />
+    <property name="AccessibilityLabel" display-name-key="AccessibilityLabel" of-type="SingleLine.Text" usage="input" required="false" default-value="People Picker" />
+    <property name="ShowSecondaryText" display-name-key="ShowSecondaryText_Desc" of-type="TwoOptions" usage="input" default-value="false" required="false" />
+    <property name="Error" display-name-key="Error" of-type="TwoOptions" usage="input" default-value="false" required="false" />
+    <property name="MinimumSearchTermLength" description-key="MinimumSearchTermLength_Desc" display-name-key="MinimumSearchTermLength" required="true" usage="input" of-type="Whole.None" default-value="3" />
+    <property name="SearchTermToShortMessage" description-key="SearchTermToShortMessage_Desc" display-name-key="SearchTermToShortMessage" required="true" usage="input" of-type="SingleLine.Text" default-value="Continue Typing..." />
+    <property name="NoResultFoundMesage" description-key="NoResultFoundMesage_Desc" display-name-key="NoResultFoundMesage" required="true" usage="input" of-type="SingleLine.Text" default-value="No results found" />
+    <property name="SuggestionsHeaderText" description-key="SuggestionsHeaderText_Desc" display-name-key="SuggestionsHeaderText" required="true" usage="input" of-type="SingleLine.Text" default-value="Suggested People" />
+    <property name="HintText" description-key="HintText_Desc" display-name-key="HintText" required="true" usage="input" of-type="SingleLine.Text" default-value="Search" />
+    <property name="MaxPeople" description-key="MaxPeople_Desc" display-name-key="MaxPeople" required="true" usage="input" of-type="Whole.None" default-value="10" />
+    <!-- People Picker Type -->
+    <property name="PeoplePickerType" display-name-key="PeoplePickerType" description-key="PeoplePickerType" usage="input" of-type="Enum" required="true">
+      <value name="NormalPeoplePicker" display-name-key="NormalPeoplePicker" description-key="Normal" default="true">Normal People Picker</value>
+      <value name="CompactPeoplePicker" display-name-key="CompactPeoplePicker" description-key="Compact">Compact People Picker</value>
+      <value name="ListPeoplePicker" display-name-key="ListPeoplePicker" description-key="List">List People Picker</value>
+    </property>
+    <!-- Output Properties -->
+    <property name="SelectedPeople" display-name-key="SelectedPeople_Desc" description-key="SelectedPeopleDisplayName" of-type="Object" usage="output" default-value="" required="true" />
+    <property name="SearchText" description-key="SearchText_Desc" display-name-key="SearchText" usage="output" of-type="SingleLine.Text" />
+    <property name="AutoHeight" description-key="AutoHeight_Desc" display-name-key="AutoHeight" usage="output" of-type="Whole.None" />
+    <!-- InputEvent : "SetFocus" -->
+    <property name="InputEvent" display-name-key="InputEvent" description-key="InputEvent_Desc" of-type="SingleLine.Text" usage="input" />
+    <!-- Custom Event -->
+    <event name="OnSearch" display-name-key="OnSearch" description-key="OnSearch_Desc" />
+    <event name="OnBlur" display-name-key="OnBlur" description-key="OnBlur_Desc" />
+    <event name="OnFocus" display-name-key="OnFocus" description-key="OnFocus_Desc" />
+    <!-- Dataset Property -->
+    <data-set name="Personas" display-name-key="Personas">
+      <property-set name="PersonaKey" display-name-key="PersonaKey" description-key="PersonaKey_Desc" of-type="SingleLine.Text" usage="bound" required="true" />
+      <property-set name="PersonaName" display-name-key="PersonaName" of-type="SingleLine.Text" usage="bound" required="true" />
+      <property-set name="PersonaImgUrl" display-name-key="PersonaImgUrl" of-type="SingleLine.Text" usage="bound" required="false" />
+      <property-set name="PersonaImageAlt" display-name-key="PersonaImageAlt" of-type="SingleLine.Text" usage="bound" required="false" />
+      <property-set name="PersonaPresence" display-name-key="PersonaPresence" of-type="SingleLine.Text" usage="bound" required="false" />
+      <property-set name="PersonaOOF" display-name-key="PersonaOOF" of-type="TwoOptions" usage="bound" required="false" />
+      <property-set name="PersonaRole" display-name-key="PersonaRole" of-type="SingleLine.Text" usage="bound" required="false" />
+    </data-set>
+    <data-set name="Suggestions" display-name-key="Suggestions">
+      <property-set name="SuggestionKey" display-name-key="SuggestionKey" description-key="SuggestionsKey_Desc" of-type="SingleLine.Text" usage="bound" required="true" />
+      <property-set name="SuggestionName" display-name-key="SuggestionName" of-type="SingleLine.Text" usage="bound" required="true" />
+      <property-set name="SuggestionImgUrl" display-name-key="SuggestionImgUrl" of-type="SingleLine.Text" usage="bound" required="false" />
+      <property-set name="SuggestionImageAlt" display-name-key="SuggestionImageAlt" of-type="SingleLine.Text" usage="bound" required="false" />
+      <property-set name="SuggestionPresence" display-name-key="SuggestionPresence" of-type="SingleLine.Text" usage="bound" required="false" />
+      <property-set name="SuggestionOOF" display-name-key="SuggestiosOOF" of-type="TwoOptions" usage="bound" required="false" />
+      <property-set name="SuggestionRole" display-name-key="SuggestionRole" of-type="SingleLine.Text" usage="bound" required="false" />
+    </data-set>
+    <property-dependencies>
+      <property-dependency input="PeoplePickerType" output="SelectedPeople" required-for="schema" />
+      <property-dependency input="PeoplePickerType" output="SearchText" required-for="schema" />
+      <property-dependency input="PeoplePickerType" output="AutoHeight" required-for="schema" />
+    </property-dependencies>
+    <resources>
+      <code path="index.ts" order="1" />
+      <resx path="strings/PeoplePicker.1033.resx" version="1.0.0" />
+      <css path="css/PeoplePicker.css" order="1" />
+      <platform-library name="React" version="16.8.6" />
+      <platform-library name="Fluent" version="8.29.0" />
+    </resources>
+  </control>
+</manifest>

PeoplePicker/PeoplePicker/ManifestConstants.ts

@@ -0,0 +1,42 @@
+export const enum ManifestPropertyNames {
+    dataset = 'dataset',
+    Suggestions_dataset = 'Suggestions_dataset',
+    SearchText = 'SearchText',
+}
+
+export const enum PersonaColumns {
+    PersonaKey = 'PersonaKey',
+    PersonaName = 'PersonaName',
+    PersonaSize = 'PersonaSize',
+    PersonaImgUrl = 'PersonaImgUrl',
+    PersonaImageAlt = 'PersonaImageAlt',
+    PersonaPresence = 'PersonaPresence',
+    PersonaOOF = 'PersonaOOF',
+    PersonaRole = 'PersonaRole',
+}
+
+export const enum SuggestionColumns {
+    SuggestionKey = 'SuggestionKey',
+    SuggestionName = 'SuggestionName',
+    SuggestionSize = 'SuggestionSize',
+    SuggestionImgUrl = 'SuggestionImgUrl',
+    SuggestionImageAlt = 'SuggestionImageAlt',
+    SuggestionPresence = 'SuggestionPresence',
+    SuggestionOOF = 'SuggestionOOF',
+    SuggestionRole = 'SuggestionRole',
+}
+
+export const enum InputEvents {
+    SetFocus = 'SetFocus',
+}
+
+export const enum InputProperties {
+    InputEvent = 'InputEvent',
+    SelectedKey = 'SelectedKey',
+}
+
+export const enum OutputEvents {
+    Add = 'Add',
+    Remove = 'Remove',
+    Search = 'Search',
+}

PeoplePicker/PeoplePicker/__mocks__/mock-context.ts

@@ -0,0 +1,120 @@
+/* istanbul ignore file */
+export const MockResources = {
+    getResource: jest.fn(),
+    getString: jest.fn().mockImplementation((k) => {
+        switch (k) {
+            case 'Aria_TagRemove':
+                return 'Remove';
+            case '...':
+                return '...';
+            default:
+                return 'Resource_String_' + k;
+        }
+    }),
+};
+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 = MockResources;
+    userSettings: ComponentFramework.UserSettings;
+    utils: ComponentFramework.Utility;
+    webAPI: ComponentFramework.WebApi;
+    parameters: T;
+    updatedProperties: string[] = [];
+    events: IEventBag;
+}
+
+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 MockWholeNumberProperty implements ComponentFramework.PropertyTypes.WholeNumberProperty {
+    constructor(raw?: number | null, formatted?: string | undefined) {
+        this.raw = raw ?? null;
+        this.formatted = formatted;
+    }
+    attributes?: ComponentFramework.PropertyHelper.FieldPropertyMetadata.WholeNumberMetadata | undefined;
+    raw: number | null;
+    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;
+}
+
+export class MockDecimalProperty implements ComponentFramework.PropertyTypes.DecimalNumberProperty {
+    constructor(raw?: number) {
+        if (raw) this.raw = raw;
+    }
+    raw: number;
+    attributes?: ComponentFramework.PropertyHelper.FieldPropertyMetadata.DecimalNumberMetadata | undefined;
+    error: boolean;
+    errorMessage: string;
+    formatted?: string | undefined;
+    security?: ComponentFramework.PropertyHelper.SecurityValues | undefined;
+    type: string;
+}
+
+export declare type IEventBag = Record<string, () => void>;