@urbanos/react-discovery-ui 2.1.43

package/lib/components/dataset-api-doc/api-example.scss

@@ -0,0 +1,84 @@
+@import '../../styles/mixins.scss';
+@import '../../styles/variables.scss';
+
+api-example {
+  .example-container {
+    justify-content: space-between;
+    padding: 1.5rem;
+  }
+
+  .example-code {
+    border-radius: 5px;
+    border: $medium-grey solid 1px;
+    background-color: $super-light-grey;
+    word-wrap: break-word;
+    word-break: break-word;
+    display: table;
+    width: 100%
+  }
+
+  .example-element {
+    display: table-cell;
+    padding: 10px;
+    vertical-align: middle;
+  }
+
+  .curl {
+    width: 3.5rem;
+    background-color: $light-blue;
+    color: white;
+    text-align: center;
+  }
+
+  .curl:hover {
+    background-color: $almost-black
+  }
+
+  .curl:active {
+    background-color: $dark-grey
+  }
+
+  .secret-curl-field {
+    display: none
+  }
+
+  .example-title {
+    font-weight: bold;
+    font-size: 1.3rem;
+  }
+
+  .example-header {
+    font-weight: bold;
+    margin-top: 2rem
+  }
+
+  .parameter-example {
+    white-space: nowrap;
+  }
+
+  .example-table {
+    border-collapse: collapse;
+    width: 100%
+  }
+
+  .example-table td {
+    padding: 5px
+  }
+
+  .example-table td,
+  th {
+    border: 1px solid $light-grey;
+  }
+
+  .example-body {
+    padding-top: 1.5rem
+  }
+
+  .example-description {
+    margin-bottom: 0.5rem
+  }
+
+  .required-marker {
+    text-align: center;
+  }
+}

package/lib/components/dataset-api-doc/api-example.test.js

@@ -0,0 +1,88 @@
+import { shallow, mount } from 'enzyme'
+import ApiExample from './api-example'
+
+describe('api example', () => {
+  it('renders parameters and headers in tables', () => {
+    const params = [
+      {
+        name: 'bob',
+        default: 'smith',
+        description: 'a guy named bob',
+        example: 'robert'
+      },
+      {
+        name: 'bill',
+        default: 'johnson',
+        description: 'a guy named bill',
+        example: 'william'
+      }
+    ]
+
+    const wrapper = shallow(<ApiExample params={params} />)
+
+    const cells = wrapper.find('td')
+
+    expect(cells.length).toBe(12)
+    expect(cells.at(0).text()).toBe('bob')
+    expect(cells.at(1).text()).toBe('smith')
+    expect(cells.at(2).text()).toBe('robert')
+    expect(cells.at(3).text()).toBe('a guy named bob')
+    expect(cells.at(4).text()).toBe('bill')
+    expect(cells.at(5).text()).toBe('johnson')
+    expect(cells.at(6).text()).toBe('william')
+    expect(cells.at(7).text()).toBe('a guy named bill')
+    expect(cells.at(8).text()).toBe('api_key')
+    expect(cells.at(9).text()).toBe('No')
+    expect(cells.at(10).text()).toBe('')
+    expect(cells.at(11).text()).toBe('Include your unique api key as the value. You can generate your key by navigating to the “API Key” item on the “My Account” menu.')
+  })
+
+  it('does not render a table of params if no params are provided', () => {
+    const wrapper = shallow(<ApiExample />)
+    const parameters = wrapper.find('.example-parameters')
+
+    expect(parameters.length).toBe(0)
+  })
+
+  it('renders examples as formatted code with descriptions', () => {
+    const examples = [
+      {
+        description: 'This is how we query a thing',
+        body: 'select * from thing'
+      },
+      {
+        description: 'This is how we query a bob with another bob',
+        body: 'select * from bob join bobi using (bob_id)'
+      }
+    ]
+
+    const wrapper = mount(<ApiExample examples={examples} />)
+
+    const exampleDivs = wrapper.find('div.example-body')
+
+    expect(exampleDivs.length).toBe(2)
+    expect(exampleDivs.at(0).find('.example-description').text()).toBe('This is how we query a thing')
+    expect(exampleDivs.at(0).find('code').text()).toBe('select * from thing')
+    expect(exampleDivs.at(1).find('.example-description').text()).toBe('This is how we query a bob with another bob')
+    expect(exampleDivs.at(1).find('code').text()).toBe('select * from bob join bobi using (bob_id)')
+  })
+
+  it('creates a curl command for each example', () => {
+    const examples = [
+      {
+        description: 'This is how we query a thing',
+        body: 'select * from thing'
+      },
+      {
+        description: 'This is how we query a bob with another bob',
+        body: 'select * from bob join bobi using (bob_id)'
+      }
+    ]
+
+    const wrapper = mount(<ApiExample examples={examples} url='localhost:5000/api' />)
+    const curlDivs = wrapper.find('div.secret-curl-field')
+    expect(curlDivs.length).toBe(2)
+    expect(curlDivs.at(0).text()).toBe("curl -X POST 'localhost:5000/api' -H 'Content-Type: text/plain' -H 'api_key: USER_API_KEY_HERE' -d 'select * from thing'")
+    expect(curlDivs.at(1).text()).toBe("curl -X POST 'localhost:5000/api' -H 'Content-Type: text/plain' -H 'api_key: USER_API_KEY_HERE' -d 'select * from bob join bobi using (bob_id)'")
+  })
+})

package/lib/components/dataset-api-doc/dataset-api-doc.js

@@ -0,0 +1,117 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./dataset-api-doc.scss");
+var _collapsableBox = _interopRequireDefault(require("../../components/collapsable-box"));
+var _apiExample = _interopRequireDefault(require("./api-example"));
+var _fileTypeUtils = require("../../utils/file-type-utils");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var simpleApiParams = [{
+  name: 'columns',
+  default: '*',
+  description: 'A list of columns from the dataset to be included in the query.',
+  example: 'column1,column2,column3'
+}, {
+  name: 'where',
+  default: '',
+  description: 'A set of conditions to filter rows by. Multiple conditions can be added, separated by AND or OR.',
+  example: "column1='a value' OR column1='another value'"
+}, {
+  name: 'groupBy',
+  default: '',
+  description: 'A column (or comma-separated list of columns) to group the results by.',
+  example: 'column1'
+}, {
+  name: 'orderBy',
+  default: '',
+  description: "A column (or comma separated list of columns) to order the results by and one of 'ASC' or 'DESC' to determine the direction of each.",
+  example: 'column1 ASC, column2 DESC'
+}, {
+  name: 'limit',
+  default: '',
+  description: 'A whole number limiting the total rows returned. The API does not guarantee the same list of rows every time when limited this way.',
+  example: '200'
+}, {
+  name: '_format',
+  default: 'CSV',
+  description: 'The format of data returned by a query. ',
+  example: 'json'
+}];
+var freestyleApiParams = [{
+  name: '_format',
+  default: 'CSV',
+  description: 'The format of data returned by a query.',
+  example: 'json'
+}];
+var apiHeaders = [{
+  name: 'api_key',
+  default: '',
+  description: 'Include your unique api key as the value. You can generate your key by navigating to the “API Key” item on the “My Account” menu.',
+  required: window.REQUIRE_API_KEY === 'true'
+}];
+function getFreestyleApiExamples(dataset) {
+  return [{
+    body: "SELECT * FROM ".concat(dataset.systemName, " LIMIT 200"),
+    description: 'Get 200 rows with all columns of data from the dataset.'
+  }, {
+    body: "SELECT ".concat(dataset.schema[0].name, " FROM ").concat(dataset.systemName, " WHERE ").concat(dataset.schema[0].name, " IS NOT NULL LIMIT 200"),
+    description: "Get only the column ".concat(dataset.schema[0].name, " from the dataset where ").concat(dataset.schema[0].name, " contains data.")
+  }, {
+    body: 'SELECT t1.example_column, t2.joined_column FROM example_dataset_one t1 INNER JOIN example_dataset_two t2 ON t1.example_id = t2.example_id LIMIT 200',
+    description: 'Get rows from two example datasets where the example_id columns match. Get example_column from one and joined_column from the other.'
+  }];
+}
+function freestyleDescription() {
+  return /*#__PURE__*/React.createElement("div", null, "This query supports the full ANSI SQL syntax, and only selects from the tables specified in the query.", /*#__PURE__*/React.createElement("br", null), "The query to run must be submitted as plain text in the body of the request.", /*#__PURE__*/React.createElement("br", null), "Documentation can be found at:", /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("a", {
+    role: "link",
+    className: "primary-color",
+    href: "https://en.wikipedia.org/wiki/SQL_syntax",
+    target: "_blank"
+  }, "SQL Syntax (Wikipedia)")), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("a", {
+    role: "link",
+    className: "primary-color",
+    href: "https://www.w3schools.com/sql/sql_quickref.asp",
+    target: "_blank"
+  }, "Quick Reference (W3 Schools)")), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("a", {
+    role: "link",
+    className: "primary-color",
+    href: "https://prestodb.github.io/docs/current/sql/select.html",
+    target: "_blank"
+  }, "PrestoDB Specific Syntax"))));
+}
+function renderHeader() {
+  return /*#__PURE__*/React.createElement("div", null, "Access Operating System data with supported queries. All supported clauses follow standard ANSI SQL standards.");
+}
+function renderExamples(dataset) {
+  var format = (0, _fileTypeUtils.getDefaultFormat)(dataset);
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_apiExample.default, {
+    title: "Simple query",
+    descriptionHtml: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, "This query selects all columns from the dataset, limited to 200 rows returned."), /*#__PURE__*/React.createElement("div", null, "If this dataset is private, or the system is in \"API Key Required\" mode, you'll need to include your key in the value of the \"api_key\" header."), /*#__PURE__*/React.createElement("div", null, "Additional examples of API key usage are in the curl examples below.")),
+    url: "".concat(window.DISC_API_URL, "/api/v1/organization/").concat(dataset.organization.name, "/dataset/").concat(dataset.name, "/query?limit=200&_format=").concat(format),
+    action: "GET",
+    params: simpleApiParams,
+    headers: apiHeaders
+  }), /*#__PURE__*/React.createElement(_apiExample.default, {
+    title: "Freestyle query",
+    descriptionHtml: freestyleDescription(),
+    url: "".concat(window.DISC_API_URL, "/api/v1/query?_format=").concat(format),
+    action: "POST",
+    params: freestyleApiParams,
+    examples: getFreestyleApiExamples(dataset),
+    headers: apiHeaders
+  }));
+}
+var _default = exports.default = function _default(_ref) {
+  var expanded = _ref.expanded,
+    dataset = _ref.dataset;
+  return /*#__PURE__*/React.createElement("dataset-api-doc", {
+    class: "dataset-api-doc"
+  }, /*#__PURE__*/React.createElement(_collapsableBox.default, {
+    title: "API Examples",
+    headerHtml: renderHeader(),
+    expanded: expanded
+  }, renderExamples(dataset)));
+};

package/lib/components/dataset-api-doc/dataset-api-doc.scss

@@ -0,0 +1,8 @@
+@import '../../styles/mixins.scss';
+@import '../../styles/variables.scss';
+
+dataset-api-doc {
+  a {
+    @include sub-link();
+  }
+}

package/lib/components/dataset-api-doc/dataset-api-doc.test.js

@@ -0,0 +1,42 @@
+import { render } from 'enzyme'
+import DatasetApiDoc from './dataset-api-doc'
+
+describe('dataset api doc ', () => {
+  const dataset = {
+    id: 'coda_stuff',
+    name: 'data_name',
+    fileTypes: ['CSV'],
+    systemName: 'test__dataset',
+    organization: { name: 'coda_name' },
+    schema: [{ name: 'id' }]
+  }
+  let subject
+
+  beforeEach(() => {
+    const matchMedia = jest.fn()
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: jest.fn().mockImplementation(query => ({
+        matches: true
+      }))
+    })
+    subject = render(<DatasetApiDoc dataset={dataset} />)
+  })
+
+  it('renders the example url with the dataset id', () => {
+    expect(subject.find('.example-code').text()).toMatch('/api/v1/organization/coda_name/dataset/data_name/query?limit=200&_format=csv')
+  })
+
+  it('renders the freestyle query example body with the correct table and column name', () => {
+    expect(subject.text()).toContain(`SELECT ${dataset.schema[0].name} FROM ${dataset.systemName}`)
+  })
+
+  describe('with gtfs format', () => {
+    test('the example url maps _format to json', () => {
+      const gtfsDataset = { ...dataset, ...{ fileTypes: ['GTFS'] } }
+      subject = render(<DatasetApiDoc dataset={gtfsDataset} />)
+
+      expect(subject.find('.example-code').text()).toMatch('/api/v1/organization/coda_name/dataset/data_name/query?limit=200&_format=json')
+    })
+  })
+})

package/lib/components/dataset-api-doc/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _datasetApiDoc = _interopRequireDefault(require("./dataset-api-doc"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _datasetApiDoc.default;

package/lib/components/dataset-details/dataset-details.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./dataset-details.scss");
+var _lodash = _interopRequireDefault(require("lodash"));
+var _reactSanitizedHtml = _interopRequireDefault(require("react-sanitized-html"));
+var _utils = require("../../utils");
+var _callToActionButton = _interopRequireDefault(require("../generic-elements/call-to-action-button"));
+var _fileTypeUtils = require("../../utils/file-type-utils");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var DatasetDetails = function DatasetDetails(_ref) {
+  var dataset = _ref.dataset,
+    downloadUrl = _ref.downloadUrl;
+  if (!dataset) {
+    return /*#__PURE__*/React.createElement("div", null);
+  }
+  return /*#__PURE__*/React.createElement("dataset-details", {
+    class: "dataset-details"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "dataset-details-header"
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-testid": "dataset-title",
+    className: "name"
+  }, /*#__PURE__*/React.createElement("h1", null, dataset.title)), /*#__PURE__*/React.createElement("div", {
+    className: "buttons"
+  }, /*#__PURE__*/React.createElement(_callToActionButton.default, {
+    url: downloadUrl,
+    format: (0, _fileTypeUtils.getDefaultFormat)(dataset),
+    filename: dataset.id,
+    sourceType: dataset.sourceType,
+    sourceUrl: dataset.sourceUrl
+  }), /*#__PURE__*/React.createElement("button", {
+    className: "print-api-docs-button call-to-action-button",
+    onClick: function onClick() {
+      return window.print();
+    }
+  }, "Print API Docs"))), /*#__PURE__*/React.createElement("div", {
+    "data-testid": "dataset-description",
+    className: "description"
+  }, /*#__PURE__*/React.createElement(_reactSanitizedHtml.default, {
+    allowedAttributes: {
+      a: ['href']
+    },
+    allowedTags: ['b', 'a', 'ul', 'li', 'ol', 'p', 'em', 'i'],
+    html: dataset.description
+  })), !_lodash.default.isEmpty(dataset.keywords) && /*#__PURE__*/React.createElement("div", {
+    "data-testid": "dataset-keywords",
+    className: "keywords"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "keyword-label"
+  }, "KEYWORDS"), dataset.keywords.map(createKeyword)));
+};
+var createKeyword = function createKeyword(name) {
+  return /*#__PURE__*/React.createElement("a", {
+    key: "dataset-keyword-".concat(name),
+    className: "keyword",
+    role: "link",
+    href: "/?".concat(_utils.QueryStringBuilder.createFilterQueryString('keywords', name))
+  }, name);
+};
+var _default = exports.default = DatasetDetails;

package/lib/components/dataset-details/dataset-details.scss

@@ -0,0 +1,58 @@
+@import "../../styles/mixins.scss";
+@import "../../styles/variables.scss";
+
+dataset-details {
+  @include custom-element();
+  padding-bottom: 1rem;
+
+  .dataset-details-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .buttons {
+    display: flex;
+  }
+
+  .name {
+    @include header();
+    margin-bottom: 0.5rem;
+    h1 {
+      font-size: 20px
+    }
+  }
+
+  .description {
+    margin-bottom: 0.75rem;
+  }
+
+  .resources {
+    margin-bottom: 0.75rem;
+  }
+
+  .keywords {
+    @include flex-row();
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    margin-bottom: 0.75rem;
+  }
+
+  .keyword-label {
+    font-weight: bold;
+    margin-right: 0.75rem;
+  }
+
+  .keyword {
+    @include button(white);
+    color: $dark-grey;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid $light-grey;
+    border-radius: 1.5rem;
+    margin-bottom: 0.5rem;
+
+    &:not(:last-child) {
+      margin-right: 0.5rem;
+    }
+  }
+}

package/lib/components/dataset-details/dataset-details.test.js

@@ -0,0 +1,38 @@
+import { shallow } from 'enzyme'
+import DatasetDetails from './dataset-details'
+
+describe('dataset details', () => {
+  let subject
+  jest.spyOn(window, 'print').mockReturnValue()
+
+  test('card to render text based on props', () => {
+    subject = shallow(<DatasetDetails dataset={{ keywords: ['COTA', 'Transit Stops'] }} />)
+    expect(subject.find('.keyword').length).toEqual(2)
+  })
+
+  test('card does not render keywords when not provided', () => {
+    subject = shallow(<DatasetDetails dataset={{ keywords: null }} />)
+    expect(subject.find('.keyword').length).toEqual(0)
+  })
+
+  test('card does not render keywords label when empty', () => {
+    subject = shallow(<DatasetDetails dataset={{ keywords: [] }} />)
+    expect(subject.find('.keyword-label').length).toEqual(0)
+  })
+
+  test('keywords link to filtered search', () => {
+    subject = shallow(<DatasetDetails dataset={{ keywords: ['COTA', 'Transit Stops'], id: '12345' }} />)
+    expect(subject.find('.keyword').filterWhere(n => { return n.text() === 'COTA' }).prop('href')).toMatch(encodeURI('/?facets[keywords][]=COTA'))
+  })
+
+  test('button to download api docs', () => {
+    subject = shallow(<DatasetDetails dataset={{ keywords: [] }} />)
+    expect(subject.find('.print-api-docs-button').length).toEqual(1)
+  })
+
+  test('click print button to print', () => {
+    subject = shallow(<DatasetDetails dataset={{ keywords: [] }} />)
+    subject.find('.print-api-docs-button').simulate('click')
+    expect(window.print).toHaveBeenCalled()
+  })
+})

package/lib/components/dataset-details/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _datasetDetails = _interopRequireDefault(require("./dataset-details"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _datasetDetails.default;

package/lib/components/dataset-dictionary/dataset-dictionary.js

@@ -0,0 +1,127 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+require("./dataset-dictionary.scss");
+var _reactTable = _interopRequireDefault(require("react-table"));
+require("react-table/react-table.css");
+var _collapsableBox = _interopRequireDefault(require("../../components/collapsable-box"));
+var _tooltip = _interopRequireDefault(require("../tooltip"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var expanderWidth = 35;
+var expandedArrow = "\u25BE";
+var collapsedArrow = "\u25B8";
+var renderFieldNameCell = function renderFieldNameCell(schemaElement) {
+  return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    text: schemaElement.value
+  });
+};
+var renderTypeCell = function renderTypeCell(schemaElement) {
+  return /*#__PURE__*/_react.default.createElement("div", null, schemaElement.value === 'list' ? "list of ".concat(schemaElement.original.itemType) : schemaElement.value);
+};
+var isMap = function isMap(schemaElement) {
+  return schemaElement.type === 'map' || schemaElement.itemType === 'map';
+};
+var renderExpander = function renderExpander(_ref) {
+  var isExpanded = _ref.isExpanded,
+    schemaElement = _ref.original;
+  var content = '';
+  if (isMap(schemaElement)) {
+    content = isExpanded ? expandedArrow : collapsedArrow;
+  }
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "expander"
+  }, content);
+};
+var renderSubTable = function renderSubTable(_ref2) {
+  var schemaElement = _ref2.original;
+  return isMap(schemaElement) ? /*#__PURE__*/_react.default.createElement(SchemaTable, {
+    schema: schemaElement.subSchema,
+    parentFieldName: schemaElement.name,
+    style: {
+      marginLeft: "".concat(expanderWidth, "px")
+    }
+  }) : /*#__PURE__*/_react.default.createElement("span", null);
+};
+var columns = [{
+  Header: 'Field',
+  accessor: 'name',
+  headerClassName: 'table-header',
+  width: 240,
+  className: 'field-name-cell',
+  Cell: renderFieldNameCell
+}, {
+  Header: 'Type',
+  accessor: 'type',
+  headerClassName: 'table-header',
+  width: 120,
+  Cell: renderTypeCell
+}, {
+  Header: 'Description',
+  accessor: 'description',
+  headerClassName: 'table-header',
+  className: 'description-cell'
+}];
+var isEmpty = function isEmpty(schema) {
+  return !schema || schema.length < 1;
+};
+var SchemaTable = function SchemaTable(_ref3) {
+  var schema = _ref3.schema,
+    _ref3$parentFieldName = _ref3.parentFieldName,
+    parentFieldName = _ref3$parentFieldName === void 0 ? '' : _ref3$parentFieldName,
+    style = _ref3.style;
+  if (schema) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "dataset-schema-table ".concat(parentFieldName)
+    }, /*#__PURE__*/_react.default.createElement(_reactTable.default, {
+      style: style,
+      data: schema,
+      columns: columns,
+      defaultPageSize: schema.length,
+      className: "-highlight",
+      showPagination: false,
+      sortable: true,
+      ExpanderComponent: renderExpander,
+      SubComponent: renderSubTable,
+      expanderDefaults: {
+        width: expanderWidth
+      }
+    }));
+  } else {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "error"
+    }, "Schema information not found. Contact the data curator.");
+  }
+};
+var viewLink = function viewLink(datasetId) {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "view-link"
+  }, /*#__PURE__*/_react.default.createElement("a", {
+    href: "".concat(window.DISC_API_URL, "/api/v1/dataset/").concat(datasetId, "/dictionary"),
+    target: "_blank",
+    role: "link"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "view-text"
+  }, "View as JSON")));
+};
+var _default = exports.default = function _default(_ref4) {
+  var schema = _ref4.schema,
+    datasetId = _ref4.datasetId,
+    _ref4$expanded = _ref4.expanded,
+    expanded = _ref4$expanded === void 0 ? true : _ref4$expanded;
+  var title = 'Data Dictionary';
+  if (isEmpty(schema)) {
+    title = title + ' Unavailable';
+  }
+  return /*#__PURE__*/_react.default.createElement("dataset-dictionary", {
+    class: "dataset-dictionary"
+  }, /*#__PURE__*/_react.default.createElement(_collapsableBox.default, {
+    title: title,
+    expanded: expanded
+  }, !isEmpty(schema) && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(SchemaTable, {
+    schema: schema
+  }), viewLink(datasetId))));
+};