✨ Split widget layout

lang/en-US.json

@@ -1133,9 +1133,9 @@
   "Notification.type.revisionCount": "Revision Count",
   "Notification.type.system": "System",
   "Notification.type.team": "Team",
-  "OSMElementData.controls.viewOSM.label": "View OSM",
-  "OSMElementData.elementFetchFailed": "Failed to fetch tags for {element}",
-  "OSMElementData.noOSMElements": "No OSM elements identified in task",
+  "OSMElementTags.controls.viewOSM.label": "View OSM",
+  "OSMElementTags.elementFetchFailed": "Failed to fetch tags for {element}",
+  "OSMElementTags.noOSMElements": "No OSM elements identified in task",
   "OSMElementHistory.controls.viewOSM.label": "View OSM",
   "OSMElementHistory.elementFetchFailed": "Failed to fetch history for {element}",
   "OSMElementHistory.noComment": "(no changeset comment)",
@@ -1727,8 +1727,8 @@
   "Widgets.LeaderboardWidget.mapper": "Mappers",
   "Widgets.LeaderboardWidget.reviewer": "Reviewers",
   "Widgets.LeaderboardWidget.title": "Leaderboard",
-  "Widgets.OSMDataWidget.label": "OSM Data",
-  "Widgets.OSMDataWidget.title": "OSM Data",
+  "Widgets.OSMElementTagsWidget.label": "OSM Element Tags",
+  "Widgets.OSMElementTagsWidget.title": "OSM Element Tags",
   "Widgets.OSMHistoryWidget.label": "OSM History",
   "Widgets.OSMHistoryWidget.title": "OSM History",
   "Widgets.ProjectAboutWidget.content": "Projects serve as a means of grouping related challenges together. All\nchallenges must belong to a project.\n\nYou can create as many projects as needed to organize your challenges, and can\ninvite other MapRoulette users to help manage them with you.\n\nProjects must be set to Discoverable before any challenges within them will\nshow up in public browsing or searching.",

src/components/OSMElementData/Messages.js → src/components/OSMElementTags/Messages.js

@@ -1,21 +1,21 @@
 import { defineMessages } from 'react-intl'
 
 /**
- * Internationalized messages for use with OSMElementData
+ * Internationalized messages for use with OSMElementTags
  */
 export default defineMessages({
   noOSMElements: {
-    id: "OSMElementData.noOSMElements",
+    id: "OSMElementTags.noOSMElements",
     defaultMessage: "No OSM elements identified in task",
   },
 
   elementFetchFailed: {
-    id: "OSMElementData.elementFetchFailed",
+    id: "OSMElementTags.elementFetchFailed",
     defaultMessage: "Failed to fetch tags for {element}",
   },
 
   viewOSMLabel: {
-    id: "OSMElementData.controls.viewOSM.label",
+    id: "OSMElementTags.controls.viewOSM.label",
     defaultMessage: "View OSM",
   },
 })

src/components/OSMElementData/OSMElementData.jsx → src/components/OSMElementTags/OSMElementTags.jsx

@@ -1,4 +1,4 @@
-import { Fragment, useState, useEffect, useMemo } from 'react'
+import { Fragment, useState, useMemo } from 'react'
 import PropTypes from 'prop-types'
 import { FormattedMessage, injectIntl }
        from 'react-intl'
@@ -13,12 +13,12 @@ import Dropdown from '../Dropdown/Dropdown'
 import SvgSymbol from '../SvgSymbol/SvgSymbol'
 import BusySpinner from '../BusySpinner/BusySpinner'
 import messages from './Messages'
-import './OSMElementData.scss'
+import './OSMElementTags.scss'
 import { useQuery } from 'react-query'
 
 const OSM_SERVER = window.env.REACT_APP_OSM_SERVER
 
-const OSMElementData = props => {
+const OSMElementTags = props => {
   const { fetchOSMElement, taskBundle, task: primaryTask } = props
 
   const featureIds = useMemo(() => {
@@ -32,33 +32,38 @@ const OSMElementData = props => {
     })))
   }, [primaryTask, taskBundle])
 
-  const [selectedFeatureId, setSelectedFeatureId] = useState(featureIds[0] ?? null)
-
-  if (!selectedFeatureId) {
+  if (featureIds.length === 0) {
     return (
       <FormattedMessage {...messages.noOSMElements} />
     )
   }
 
+  const [selectedFeatureId, setSelectedFeatureId] = useState(featureIds[0])
+  const widgetLayoutProps = { featureIds, selectedFeatureId, setSelectedFeatureId }
+
   const { isLoading, isError, error: fetchErr, data: element } = useQuery({
     queryKey: ['OSMElement', selectedFeatureId],
     queryFn: () => fetchOSMElement(selectedFeatureId)
   })
 
   if (isLoading) {
     return (
-      <div className="mr-flex mr-justify-center mr-items-center mr-w-full mr-h-full">
-        <BusySpinner />
-      </div>
+      <WidgetLayout {...widgetLayoutProps}>
+        <div className="mr-flex mr-justify-center mr-items-center mr-w-full mr-h-full">
+          <BusySpinner />
+        </div>
+      </WidgetLayout>
     )
   }
 
   if (isError) {
     return (
-      <div className="mr-flex mr-flex-col mr-text-red-light">
-        <FormattedMessage {...messages.elementFetchFailed} values={{element: selectedFeatureId}} />
-        {fetchErr && fetchErr.defaultMessage && <FormattedMessage {...fetchErr} />}
-      </div>
+      <WidgetLayout {...widgetLayoutProps}>
+        <div className="mr-flex mr-flex-col mr-text-red-light">
+          <FormattedMessage {...messages.elementFetchFailed} values={{element: selectedFeatureId}} />
+          {fetchErr && fetchErr.defaultMessage && <FormattedMessage {...fetchErr} />}
+        </div>
+      </WidgetLayout>
     )
   }
 
@@ -68,35 +73,41 @@ const OSMElementData = props => {
   )
 
   return (
-    <div className="mr-mr-4">
-      <div className="mr-flex mr-justify-between mr-links-green-lighter mr-mb-4">
-        <FeatureSelectionDropdown
-          featureIds={featureIds}
-          selectedFeatureId={selectedFeatureId}
-          selectFeatureId={setSelectedFeatureId}
-        />
-        <a
-          className="mr-button mr-button--xsmall"
-          href={`${OSM_SERVER}/${selectedFeatureId}`}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <FormattedMessage {...messages.viewOSMLabel} />
-        </a>
-      </div>
+    <WidgetLayout {...widgetLayoutProps}>
       <dl className='tag-list'>
         {tagsValues}
       </dl>
-    </div>
+    </WidgetLayout>
   )
 }
 
-OSMElementData.propTypes = {
+OSMElementTags.propTypes = {
   task: PropTypes.object,
   taskBundle: PropTypes.object,
   fetchOSMElement: PropTypes.func.isRequired,
 }
 
+const WidgetLayout = props =>(
+  <div className="mr-mr-4">
+    <div className="mr-flex mr-justify-between mr-links-green-lighter mr-mb-4">
+      <FeatureSelectionDropdown
+        featureIds={props.featureIds}
+        selectedFeatureId={props.selectedFeatureId}
+        selectFeatureId={props.setSelectedFeatureId}
+      />
+      <a
+        className="mr-button mr-button--xsmall"
+        href={`${OSM_SERVER}/${props.selectedFeatureId}`}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <FormattedMessage {...messages.viewOSMLabel} />
+      </a>
+    </div>
+    {props.children}
+  </div>
+)
+
 const FeatureSelectionDropdown = props => {
   if (props.featureIds.length === 0) {
     return null
@@ -129,13 +140,13 @@ const FeatureSelectionDropdown = props => {
           </a>
         </Fragment>
       )}
-      dropdownContent={() =>
-        <ol className="mr-list-dropdown">
+      dropdownContent={({closeDropdown}) =>
+        <ol className="mr-list-dropdown" onClick={closeDropdown}>
           {menuItems}
         </ol>
       }
     />
   );
 }
 
-export default injectIntl(OSMElementData)
+export default injectIntl(OSMElementTags)

src/components/Widgets/OSMElementTags/Messages.js

@@ -0,0 +1,16 @@
+import { defineMessages } from 'react-intl'
+
+/**
+ * Internationalized messages for use with OSMElementTagsWidget
+ */
+export default defineMessages({
+  label: {
+    id: "Widgets.OSMElementTagsWidget.label",
+    defaultMessage: "OSM Element Tags",
+  },
+
+  title: {
+    id: "Widgets.OSMElementTagsWidget.title",
+    defaultMessage: "OSM Element Tags",
+  },
+})

src/components/Widgets/OSMDataWidget/OSMDataWidget.jsx → src/components/Widgets/OSMElementTags/OSMElementTagsWidget.jsx

@@ -2,12 +2,12 @@ import { Component } from 'react'
 import { FormattedMessage } from 'react-intl'
 import { WidgetDataTarget, registerWidgetType }
        from '../../../services/Widget/Widget'
-import OSMElementData from '../../OSMElementData/OSMElementData'
+import OSMElementTags from '../../OSMElementTags/OSMElementTags'
 import QuickWidget from '../../QuickWidget/QuickWidget'
 import messages from './Messages'
 
 const descriptor = {
-  widgetKey: 'OSMDataWidget',
+  widgetKey: 'OSMElementTagsWidget',
   label: messages.label,
   targets: [WidgetDataTarget.task],
   minWidth: 3,
@@ -16,18 +16,18 @@ const descriptor = {
   defaultHeight: 6,
 }
 
-export default class OSMDataWidget extends Component {
+export default class OSMElementTagsWidget extends Component {
   render() {
     return (
       <QuickWidget
         {...this.props}
         className=""
         widgetTitle={<FormattedMessage {...messages.title} />}
       >
-        <OSMElementData {...this.props} />
+        <OSMElementTags {...this.props} />
       </QuickWidget>
     )
   }
 }
 
-registerWidgetType(OSMDataWidget, descriptor)
+registerWidgetType(OSMElementTagsWidget, descriptor)

src/components/Widgets/widget_registry.js

@@ -9,8 +9,8 @@ export { default as SupplementalMapWidget }
        from './SupplementalMapWidget/SupplementalMapWidget'
 export { default as CustomUrlWidget }
        from './CustomUrlWidget/CustomUrlWidget'
-export { default as OSMDataWidget }
-       from './OSMDataWidget/OSMDataWidget'
+export { default as OSMElementTagsWidget }
+       from './OSMElementTags/OSMElementTagsWidget'
 export { default as OSMHistoryWidget }
        from './OSMHistoryWidget/OSMHistoryWidget'
 export { default as ActivityListingWidget }