Revert "tagging: add iD Tagging scheme to advanced mode 🎉 (zbycz#131)"

This reverts commit 5a492a7

package.json

@@ -31,7 +31,6 @@
     "@material-ui/core": "^4.11.4",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "4.0.0-alpha.58",
-    "@openstreetmap/id-tagging-schema": "^6.1.0",
     "@sentry/browser": "^6.5.1",
     "@sentry/node": "^6.5.1",
     "@types/maplibre-gl": "^1.13.1",

src/components/FeaturePanel/FeaturePanel.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
-import { Typography } from '@material-ui/core';
 import { FeatureHeading } from './FeatureHeading';
 import Coordinates from './Coordinates';
 import { useToggleState } from '../helpers';
+import { TagsTable } from './TagsTable';
 import { getFullOsmappLink, getUrlOsmId } from '../../services/helpers';
 import { EditDialog } from './EditDialog/EditDialog';
 import {
@@ -21,8 +21,6 @@ import { EditButton } from './EditButton';
 import { FeaturedTags } from './FeaturedTags';
 import { getLabel } from '../../helpers/featureLabel';
 import { ImageSection } from './ImageSection/ImageSection';
-import { IdSchemeFields } from './IdSchemeFields';
-import { TagsTable } from './TagsTable';
 
 const featuredKeys = [
   'website',
@@ -71,36 +69,17 @@ const FeaturePanel = () => {
             setDialogOpenedWith={setDialogOpenedWith}
           />
 
-          {advanced && (
-            <IdSchemeFields
-              featuredTags={deleted ? [] : featuredTags}
-              feature={feature}
-            />
-          )}
-          {!advanced && (
-            <>
-              {featuredTags.length && (
-                <Typography
-                  variant="overline"
-                  display="block"
-                  color="textSecondary"
-                >
-                  {t('featurepanel.other_info_heading')}
-                </Typography>
-              )}
-              <TagsTable
-                tags={tags}
-                center={feature.center}
-                except={
-                  advanced || deleted ? [] : ['name', 'layer', ...featuredKeys]
-                }
-                onEdit={setDialogOpenedWith}
-                key={
-                  getUrlOsmId(osmMeta) // we need to refresh inner state
-                }
-              />
-            </>
-          )}
+          <TagsTable
+            tags={tags}
+            center={feature.center}
+            except={
+              advanced || deleted ? [] : ['name', 'layer', ...featuredKeys]
+            }
+            onEdit={setDialogOpenedWith}
+            key={
+              getUrlOsmId(osmMeta) // we need to refresh inner state
+            }
+          />
 
           {advanced && <Members />}
 

src/components/FeaturePanel/FeaturedTags.tsx

@@ -1,5 +1,7 @@
+import Typography from '@material-ui/core/Typography';
 import React from 'react';
 import styled from 'styled-components';
+import { t } from '../../services/intl';
 import { FeaturedTag } from './FeaturedTag';
 
 const Spacer = styled.div`
@@ -15,6 +17,10 @@ export const FeaturedTags = ({ featuredTags, setDialogOpenedWith }) => {
         <FeaturedTag key={k} k={k} v={v} onEdit={setDialogOpenedWith} />
       ))}
       <Spacer />
+
+      <Typography variant="overline" display="block" color="textSecondary">
+        {t('featurepanel.other_info_heading')}
+      </Typography>
     </>
   );
 };

src/components/FeaturePanel/ImageSection/ImageSection.tsx

@@ -6,9 +6,11 @@ import React from 'react';
 import styled from 'styled-components';
 import { useFeatureContext } from '../../utils/FeatureContext';
 import { FeatureImage } from './FeatureImage';
+import Maki from '../../utils/Maki';
+import { hasName } from '../../../helpers/featureLabel';
 import { t } from '../../../services/intl';
 import { SHOW_PROTOTYPE_UI } from '../../../config';
-import { PoiDescription } from './PoiDescription';
+import { Feature } from '../../../services/types';
 
 const StyledIconButton = styled(IconButton)`
   svg {
@@ -18,13 +20,40 @@ const StyledIconButton = styled(IconButton)`
   }
 `;
 
+const PoiType = styled.div`
+  color: #fff;
+  margin: 0 auto 0 15px;
+  font-size: 13px;
+  position: relative;
+  width: 100%;
+  svg {
+    vertical-align: bottom;
+  }
+  span {
+    position: absolute;
+    left: 20px;
+  }
+`;
+
+const getSubclass = ({ layer, osmMeta, properties }: Feature) =>
+  properties.subclass?.replace(/_/g, ' ') ||
+  (layer && layer.id) || // layer.id specified only when maplibre-gl skeleton displayed
+  osmMeta.type;
+
 export const ImageSection = () => {
   const { feature } = useFeatureContext();
   const { properties } = feature;
 
+  const poiType = hasName(feature)
+    ? getSubclass(feature)
+    : t('featurepanel.no_name');
+
   return (
     <FeatureImage feature={feature} ico={properties.class}>
-      <PoiDescription />
+      <PoiType>
+        <Maki ico={properties.class} invert middle />
+        <span>{poiType}</span>
+      </PoiType>
 
       {SHOW_PROTOTYPE_UI && (
         <>

src/components/utils/FeatureContext.tsx

@@ -9,7 +9,6 @@ import Router from 'next/router';
 import Cookies from 'js-cookie';
 import { Feature } from '../../services/types';
 import { useBoolState } from '../helpers';
-import { publishDbgObject } from '../../utils';
 
 export interface FeatureContextType {
   feature: Feature | null;
@@ -44,8 +43,6 @@ export const FeatureProvider = ({
   useEffect(() => {
     // set feature on next.js router transition
     setFeature(featureFromRouter);
-    publishDbgObject('feature', featureFromRouter);
-    publishDbgObject('schema', featureFromRouter?.schema);
   }, [featureFromRouter]);
 
   const [homepageShown, showHomepage, hideHomepage] = useBoolState(

src/helpers/featureLabel.ts

@@ -1,8 +1,8 @@
 import { Feature } from '../services/types';
 import { roundedToDeg } from '../utils';
 
-const getSubclass = ({ properties, osmMeta, schema }: Feature) =>
-  schema?.label || properties.subclass?.replace(/_/g, ' ') || osmMeta.type;
+const getSubclass = ({ properties, osmMeta }: Feature) =>
+  properties.subclass?.replace(/_/g, ' ') || osmMeta.type; // TODO translate ? maybe use iD editor logic (already with translations)
 
 const getRef = (feature: Feature) =>
   feature.tags.ref ? `${getSubclass(feature)} ${feature.tags.ref}` : '';

src/services/__tests__/osmApi.test.ts

@@ -9,29 +9,15 @@ import {
   way,
   wayFeature,
 } from './osmApi.fixture';
-import { intl } from '../intl';
-import * as tagging from '../tagging/translations';
-import * as idTaggingScheme from '../tagging/idTaggingScheme';
 
 const osm = (item) => ({ elements: [item] });
 const overpass = {
   elements: [{ center: { lat: 50, lon: 14 } }],
 };
 
-// fetchFeature() fetches the translations for getSchemaForFeature()
-// TODO maybe refactor it without need for intl?
-intl.lang = 'en';
-jest.mock('next/config', () => () => ({
-  publicRuntimeConfig: { languages: ['en'] },
-}));
-
 describe('fetchFeature', () => {
   beforeEach(() => {
     jest.clearAllMocks();
-    jest.spyOn(tagging, 'fetchSchemaTranslations').mockResolvedValue(true);
-    jest
-      .spyOn(idTaggingScheme, 'getSchemaForFeature')
-      .mockReturnValue(undefined); // this is covered in idTaggingScheme.test.ts
   });
 
   const isServer = jest.spyOn(helpers, 'isServer').mockReturnValue(true);