Task: Show feedback - add to collections

src/app/views/sidebar/resource-explorer/ResourceExplorer.tsx

@@ -13,7 +13,7 @@ import { AppDispatch, useAppSelector } from '../../../../store';
 import { componentNames, eventTypes, telemetry } from '../../../../telemetry';
 import { IQuery } from '../../../../types/query-runner';
 import { IResource, IResourceLink, ResourceLinkType, ResourceOptions } from '../../../../types/resources';
-import { addResourcePaths } from '../../../services/actions/collections-action-creators';
+import { addResourcePaths, removeResourcePaths } from '../../../services/actions/collections-action-creators';
 import { setSampleQuery } from '../../../services/actions/query-input-action-creators';
 import { GRAPH_URL } from '../../../services/graph-constants';
 import { getResourcesSupportedByVersion } from '../../../utils/resources/resources-filter';
@@ -60,6 +60,10 @@ const UnstyledResourceExplorer = (props: any) => {
  dispatch(addResourcePaths(getResourcePaths(item, version)));
  }
 
+ const removeFromCollection = (item: IResourceLink) => {
+ dispatch(removeResourcePaths(getResourcePaths(item, version)));
+ }
+
  const changeVersion = (_event: React.MouseEvent<HTMLElement>, checked?: boolean | undefined): void => {
  const selectedVersion = checked ? versions[1].key : versions[0].key;
  setVersion(selectedVersion);
@@ -85,6 +89,10 @@ const UnstyledResourceExplorer = (props: any) => {
  if (activity === ResourceOptions.ADD_TO_COLLECTION) {
  addToCollection(context);
  }
+
+ if (activity === ResourceOptions.REMOVE_FROM_COLLECTION) {
+ removeFromCollection(context);
+ }
  }
 
  const setQuery = (resourceLink: INavLink) => {
@@ -156,9 +164,10 @@ const UnstyledResourceExplorer = (props: any) => {
  (<Nav
  groups={items}
  styles={navStyles}
- onRenderLink={(link: any) => {
+ onRenderLink={link => {
  return <ResourceLink
- link={link}
+ link={link!}
+ version={version}
  resourceOptionSelected={(activity: string, context: unknown) =>
  resourceOptionSelected(activity, context)}
  classes={classes}

src/app/views/sidebar/resource-explorer/ResourceLink.tsx

@@ -1,19 +1,35 @@
-import { getId, getTheme, IconButton, ITooltipHostStyles, mergeStyleSets, TooltipHost } from '@fluentui/react';
-import { CSSProperties } from 'react';
-import { componentNames, eventTypes, telemetry } from '../../../../telemetry';
+import {
+ getId, getTheme, IconButton, INavLink,
+ ITooltipHostStyles, mergeStyleSets, TooltipHost
+} from '@fluentui/react';
+import { CSSProperties, useEffect } from 'react';
 
-import { ResourceOptions } from '../../../../types/resources';
+import { useAppSelector } from '../../../../store';
+import { componentNames, eventTypes, telemetry } from '../../../../telemetry';
+import { IResourceLink, ResourceOptions } from '../../../../types/resources';
 import { validateExternalLink } from '../../../utils/external-link-validation';
 import { getStyleFor } from '../../../utils/http-methods.utils';
 import { translateMessage } from '../../../utils/translate-messages';
+import { existsInCollection, setExisting } from './resourcelink.utils';
+
 interface IResourceLinkProps {
- link: any;
+ link: INavLink;
  resourceOptionSelected: Function;
  classes: any;
+ version: string;
 }
 
 const ResourceLink = (props: IResourceLinkProps) => {
- const { link: resourceLink, classes } = props;
+ const { classes, version } = props;
+ const { collections } = useAppSelector(state => state);
+ const link = props.link as IResourceLink;
+
+ const paths = collections?.find(k => k.isDefault)?.paths || [];
+ const resourceLink = { ...link };
+
+ useEffect(() => {
+ setExisting(resourceLink, existsInCollection(link, paths, version));
+ }, [paths])
 
  const showButtons = {
  div: {
@@ -44,14 +60,16 @@ const ResourceLink = (props: IResourceLinkProps) => {
  const buttonId = getId('targetButton');
  const documentButton = getId('documentButton');
  const documentButtonTooltip = getId('documentButtonTooltip');
+ const removeCollectionButton = getId('removeCollectionButton');
+ const removeCollectionButtonTooltip = getId('removeCollectionButtonTooltip');
 
  const iconButtonStyles = {
  root: { marginRight: 1, zIndex: 10 },
  menuIcon: { fontSize: 16, padding: 5 }
  };
 
  const methodButtonStyles: CSSProperties = {
- background: getStyleFor(resourceLink.method),
+ background: getStyleFor(resourceLink.method!),
  alignSelf: 'center',
  margin: 2,
  textTransform: 'uppercase'
@@ -77,6 +95,20 @@ const ResourceLink = (props: IResourceLinkProps) => {
  const calloutProps = { gapSpace: 0 };
  const hostStyles: Partial<ITooltipHostStyles> = { root: { display: 'inline-block' } };
 
+ setExisting(resourceLink, existsInCollection(link, paths, version));
+
+ const handleAddToCollectionClick = (event: any) => {
+ event.preventDefault();
+ event.stopPropagation();
+ props.resourceOptionSelected(ResourceOptions.ADD_TO_COLLECTION, link);
+ }
+
+ const handleRemoveFromCollectionClick = (event: any) => {
+ event.preventDefault();
+ event.stopPropagation();
+ props.resourceOptionSelected(ResourceOptions.REMOVE_FROM_COLLECTION, link);
+ }
+
  return <span className={linkStyle.link} tabIndex={0}>
  {resourceLink.method &&
  <span className={classes.badge} style={methodButtonStyles}>
@@ -91,23 +123,38 @@ const ResourceLink = (props: IResourceLinkProps) => {
  </span>
 
  <div>
- <TooltipHost
- content={translateMessage('Add to collection')}
- id={tooltipId}
+ {resourceLink.isInCollection ? <TooltipHost
+ content={translateMessage('remove')}
+ id={removeCollectionButtonTooltip}
  calloutProps={calloutProps}
  styles={hostStyles}
  >
  <IconButton
- ariaLabel={translateMessage('Add to collection')}
+ ariaLabel={translateMessage('remove')}
  role='button'
- id={buttonId}
- aria-describedby={tooltipId}
+ id={removeCollectionButton}
+ aria-describedby={removeCollectionButtonTooltip}
  styles={iconButtonStyles}
- menuIconProps={{ iconName: 'BoxAdditionSolid' }}
- onClick={() => props.resourceOptionSelected(ResourceOptions.ADD_TO_COLLECTION, resourceLink)}
+ menuIconProps={{ iconName: 'BoxSubtractSolid' }}
+ onClick={handleRemoveFromCollectionClick}
  />
- </TooltipHost>
-
+ </TooltipHost> :
+ <TooltipHost
+ content={translateMessage('Add to collection')}
+ id={tooltipId}
+ calloutProps={calloutProps}
+ styles={hostStyles}
+ >
+ <IconButton
+ ariaLabel={translateMessage('Add to collection')}
+ role='button'
+ id={buttonId}
+ aria-describedby={tooltipId}
+ styles={iconButtonStyles}
+ menuIconProps={{ iconName: 'BoxAdditionSolid' }}
+ onClick={handleAddToCollectionClick}
+ />
+ </TooltipHost>}
 
  {resourceLink.method &&
  <TooltipHost

src/app/views/sidebar/resource-explorer/resourcelink.utils.ts

@@ -0,0 +1,29 @@
+import { IResourceLink } from '../../../../types/resources';
+import { getUrlFromLink } from './resource-explorer.utils';
+
+export const existsInCollection = (link: IResourceLink, paths: IResourceLink[], version: string): boolean => {
+ if (link.method) {
+ const found = paths.find(p => p.key === `${link.key}-${version}` || p.key === link.key);
+ return !!found;
+ } else {
+ const resourceUrl = getUrlFromLink(link) + '/' + link.url.split('-').pop();
+ const pathsInCollection = paths.filter(p => p.url.startsWith(resourceUrl) &&
+ p.key!.split('-').pop() === version);
+ if (pathsInCollection.length > 0) {
+ const noneNodeLinks: IResourceLink[] = link.links.filter((k: IResourceLink) => k.type !== 'node');
+ const list: IResourceLink[] = [];
+ noneNodeLinks.forEach((element: IResourceLink) => {
+ if (pathsInCollection.find((k: IResourceLink) => k.key === element.key ||
+ k.key === `${element.key}-${version}`)) {
+ list.push(element);
+ }
+ });
+ return list.length === noneNodeLinks.length;
+ }
+ }
+ return false;
+};
+
+export function setExisting(item: any, value: boolean) {
+ item.isInCollection = value;
+}

src/types/resources.ts

@@ -42,7 +42,8 @@ export enum ResourceLinkType {
 }
 
 export enum ResourceOptions {
- ADD_TO_COLLECTION = 'add-to-collection'
+ ADD_TO_COLLECTION = 'add-to-collection',
+ REMOVE_FROM_COLLECTION = 'remove-from-collection'
 }
 
 export interface Collection {