mgt-teams-channel-picker (#249)

* [mgt-teams-channel-picker] initial commit

* updates to render methods to follow easier flow, fixing types

* refactor nomenclature

* add channel logic

* adding team selection rendering, updating render method of team to include visible property for SVG

* additional arrow handling logic, styles for selection

* svg issues on teamlist

* fixing focus and hide of channel list, removing text if user deletes selection

* fixing close button to right-hand side. No matches found bug. more handling of search

* arrow selection handling

* handle arrow selection updates, reselect availablity, spacing

* refactor of handle arrow selection

* better channel selection, hide selection on search, updating icons

* updated user input and initial states

* selectedChannelById

* team search if no channels found

* css properties for help with dark mode

* fixing placeholder custom css

* spacing and border

* input arrow visual designator

* fixing padding

* loading spinner

* design updates

* highlights and overflow

* style updates

* overflow and selection

* overflow on custom color

* fixes for custom css hover states

* refactoring graph calls to baseGraph

* tooltips

* css props

* moving teams specific calls in accordance to current path

* filename and update private isHovered isFocused

* protected render functions

* prettier/stories for darkmode

* prettier/build

* fixing style on stories

* prettier update

* selectedChannel issue

* channels view

* key controls

* removing test style

* typo on focuslist

* keynavigation bug

* navigation bug

* debounce 400ms

* redo addChannel functionality

* selected channel ui

* add channel w/ no parent

* selected channel focus state reset

* updated render method

* rename people, matching selectchannelbyId to current docs

* error state using treeview, rename getChannelById

* bug with loading/error

* tab selection and open/close

* update selectedItem case to SelectedItem

* bug with reset search state if lostFocus

* focus automatically gained on user input

* selected item state handling

* font-fix

* loading and hover fixes for selectById

* Added few more stories, cleaned up the code a bit, and fixed few bugs

* loading using built in structures

* typo and refactor loops

* selectById logic optimization

* search icon functionality and styles

* updating keycode logic

* removing extra keycode check and safari bug

* selectChannelById await for items to load before set

* adding error message text to custom font-color to facilitate dark mode

* removing extra font color property

Co-authored-by: Nikola Metulev <[email protected]>
Co-authored-by: Nikola Metulev <[email protected]>

Author: vogtn

src/components/components.ts

@@ -13,6 +13,7 @@ import './mgt-people/mgt-people';
 import './mgt-person-card/mgt-person-card';
 import './mgt-person/mgt-person';
 import './mgt-tasks/mgt-tasks';
+import './mgt-teams-channel-picker/mgt-teams-channel-picker';
 
 export * from './mgt-agenda/mgt-agenda';
 export * from './mgt-get/mgt-get';
@@ -22,6 +23,7 @@ export * from './mgt-people/mgt-people';
 export * from './mgt-person-card/mgt-person-card';
 export * from './mgt-person/mgt-person';
 export * from './mgt-tasks/mgt-tasks';
+export * from './mgt-teams-channel-picker/mgt-teams-channel-picker';
 
 // Sub-Components, not for export!
 // export * from './sub-components/mgt-dot-options/mgt-dot-options';

src/components/mgt-teams-channel-picker/mgt-teams-channel-picker.graph.ts

@@ -0,0 +1,25 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
+
+import { Team } from '@microsoft/microsoft-graph-types';
+import { IGraph } from '../../IGraph';
+import { prepScopes } from '../../utils/GraphHelpers';
+
+/**
+ * async promise, returns all Teams associated with the user logged in
+ *
+ * @returns {Promise<Team[]>}
+ * @memberof Graph
+ */
+export async function getAllMyTeams(graph: IGraph): Promise<Team[]> {
+  const teams = await graph
+    .api('/me/joinedTeams')
+    .middlewareOptions(prepScopes('User.Read.All'))
+    .select(['displayName', 'id'])
+    .get();
+  return teams ? teams.value : null;
+}