Update vc and group experience for user

src/webportal/src/app/components/copy-button.jsx

@@ -22,7 +22,7 @@ import { IconButton, FontSizes, TooltipHost } from 'office-ui-fabric-react';
 
 const COPIED_TOOLTIP_CLOSE_DELAY = 1000;
 
-const CopyButton = ({ value }) => {
+const CopyButton = ({ value, hideTooltip, callback }) => {
  const ref = useRef(null);
  return (
  <div>
@@ -35,9 +35,13 @@ const CopyButton = ({ value }) => {
  setTimeout(() => {
  ref.current && ref.current.dismiss();
  }, COPIED_TOOLTIP_CLOSE_DELAY);
+ if (callback) {
+ callback();
+ }
  }}
  />
  <TooltipHost
+ hidden={hideTooltip}
  content='Copied'
  componentRef={ref}
  delay={0}
@@ -51,6 +55,8 @@ const CopyButton = ({ value }) => {
 
 CopyButton.propTypes = {
  value: PropTypes.string.isRequired,
+ hideTooltip: PropTypes.bool,
+ callback: PropTypes.func,
 };
 
 export default CopyButton;

src/webportal/src/app/home/home/groupDetailDialog.jsx

@@ -0,0 +1,123 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { FontClassNames } from '@uifabric/styling';
+import c from 'classnames';
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+import {
+ Dialog,
+ DetailsList,
+ DetailsListLayoutMode,
+ SelectionMode,
+} from 'office-ui-fabric-react';
+import CopyButton from '../../components/copy-button';
+
+import t from '../../components/tachyons.scss';
+
+const CopySucceeded = props =>
+ props.copied ? <p style={{ color: 'green' }}>Copied succeeded!</p> : null;
+
+CopySucceeded.propTypes = {
+ copied: PropTypes.bool,
+};
+
+export default function GroupDetailDialog(props) {
+ const { groupDetails, setGroupDetails } = props;
+ const [copiedName, setCopiedName] = useState(null);
+
+ return (
+ <Dialog
+ minWidth='50%'
+ hidden={groupDetails.hideDialog}
+ onDismiss={() => {
+ setGroupDetails({ ...groupDetails, ...{ hideDialog: true } });
+ }}
+ styles={{ borderStyle: 'solid' }}
+ dialogContentProps={{
+ title: `Granted group of VC '${groupDetails.vc.name}'`,
+ }}
+ >
+ <DetailsList
+ columns={[
+ {
+ key: 'name',
+ minWidth: 100,
+ maxWidth: 150,
+ name: 'Group name',
+ isResizable: true,
+ onRender(group) {
+ return (
+ <div
+ className={c(
+ t.flex,
+ t.itemsCenter,
+ t.h100,
+ FontClassNames.medium,
+ )}
+ >
+ {group.groupname}
+ </div>
+ );
+ },
+ },
+ {
+ key: 'alias',
+ minWidth: 180,
+ maxWidth: 250,
+ name: 'Group alias',
+ isResizable: true,
+ onRender(group) {
+ return (
+ <div className={c(t.flex, t.itemsCenter, t.h100)}>
+ <div className={FontClassNames.medium}>
+ {group.externalName}
+ </div>
+ <div className={c(t.flex, t.itemsCenter, t.h100)}>
+ <CopyButton
+ value={group.externalName}
+ hideTooltip={true}
+ callback={() => {
+ setCopiedName(group.externalName);
+ }}
+ />
+ <CopySucceeded copied={copiedName === group.externalName} />
+ </div>
+ </div>
+ );
+ },
+ },
+ {
+ key: 'description',
+ minWidth: 180,
+ name: 'Description',
+ isResizable: true,
+ onRender(group) {
+ return (
+ <div
+ className={c(
+ t.flex,
+ t.itemsCenter,
+ t.h100,
+ FontClassNames.medium,
+ )}
+ >
+ {group.description}
+ </div>
+ );
+ },
+ },
+ ]}
+ disableSelectionZone
+ items={groupDetails.groups}
+ layoutMode={DetailsListLayoutMode.justified}
+ selectionMode={SelectionMode.none}
+ />
+ </Dialog>
+ );
+}
+
+GroupDetailDialog.propTypes = {
+ groupDetails: PropTypes.object.isRequired,
+ setGroupDetails: PropTypes.func.isRequired,
+};