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,
+};