change(ui) - metadata popup

frontend/app/components/Client/ProfileSettings/ProfileSettings.js

@@ -11,10 +11,11 @@ import { connect } from 'react-redux';
 @withPageTitle('Account - OpenReplay Preferences')
 @connect(state => ({
   account: state.getIn([ 'user', 'account' ]),
+  isEnterprise: state.getIn([ 'user', 'client', 'edition' ]) === 'ee',
 }))
 export default class ProfileSettings extends React.PureComponent {  
   render() {
-    const { account } = this.props;
+    const { account, isEnterprise } = this.props;
     return (
       <React.Fragment>
         <div className="flex items-center">
@@ -55,15 +56,19 @@ export default class ProfileSettings extends React.PureComponent {
           <div><TenantKey /></div>
         </div>
 
-        <div className="divider" />
+        { !isEnterprise && (
+          <>
+            <div className="divider" />
+            <div className="flex items-center">
+              <div className={ styles.left }>
+                <h4 className="text-lg mb-4">{ 'Data Collection' }</h4>
+                <div className={ styles.info }>{ 'Enables you to control how OpenReplay captures data on your organization’s usage to improve our product.' }</div>
+              </div>
+              <div><OptOut /></div>
+            </div>
+          </>
+        )}
 
-        <div className="flex items-center">
-          <div className={ styles.left }>
-            <h4 className="text-lg mb-4">{ 'Data Collection' }</h4>
-            <div className={ styles.info }>{ 'Enables you to control how OpenReplay captures data on your organization’s usage to improve our product.' }</div>
-          </div>
-          <div><OptOut /></div>
-        </div>
         { account.license && (
           <>
             <div className="divider" />

frontend/app/components/Session_/EventsBlock/Metadata/Metadata.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import { connect } from 'react-redux';
-import { NoContent, IconButton } from 'UI';
+import { NoContent, IconButton, Popup } from 'UI';
 import withToggle from 'HOCs/withToggle';
 import MetadataItem from './MetadataItem';
 import stl from './metadata.css';
@@ -9,19 +9,32 @@ export default connect(state => ({
   metadata: state.getIn([ 'sessions', 'current', 'metadata' ]),
 }))(function Metadata ({ metadata }) {
   const [ visible, setVisible ] = useState(false);
-  const toggle = useCallback(() => setVisible(v => !v), []);
+  const toggle = useCallback(() => metadata.size > 0 && setVisible(v => !v), []);
   return (
     <>
-      <IconButton
-        className="w-full"
-        onClick={ toggle }
-        icon="id-card"
-        plain
-        label="Metadata"
-        primaryText
-        active={ visible }
-        disabled={metadata.length === 0}
-        id="metadata-button"
+      <Popup
+        trigger={
+          <IconButton
+            className="w-full"
+            onClick={ toggle }
+            icon="id-card"
+            plain
+            label="Metadata"
+            primaryText
+            active={ visible }
+            id="metadata-button"
+          />
+        }
+        content={
+          <div className="p-2">
+            Metadata must be explicitly specified from the dashboard from <a href="/client/metadata" className="link">Preferences &#62; Metadata</a>.
+          </div>
+        }
+        on="click"
+        disabled={metadata.length > 0}
+        size="tiny"
+        inverted
+        position="top center"
       />
       { visible && 
         <div className={ stl.modal } >