data ref entry

frontend/src/metabase/reference/databases/FieldDetailContainer.jsx

@@ -19,13 +19,16 @@ import {
     getIsEditing
 } from '../selectors';
 
+import { getXrayEnabled } from 'metabase/xray/selectors'
+
 const mapStateToProps = (state, props) => ({
-    database: getDatabase(state, props),    
-    table: getTable(state, props),    
-    field: getField(state, props),    
+    database: getDatabase(state, props),
+    table: getTable(state, props),
+    field: getField(state, props),
     databaseId: getDatabaseId(state, props),
     isEditing: getIsEditing(state, props),
-    metadata: getMetadata(state, props)
+    metadata: getMetadata(state, props),
+    showXray: getXrayEnabled(state)
 });
 
 const mapDispatchToProps = {
@@ -43,7 +46,8 @@ export default class FieldDetailContainer extends Component {
         table: PropTypes.object.isRequired,
         field: PropTypes.object.isRequired,
         isEditing: PropTypes.bool,
-        metadata: PropTypes.object
+        metadata: PropTypes.object,
+        showXray: PropTypes.bool
     };
 
     async fetchContainerData(){
@@ -68,14 +72,15 @@ export default class FieldDetailContainer extends Component {
             database,
             table,
             field,
-            isEditing
+            isEditing,
+            showXray
         } = this.props;
 
         return (
             <SidebarLayout
                 className="flex-full relative"
                 style={ isEditing ? { paddingTop: '43px' } : {}}
-                sidebar={<FieldSidebar database={database} table={table} field={field}/>}
+                sidebar={<FieldSidebar database={database} table={table} field={field} showXray={showXray}/>}
             >
                 <FieldDetail {...this.props} />
             </SidebarLayout>

frontend/src/metabase/reference/databases/FieldSidebar.jsx

@@ -14,7 +14,8 @@ const FieldSidebar =({
     table,
     field,
     style,
-    className
+    className,
+    showXray
 }) =>
     <div className={cx(S.sidebar, className)} style={style}>
         <ul>
@@ -28,23 +29,26 @@ const FieldSidebar =({
                     placeholder="Data Reference"
                 />
             </div>
-                <SidebarItem key={`/reference/databases/${database.id}/tables/${table.id}/fields/${field.id}`} 
-                             href={`/reference/databases/${database.id}/tables/${table.id}/fields/${field.id}`} 
-                             icon="document" 
-                             name="Details" />
-                <SidebarItem key={`/xray/field/${field.id}/approximate`}
-                             href={`/xray/field/${field.id}/approximate`}
+                <SidebarItem key={`/reference/databases/${database.id}/tables/${table.id}/fields/${field.id}`}
+                             href={`/reference/databases/${database.id}/tables/${table.id}/fields/${field.id}`}
                              icon="document"
-                             name="X-Ray this Field" />
+                             name="Details" />
+                 { showXray && (
+                     <SidebarItem key={`/xray/field/${field.id}/approximate`}
+                         href={`/xray/field/${field.id}/approximate`}
+                         icon="beaker"
+                         name="X-Ray this Field" />
+                 )}
         </ul>
     </div>
 
 FieldSidebar.propTypes = {
-    database:          PropTypes.object,
+    database:       PropTypes.object,
     table:          PropTypes.object,
     field:          PropTypes.object,
     className:      PropTypes.string,
     style:          PropTypes.object,
+    showXray:       PropTypes.bool
 };
 
 export default pure(FieldSidebar);

frontend/src/metabase/reference/databases/TableDetailContainer.jsx

@@ -17,12 +17,15 @@ import {
     getIsEditing
 } from '../selectors';
 
+import { getXrayEnabled } from 'metabase/xray/selectors'
+
 
 const mapStateToProps = (state, props) => ({
-    database: getDatabase(state, props),    
-    table: getTable(state, props),    
+    database: getDatabase(state, props),
+    table: getTable(state, props),
     databaseId: getDatabaseId(state, props),
-    isEditing: getIsEditing(state, props)
+    isEditing: getIsEditing(state, props),
+    showXray: getXrayEnabled(state)
 });
 
 const mapDispatchToProps = {
@@ -38,7 +41,8 @@ export default class TableDetailContainer extends Component {
         database: PropTypes.object.isRequired,
         databaseId: PropTypes.number.isRequired,
         table: PropTypes.object.isRequired,
-        isEditing: PropTypes.bool
+        isEditing: PropTypes.bool,
+        showXray: PropTypes.bool
     };
 
     async fetchContainerData(){
@@ -62,14 +66,16 @@ export default class TableDetailContainer extends Component {
         const {
             database,
             table,
-            isEditing
+            isEditing,
+            showXray
         } = this.props;
 
         return (
             <SidebarLayout
                 className="flex-full relative"
                 style={ isEditing ? { paddingTop: '43px' } : {}}
-                sidebar={<TableSidebar database={database} table={table}/>}
+
+                sidebar={<TableSidebar database={database} table={table} showXray={showXray}/>}
             >
                 <TableDetail {...this.props} />
             </SidebarLayout>

frontend/src/metabase/reference/databases/TableSidebar.jsx

@@ -13,7 +13,8 @@ const TableSidebar = ({
     database,
     table,
     style,
-    className
+    className,
+    showXray
 }) =>
     <div className={cx(S.sidebar, className)} style={style}>
         <div className={S.breadcrumbs}>
@@ -27,30 +28,33 @@ const TableSidebar = ({
             />
         </div>
         <ol>
-            <SidebarItem key={`/reference/databases/${database.id}/tables/${table.id}`} 
-                         href={`/reference/databases/${database.id}/tables/${table.id}`} 
-                         icon="document" 
+            <SidebarItem key={`/reference/databases/${database.id}/tables/${table.id}`}
+                         href={`/reference/databases/${database.id}/tables/${table.id}`}
+                         icon="document"
                          name="Details" />
-            <SidebarItem key={`/reference/databases/${database.id}/tables/${table.id}/fields`} 
-                         href={`/reference/databases/${database.id}/tables/${table.id}/fields`} 
-                         icon="fields" 
+            <SidebarItem key={`/reference/databases/${database.id}/tables/${table.id}/fields`}
+                         href={`/reference/databases/${database.id}/tables/${table.id}/fields`}
+                         icon="fields"
                          name="Fields in this table" />
-            <SidebarItem key={`/reference/databases/${database.id}/tables/${table.id}/questions`} 
-                         href={`/reference/databases/${database.id}/tables/${table.id}/questions`} 
-                         icon="all" 
-                         name="Questions about this table" />
-            <SidebarItem key={`/xray/table/${table.id}/approximate`}
-                         href={`/xray/table/${table.id}/approximate`}
+            <SidebarItem key={`/reference/databases/${database.id}/tables/${table.id}/questions`}
+                         href={`/reference/databases/${database.id}/tables/${table.id}/questions`}
                          icon="all"
-                         name="X-Ray this table" />
+                         name="Questions about this table" />
+            { showXray && (
+                <SidebarItem key={`/xray/table/${table.id}/approximate`}
+                             href={`/xray/table/${table.id}/approximate`}
+                             icon="beaker"
+                             name="X-Ray this table" />
+            )}
         </ol>
     </div>
 
 TableSidebar.propTypes = {
-    database:          PropTypes.object,
+    database:       PropTypes.object,
     table:          PropTypes.object,
     className:      PropTypes.string,
     style:          PropTypes.object,
+    showXray:       PropTypes.bool
 };
 
 export default pure(TableSidebar);

frontend/test/xray/xray.integ.spec.js

@@ -25,6 +25,7 @@ import ActionsWidget from "metabase/query_builder/components/ActionsWidget";
 // settings related actions for testing xray administration
 import { INITIALIZE_SETTINGS, UPDATE_SETTING, REFRESH_SETTINGS_LIST } from "metabase/admin/settings/settings";
 import { LOAD_CURRENT_USER } from "metabase/redux/user";
+import { END_LOADING } from "metabase/reference/reference";
 
 import Icon from "metabase/components/Icon"
 import Toggle from "metabase/components/Toggle"
@@ -194,19 +195,59 @@ describe("xray integration tests", () => {
 
             const approximate = xraySettings.find('li').first()
 
-            //click(toggle)
             await store.waitForActions([UPDATE_SETTING])
 
-            store.debug()
-            //console.log(approximate)
-            //:w
-            //jconsole.log(app.debug())
+            expect(approximate.hasClass('text-brand')).toEqual(true)
 
-            //click(approximate)
+        })
 
+    })
+    describe("data reference entry", async () => {
+        it("should be possible to access an Xray from the data reference", async () => {
+            const store = await createTestStore()
 
-            expect(approximate.hasClass('text-brand')).toEqual(true)
+            store.pushPath('/reference/databases/1/tables/1')
+
+            const app = mount(store.getAppContainer())
+
+            await store.waitForActions([END_LOADING])
+
+            const xrayTableSideBarItem = app.find('.Icon.Icon-beaker')
+            expect(xrayTableSideBarItem.length).toEqual(1)
+
+            store.pushPath('/reference/databases/1/tables/1/fields/1')
+
+            await store.waitForActions([END_LOADING])
+            const xrayFieldSideBarItem = app.find('.Icon.Icon-beaker')
+            expect(xrayFieldSideBarItem.length).toEqual(1)
+        })
+
+        describe("xrays disabled", async () => {
+            beforeEach(async () => {
+                // turn off xrays
+                await SettingsApi.put({ key: 'enable-xrays' }, true)
+            })
+            it("should not be possible to access an Xray from the data reference if xrays are disabled", async () => {
+
+                const store = await createTestStore()
+
+                const app = mount(store.getAppContainer())
+
+                store.pushPath('/reference/databases/1/tables/1')
+
+                await store.waitForActions([END_LOADING])
+
+                console.log(store.getState().settings.values)
+
+                const xrayTableSideBarItem = app.find('.Icon.Icon-beaker')
+                expect(xrayTableSideBarItem.length).toEqual(0)
+
+                store.pushPath('/reference/databases/1/tables/1/fields/1')
 
+                await store.waitForActions([END_LOADING])
+                const xrayFieldSideBarItem = app.find('.Icon.Icon-beaker')
+                expect(xrayFieldSideBarItem.length).toEqual(0)
+            })
         })
     })