Introducing User Preferences and Multi-project selection (cribeiro84#148

) * Adding User Preferences panel * User Preferences logic * Moving things around to support multiple projects * Multi-project selection support * Minor UI tweaks * fixing SonarQube issue * More fixes * Fixing inconsistency setState * Another fix * Restore filters to original state onDismiss * Changing major version to 2.0 * Removing unnecessary state value
Xerillio · Aug 20, 2020 · 9a71b71 · 9a71b71
1 parent bf5b00a
commit 9a71b71
Show file tree

Hide file tree

Showing 16 changed files with 1,109 additions and 468 deletions.
diff --git a/.azure-pipelines/azure-pipelines.dev.yml b/.azure-pipelines/azure-pipelines.dev.yml
@@ -55,4 +55,4 @@ steps:
     fileType: 'vsix'
     vsixFile: 'azure-pull-request-hub-dev.vsix'
     updateTasksVersionType: 'patch'
-    extensionVersion: '1.$(Build.BuildNumber)'
+    extensionVersion: '2.$(Build.BuildNumber)'
diff --git a/.azure-pipelines/azure-pipelines.yml b/.azure-pipelines/azure-pipelines.yml
@@ -59,4 +59,4 @@ steps:
     fileType: 'vsix'
     vsixFile: 'azure-pull-request-hub.vsix'
     updateTasksVersionType: 'patch'
-    extensionVersion: '1.$(Build.BuildNumber)'
+    extensionVersion: '2.$(Build.BuildNumber)'
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -54,7 +54,7 @@
     "core-js": "^3.1.4",
     "del-cli": "^2.0.0",
     "node-sass": "^4.14.1",
-    "office-ui-fabric-react": "^6.105.0",
+    "office-ui-fabric-react": "^7.123.4",
     "react-router-dom": "^4.3.1",
     "redux": "^4.0.4",
     "rename-webpack-plugin": "^2.0.0",

diff --git a/src/common.tsx b/src/common.tsx
@@ -3,6 +3,7 @@ import "./common.scss";
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { MessageCard, MessageCardSeverity } from "azure-devops-ui/MessageCard";
+import { UserPreferences } from "./models/UserPreferences";
 
 export function showRootComponent(component: React.ReactElement<any>) {
     ReactDOM.render(component, document.getElementById("root"));
@@ -19,34 +20,9 @@ export function isLocalStorageAvailable(){
   }
 }
 
-export class UsertSettings {
-  constructor(public lastVisit: Date = new Date()) {
-
-  }
-
-  save = () => {
-    this.lastVisit = new Date();
-    localStorage.setItem(USER_SETTINGS_STORE_KEY, JSON.stringify(this));
-  }
-
-  load = () => {
-    const cachedInstance = localStorage.getItem(USER_SETTINGS_STORE_KEY);
-
-    if (!cachedInstance || cachedInstance.length === 0)
-    {
-      return;
-    }
-
-    const cachedUserSettings: UsertSettings = JSON.parse(cachedInstance);
-    const savedDate = new Date(cachedUserSettings.lastVisit.toString());
-
-    this.lastVisit = savedDate;
-  }
-}
-
 export const USER_SETTINGS_STORE_KEY: string = "PRMH_USER_SETTINGS_KEY";
 
-export const UsertSettingsInstance: UsertSettings = new UsertSettings();
+export const UserPreferencesInstance: UserPreferences = new UserPreferences();
 
 export function ShowErrorMessage(props: any) {
   return (

diff --git a/src/components/Columns.tsx b/src/components/Columns.tsx
@@ -22,9 +22,10 @@ import { PillGroup } from "azure-devops-ui/PillGroup";
 import { Pill, PillSize, PillVariant } from "azure-devops-ui/Pill";
 import { ConditionalChildren } from "azure-devops-ui/ConditionalChildren";
 import { Observer } from "azure-devops-ui/Observer";
+import { UserPreferencesInstance } from "../common";
 
 export function openNewWindowTab(targetUrl: string): void {
-  window.open(targetUrl, "_blank");
+  window.open(targetUrl, UserPreferencesInstance.openPRNewWindow ? "_blank" : "_top");
 }
 
 export function StatusColumn(
@@ -295,7 +296,7 @@ export function DetailsColumn(
           </ConditionalChildren>
           <ConditionalChildren renderChildren={tableItem.hasNewChanges()}>
             <ConditionalChildren renderChildren={tableItem.hasCommentChanges()}>
-              <Tooltip text="Pull Request has new comments or updates on existing comments since your last vist">
+              <Tooltip text="Pull Request has new comments or updates on existing comments since your last visit">
                 <Pill
                   size={PillSize.compact}
                   variant={PillVariant.colored}
@@ -306,7 +307,7 @@ export function DetailsColumn(
               </Tooltip>
             </ConditionalChildren>
             <ConditionalChildren renderChildren={tableItem.hasCommitChanges()}>
-              <Tooltip text="Pull Request has new commit(s) since your last vist">
+              <Tooltip text="Pull Request has new commit(s) since your last visit">
                 <Pill
                   size={PillSize.compact}
                   variant={PillVariant.colored}
@@ -391,7 +392,7 @@ export function ReviewersColumn(
       line2={
         <div className="flex-row flex-wrap">
           {tableItem.gitPullRequest.reviewers
-            .sort(Data.sortMethod)
+            .sort(Data.sortBranchOrIdentity)
             .map((reviewer, i) => {
               return (
                 <Tooltip
@@ -425,7 +426,6 @@ export function ReviewersColumn(
                                 Voted for:
                               </strong>{" "}
                               <br />
-                              <br />
                               {reviewer.votedFor.map((r) => {
                                 return (
                                   <span
@@ -438,6 +438,25 @@ export function ReviewersColumn(
                               })}
                             </span>
                           ) : null}
+                          {reviewer.isContainer && reviewer.isContainer === true ? (
+                            <span key={`span1-${i}-${reviewer.id}`}>
+                              <strong>
+                                <br />
+                                Voted by:
+                              </strong>{" "}
+                              <br />
+                              {tableItem.gitPullRequest.reviewers.filter(rv => rv.votedFor && rv.votedFor.some(vf => vf.id === reviewer.id)).map((r) => {
+                                return (
+                                  <span
+                                    key={`span2-${i}-${r.id}-${reviewer.id}`}
+                                  >
+                                    {" "}
+                                    - {r.displayName} <br />
+                                  </span>
+                                );
+                              })}
+                            </span>
+                          ) : null}
                         </div>
                       </div>
                     </div>

diff --git a/src/components/FilterBarHub.tsx b/src/components/FilterBarHub.tsx
@@ -26,7 +26,6 @@ import { Status } from "azure-devops-ui/Status";
 import { getStatusSizeValue, getStatusIcon } from "../models/constants";
 import { PullRequestModel } from "../models/PullRequestModel";
 import { Spinner } from "office-ui-fabric-react";
-import { IProjectInfo } from "azure-devops-extension-api";
 
 export const myApprovalStatuses: IListBoxItem[] = Object.keys(
   Data.ReviewerVoteOption
@@ -50,7 +49,6 @@ export const alternateStatusPr: IListBoxItem[] = Object.keys(
 
 export interface IFilterHubProps {
   filterPullRequests: () => void;
-  currentProject: IProjectInfo | TeamProjectReference;
   pullRequests: PullRequestModel[];
   projects: TeamProjectReference[];
   filter: Filter;
@@ -93,7 +91,7 @@ export function FilterBarHub(props: IFilterHubProps): JSX.Element {
 
       <React.Fragment>
         <DropdownFilterBarItem
-          filterItemKey={`selectedProject`}
+          filterItemKey={`selectedProjects`}
           onSelect={props.selectedProjectChanged}
           filter={props.filter}
           selection={props.selectedProject}

diff --git a/src/components/UserPreferencesPanel.scss b/src/components/UserPreferencesPanel.scss
@@ -0,0 +1,103 @@
+@import "azure-devops-ui/Core/_platformCommon.scss";
+
+.title-s {
+  font-size: 1.0625rem;
+  font-weight: 600
+}
+
+.title-xs {
+  font-size: .9375rem;
+  font-weight: 600
+}
+
+.body-xl {
+  font-size: 1.0625rem
+}
+
+.body-l {
+  font-size: .9375rem
+}
+
+.body-m {
+  font-size: .875rem
+}
+
+.body-s {
+  font-size: .75rem
+}
+
+.body-xs {
+  font-size: .6875rem
+}
+
+.feature-management-container {
+  width: 100%;
+  height: 100%;
+}
+
+.feature-management-container .features-list {
+  width: 100%;
+  list-style-type: none;
+  padding-left: 0;
+}
+
+.feature-management-container .features-list.is-horizontalConstrained {
+  overflow: hidden;
+}
+
+.feature-management-container .features-list .feature {
+  padding: 20px 0;
+  border-bottom: solid 1px;
+  border-bottom-color: rgba(200, 200, 200, 1);
+  border-bottom-color: rgba(var(--palette-neutral-20, 200, 200, 200), 1);
+  white-space: normal;
+}
+
+.feature-management-container .features-list .feature.highlighted-feature {
+  background-color: rgba(251, 242, 236, 1);
+  background-color: var(--status-warning-background, rgba(251, 242, 236, 1));
+  margin-left: -10px;
+  margin-right: -10px;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+.feature-management-container .features-list .feature:last-child {
+  border-bottom: none;
+}
+
+.feature-management-container .features-list .feature .feature-header {
+  display: flex;
+  align-items: center;
+}
+
+.feature-management-container .features-list .feature .feature-name {
+  flex-grow: 1;
+}
+
+.feature-management-container .features-list .feature .ms-Toggle {
+  margin-bottom: 0;
+  flex-shrink: 0;
+}
+
+.feature-management-container .features-list .feature input {
+  color: $primary-text;
+}
+
+.feature-management-container .features-list .feature .ms-Toggle.loading {
+  opacity: 0.3;
+}
+
+.feature-management-container .features-list .feature .ms-Toggle-label {
+  display: none;
+}
+
+.feature-management-container .features-list .feature .feature-description {
+  color: rgba(0, 0, 0, 0.55);
+  color: $primary-text;
+  margin-top: 10px;
+}
+
+.feature-management-container .features-list .feature .feature-toggle-error {
+  margin-top: 10px;
+}