+ {/* User Selection */}
+
+
+
+ this.updateFilter({ userMode: (data.optionValue as UserMode) || "specific" })
+ }
+ >
+
+
+
+
+
+ {userMode === "specific" && (
+
+
+ {
+ this.updateFilter({ identities });
+ }}
+ forceValue={true}
+ width={280}
+ placeholder="Search for a user..."
+ />
+
+ )}
+
+ {/* Repository Selection */}
+
+
+
+ this.updateFilter({ repoMode: (data.optionValue as RepoMode) || "all" })
+ }
+ >
+
+
+
+
+
+ {repoMode === "specific" && (
+
+ {
+ const repositories = repos.map((r) => ({ key: r.id, name: r.name }));
+ this.updateFilter({ repositories });
+ }}
+ width={280}
+ placeholder="Search for a repository..."
+ />
+
+ )}
- {userMode === "specific" && (
+ {/* Scope */}
-
- {
- this.updateFilter({ identities });
- }}
- forceValue={true}
- width={280}
- placeholder="Search for a user..."
+
+ this.updateFilter({ allProjects: data.checked })}
/>
- )}
-
-
-
- this.updateFilter({ allProjects: checked })}
- />
-
-
-
-
- {this.renderProviderToggle("Commits", "Commit")}
- {this.renderProviderToggle("Created PRs", "CreatePullRequest")}
- {this.renderProviderToggle("Closed PRs", "ClosePullRequest")}
- {this.renderProviderToggle("Reviewed PRs", "ReviewPullRequest")}
- {this.renderProviderToggle("Created Work Items", "CreateWorkItem")}
- {this.renderProviderToggle("Resolved Work Items", "ResolveWorkItem")}
- {this.renderProviderToggle("Closed Work Items", "CloseWorkItem")}
- {this.renderProviderToggle("Changesets (TFVC)", "Changeset")}
+ {/* Contribution Types */}
+
+
+
+ {this.renderProviderToggle("Commits", "Commit")}
+ {this.renderProviderToggle("Created PRs", "CreatePullRequest")}
+ {this.renderProviderToggle("Closed PRs", "ClosePullRequest")}
+ {this.renderProviderToggle("Reviewed PRs", "ReviewPullRequest")}
+ {this.renderProviderToggle("Created Work Items", "CreateWorkItem")}
+ {this.renderProviderToggle("Resolved Work Items", "ResolveWorkItem")}
+ {this.renderProviderToggle("Closed Work Items", "CloseWorkItem")}
+ {this.renderProviderToggle("Changesets (TFVC)", "Changeset")}
+
+
+
+ {/* Widget Display Options */}
+
+
+ this.updateFilter({ showFiltersOnWidget: data.checked })}
+ />
-
+
);
}
+ private getSelectedRepos(): IRepository[] {
+ const { repositories } = this.props.filter;
+ if (!repositories) {
+ return [];
+ }
+ return repositories.map((r) => ({
+ id: r.key,
+ name: r.name,
+ projectName: "", // We don't store project name, but it's not needed for display
+ }));
+ }
+
private renderProviderToggle(label: string, provider: ContributionName) {
const { filter } = this.props;
return (
-
this.updateProvider(provider, checked)}
+ onChange={(_e, data) => this.updateProvider(provider, data.checked)}
/>
);
}
@@ -119,7 +186,7 @@ function parseSettings(customSettings: string | null): WidgetSettings {
console.warn("Failed to parse widget settings:", e);
}
}
- return { filter: null as any };
+ return { filter: null as unknown as ExtendedFilter };
}
VSS.require(
@@ -129,17 +196,16 @@ VSS.require(
VSS.register("ContributionsWidget-Configuration", () => {
const container = document.querySelector(".configuration-container");
+ let root: Root | null = null;
let currentFilter: ExtendedFilter;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
let notifyChange: (eventName: string, eventArgs: any) => void;
const handleFilterChange = (filter: ExtendedFilter) => {
currentFilter = filter;
// Re-render the panel
- ReactDOM.render(
- ,
- container
- );
+ root?.render();
// Notify the widget of the change
if (notifyChange) {
@@ -154,17 +220,28 @@ VSS.require(
};
return {
- load: async (widgetSettings: any, widgetConfigurationContext: any) => {
+ load: async (
+ widgetSettings: { customSettings: { data: string | null } },
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ widgetConfigurationContext: any
+ ) => {
notifyChange = widgetConfigurationContext.notify.bind(widgetConfigurationContext);
const settings = parseSettings(widgetSettings.customSettings.data);
- const baseFilter = settings.filter || (await defaultFilter.getValue());
- currentFilter = { ...baseFilter, userMode: baseFilter.userMode || "specific" };
+ const baseFilter: IContributionFilter &
+ Partial<{ userMode: UserMode; repoMode: RepoMode; showFiltersOnWidget: boolean }> =
+ settings.filter || (await defaultFilter.getValue());
+ const userMode: UserMode =
+ ("userMode" in baseFilter && baseFilter.userMode) || "specific";
+ const repoMode: RepoMode = ("repoMode" in baseFilter && baseFilter.repoMode) || "all";
+ const showFiltersOnWidget: boolean =
+ ("showFiltersOnWidget" in baseFilter && baseFilter.showFiltersOnWidget) || false;
+ currentFilter = { ...baseFilter, userMode, repoMode, showFiltersOnWidget };
- ReactDOM.render(
- ,
- container
- );
+ if (!root && container) {
+ root = createRoot(container);
+ }
+ root?.render();
return WidgetHelpers.WidgetStatusHelper.Success();
},
diff --git a/scripts/controls/CollapsibleHeader.tsx b/scripts/controls/CollapsibleHeader.tsx
index ec9d60d..20209b5 100644
--- a/scripts/controls/CollapsibleHeader.tsx
+++ b/scripts/controls/CollapsibleHeader.tsx
@@ -1,36 +1,40 @@
import * as React from "react";
-import { IconButton } from "office-ui-fabric-react/lib-amd/components/Button";
+import { Button } from "@fluentui/react-components";
+import { ChevronRight16Regular, ChevronDown16Regular } from "@fluentui/react-icons";
+
+interface CollapsibleHeaderProps {
+ title: string;
+ titleSuffix?: JSX.Element;
+ buttonName: string;
+ level: 1 | 2 | 3 | 4 | 5 | 6;
+ className?: string;
+ children?: React.ReactNode;
+}
+
+interface CollapsibleHeaderState {
+ showChildren: boolean;
+}
export class CollapsibleHeader extends React.Component<
- {
- title: string;
- titleSuffix?: JSX.Element;
- buttonName: string;
- level: 1 | 2 | 3 | 4 | 5 | 6;
- className?: string;
- },
- {
- showChildren: boolean;
- }
+ CollapsibleHeaderProps,
+ CollapsibleHeaderState
> {
- constructor(props: {
- title: string;
- titleSuffix?: JSX.Element;
- buttonName: string;
- level: 1 | 2 | 3 | 4 | 5 | 6;
- className?: string;
- }) {
+ constructor(props: CollapsibleHeaderProps) {
super(props);
this.state = { showChildren: false };
}
+
render() {
const { showChildren } = this.state;
+ const ChevronIcon = showChildren ? ChevronDown16Regular : ChevronRight16Regular;
+
return (
-
-
-
+
+ }
title={`${showChildren ? "Hide" : "Show"} ${this.props.buttonName}`}
onClick={() => this.setState({ showChildren: !this.state.showChildren })}
/>
@@ -41,6 +45,7 @@ export class CollapsibleHeader extends React.Component<
);
}
+
private getTitle() {
switch (this.props.level) {
case 1:
diff --git a/scripts/controls/CompletionDropdown.tsx b/scripts/controls/CompletionDropdown.tsx
deleted file mode 100644
index 2fafbfb..0000000
--- a/scripts/controls/CompletionDropdown.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import * as React from "react";
-import { Label } from "office-ui-fabric-react/lib-amd/components/Label";
-import { TagPicker, ITag } from "office-ui-fabric-react/lib-amd/components/pickers";
-
-interface ICompletionDropdownProps {
- selected?: ITag[];
- width?: string | number;
- readOnly?: boolean;
- placeholder?: string;
- noResultsFoundText?: string;
- loadingText?: string;
- searchingText?: string;
- onSelectionChanged?: (selection: ITag[]) => void;
- forceValue?: boolean;
- resolveSuggestions: (filter: string, selected?: ITag[]) => ITag[] | PromiseLike;
- inputWidth?: string | number;
- label?: string;
-}
-
-export class CompletionDropdown extends React.Component {
- private static counter: number = 0;
- private readonly key: number;
- constructor(props: ICompletionDropdownProps) {
- super(props);
- this.key = CompletionDropdown.counter++;
- this.state = { selected: props.selected };
- }
- render() {
- return (
-
- {this.props.label ? : null}
- {
- if (this.props.onSelectionChanged) {
- this.props.onSelectionChanged(items || []);
- const input = $(`.completion-dropdown.k_${this.key} input`);
- setTimeout(() => {
- input.blur();
- setTimeout(() => input.focus(), 1);
- }, 1);
- }
- }}
- onEmptyInputFocus={(selected) => this.props.resolveSuggestions("", selected)}
- onGetMoreResults={(filter, selected) => this.props.resolveSuggestions(filter, selected)}
- defaultSelectedItems={this.props.selected}
- inputProps={{
- placeholder: this.props.placeholder,
- readOnly: this.props.readOnly,
- width: this.props.inputWidth || 200,
- }}
- />
-
- );
- }
-}
diff --git a/scripts/controls/Day.tsx b/scripts/controls/Day.tsx
deleted file mode 100644
index c36dbde..0000000
--- a/scripts/controls/Day.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import { KeyCodes } from "office-ui-fabric-react/lib-amd/Utilities";
-import * as React from "react";
-import { DelayedFunction } from "VSS/Utils/Core";
-
-import { UserContribution } from "../data/contracts";
-import { ISelectedRange } from "../filter";
-import { isOneDayRange, toCountString, toDateString } from "./messageFormatting";
-import { TooltipHost } from "office-ui-fabric-react/lib-amd/components/Tooltip";
-
-interface DayProps {
- toggleSelect: (date?: Date, expand?: boolean) => void;
- date: Date;
- selected?: ISelectedRange;
- contributions?: UserContribution[];
- getWorkClass: (count: number) => string;
-}
-
-interface DayState {
- hover: boolean;
-}
-
-export class Day extends React.Component {
- constructor(props: DayProps) {
- super(props);
- this.state = { hover: false };
- }
- render() {
- const contributions = this.props.contributions || [];
- const contributionCount = toCountString(contributions.length, "contribution");
- const dateString = toDateString(this.props.date);
- return (
- (
-
-
{contributionCount}
-
{dateString}
-
this.delayedShowCallout()}
- onMouseOver={() => this.delayedShowCallout()}
- onMouseLeave={() => this.delayedShowCallout(false)}
- onMouseDown={(e: React.MouseEvent) => this.onClick(e)}
- onKeyDown={(e: React.KeyboardEvent) => this.onKeydown(e)}
- tabIndex={0}
- data-is-focusable={true}
- aria-label={`${contributionCount} on ${dateString}`}
- >
-
-
-
- {this.props.contributions.map((contributions) => (
-
- ))}
-
- );
- }
-}
diff --git a/scripts/controls/IdentityPicker.tsx b/scripts/controls/IdentityPicker.tsx
index 9111ef6..a098bfb 100644
--- a/scripts/controls/IdentityPicker.tsx
+++ b/scripts/controls/IdentityPicker.tsx
@@ -1,11 +1,8 @@
-import { IPersonaProps } from "office-ui-fabric-react/lib-amd/components/Persona";
-import {
- IBasePickerSuggestionsProps,
- NormalPeoplePicker,
-} from "office-ui-fabric-react/lib-amd/components/pickers";
import * as React from "react";
-
-import { searchIdentities } from "../data/identities/identities";
+import { Combobox, Option, Persona, Tag, TagGroup } from "@fluentui/react-components";
+import { Dismiss12Regular } from "@fluentui/react-icons";
+import { getIdentities } from "../data/identities/getIdentities";
+import { CachedValue } from "../data/CachedValue";
export interface IIdentity {
displayName: string;
@@ -24,60 +21,163 @@ export interface IIdentityPickerProps {
forceValue?: boolean;
}
-const suggestionProps: IBasePickerSuggestionsProps = {
- suggestionsHeaderText: "Suggested People",
- noResultsFoundText: "No results found",
- loadingText: "Loading",
-};
+// Cache for all identities
+const identitiesCache = new CachedValue(async () => {
+ const identitiesMap = await getIdentities();
+ const identities: IIdentity[] = [];
+ for (const id in identitiesMap) {
+ const identity = identitiesMap[id];
+ identities.push({
+ displayName: identity.displayName,
+ uniqueName: identity.uniqueName || "",
+ imageUrl: identity.imageUrl || "",
+ id: identity.id,
+ });
+ }
+ return identities;
+});
-export class IdentityPicker extends React.Component {
- render() {
- return (
-
- persona.primaryText || "Unkown Identity"}
- pickerSuggestionsProps={suggestionProps}
- className={`ms-PeoplePicker identity-selector`}
- onChange={(items) => {
- if (this.props.onIdentityChanged) {
- const identities: IIdentity[] = (items || []).map(
- this._personaToIIdentity.bind(this)
- );
- this.props.onIdentityChanged(identities);
- }
- }}
- defaultSelectedItems={this.props.identities.map(this._iIdentityToPersona.bind(this))}
- inputProps={{
- placeholder: this.props.placeholder,
- readOnly: this.props.readOnly,
- }}
- key={"normal"}
- />
-
+interface IdentityPickerState {
+ query: string;
+ suggestions: IIdentity[];
+ loading: boolean;
+}
+
+export class IdentityPicker extends React.Component {
+ private comboboxId = `identity-picker-${Math.random().toString(36).substr(2, 9)}`;
+ private searchRequestId = 0;
+
+ constructor(props: IIdentityPickerProps) {
+ super(props);
+ this.state = {
+ query: "",
+ suggestions: [],
+ loading: false,
+ };
+ }
+
+ private async searchIdentities(filter: string): Promise {
+ const lowerFilter = filter.toLocaleLowerCase();
+ const allIdentities = await identitiesCache.getValue();
+
+ if (!filter) {
+ return allIdentities.slice(0, 10); // Show first 10 when no filter
+ }
+
+ return allIdentities.filter(
+ (identity) =>
+ identity.displayName.toLocaleLowerCase().includes(lowerFilter) ||
+ identity.uniqueName.toLocaleLowerCase().includes(lowerFilter)
);
}
- private _personaToIIdentity(persona: IPersonaProps): IIdentity {
- if (!persona.primaryText) {
- throw new Error("Identity properties not set");
- } else if (!persona.secondaryText || !persona.id || !persona.imageUrl) {
- console.warn(
- `${persona.primaryText} is not a direct member of a team. (Support for aad groups is limited)`
- );
+
+ private async handleInputChange(value: string) {
+ const requestId = ++this.searchRequestId;
+ this.setState({ query: value, loading: true });
+ const suggestions = await this.searchIdentities(value);
+ // Only update if this is still the latest request (prevents race conditions)
+ if (requestId === this.searchRequestId) {
+ this.setState({ suggestions, loading: false });
}
- return {
- uniqueName: persona.secondaryText || "",
- id: persona.id || "",
- displayName: persona.primaryText,
- imageUrl: persona.imageUrl || "",
- };
}
- private _iIdentityToPersona(identity: IIdentity): IPersonaProps {
- return {
- id: identity.id,
- primaryText: identity.displayName,
- secondaryText: identity.uniqueName,
- imageUrl: identity.imageUrl,
- };
+
+ private handleSelect(_e: unknown, data: { optionValue?: string }) {
+ if (!data.optionValue) {
+ return;
+ }
+
+ const selectedIdentity = this.state.suggestions.find((i) => i.id === data.optionValue);
+
+ if (selectedIdentity && this.props.onIdentityChanged) {
+ // Add to existing selections (avoid duplicates)
+ const existing = this.props.identities || [];
+ if (!existing.find((i) => i.id === selectedIdentity.id)) {
+ this.props.onIdentityChanged([...existing, selectedIdentity]);
+ }
+ }
+
+ // Clear the search
+ this.setState({ query: "" });
+ }
+
+ private handleRemove(identityId: string) {
+ if (this.props.onIdentityChanged) {
+ const updated = this.props.identities.filter((i) => i.id !== identityId);
+ this.props.onIdentityChanged(updated);
+ }
+ }
+
+ componentDidMount() {
+ // Load initial suggestions
+ this.handleInputChange("");
+ }
+
+ render() {
+ const { identities, placeholder, readOnly, width } = this.props;
+ const { query, suggestions, loading } = this.state;
+
+ return (
+
+ {/* Selected identities as tags */}
+ {identities && identities.length > 0 && (
+
this.handleRemove(data.value)}
+ style={{ marginBottom: 8, flexWrap: "wrap", gap: 4 }}
+ >
+ {identities.map((identity) => (
+ }
+ media={
+
+ }
+ >
+ {identity.displayName}
+
+ ))}
+
+ )}
+
+ {/* Search combobox */}
+ {!readOnly && (
+
this.handleInputChange(e.target.value)}
+ onOptionSelect={(e, data) => this.handleSelect(e, data)}
+ freeform
+ style={{ width: "100%" }}
+ >
+ {loading ? (
+
+ ) : suggestions.length === 0 ? (
+
+ ) : (
+ suggestions.map((identity) => (
+
+ ))
+ )}
+
+ )}
+
+ {/* Selected repositories as tags */}
+ {repositories && repositories.length > 0 && (
+ this.handleRemove(data.value)}
+ style={{ marginBottom: 8, flexWrap: "wrap", gap: 4 }}
+ >
+ {repositories.map((repo) => (
+ }
+ >
+ {repo.name}
+
+ ))}
+
+ )}
+
+ {/* Search combobox */}
+ {!readOnly && (
+ this.handleInputChange(e.target.value)}
+ onOptionSelect={(e, data) => this.handleSelect(e, data)}
+ freeform
+ style={{ width: "100%" }}
+ >
+ {loading ? (
+
+ ) : suggestions.length === 0 ? (
+
+ ) : (
+ suggestions.map((repo) => (
+
+ ))
+ )}
+
+ )}
+
+ );
+ }
+}
diff --git a/scripts/controls/WidgetGraph.tsx b/scripts/controls/WidgetGraph.tsx
index aedf7a1..35b9338 100644
--- a/scripts/controls/WidgetGraph.tsx
+++ b/scripts/controls/WidgetGraph.tsx
@@ -1,4 +1,5 @@
import * as React from "react";
+import { ActivityCalendar, ThemeInput } from "react-activity-calendar";
import { IUserContributions } from "../data/contracts";
interface Activity {
@@ -11,6 +12,12 @@ interface WidgetGraphProps {
contributions: IUserContributions;
}
+// Green theme matching Zaplie styling
+const theme: ThemeInput = {
+ light: ["#1F1F1F", "#3a5e09", "#4d7a0c", "#6ba513", "#84cc16"],
+ dark: ["#1F1F1F", "#3a5e09", "#4d7a0c", "#6ba513", "#84cc16"],
+};
+
function transformContributions(contributions: IUserContributions): Activity[] {
const activities: Activity[] = [];
const today = new Date();
@@ -69,7 +76,7 @@ function transformContributions(contributions: IUserContributions): Activity[] {
return activities;
}
-export class WidgetGraph extends React.Component {
+export class WidgetGraph extends React.Component> {
render() {
const { contributions } = this.props;
const activities = transformContributions(contributions);
@@ -92,79 +99,17 @@ export class WidgetGraph extends React.Component {