refactor: remove Panel, Window and Titlebar components

BREAKING CHANGE: Panel, Window and Titlebar components are not existing anymore

Author: annarieger

package-lock.json

@@ -77,15 +77,15 @@
     "@terrestris/ol-util": "^14.0.0",
     "@types/geojson": "^7946.0.10",
     "@types/lodash": "^4.14.197",
+    "@types/moment": "^2.13.0",
     "ag-grid-community": "^28.2.1",
     "ag-grid-react": "^28.2.1",
     "jspdf": "^2.5.1",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "proj4": "^2.9.0",
     "prop-types": "^15.8.1",
-    "react-dom": "^18.2.0",
-    "react-rnd": "^10.3.5"
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.22.15",

package.json

@@ -49,7 +49,7 @@ class AddWmsPanelExample extends React.Component {
   }
 
   onClick() {
-    CapabilitiesUtil.parseWmsCapabilities(WMS_CAPABILITIES_URL)
+    CapabilitiesUtil.getWmsCapabilities(WMS_CAPABILITIES_URL)
       .then(CapabilitiesUtil.getLayersFromWmsCapabilities)
       .then(layers => {
         this.setState({

src/Container/AddWmsPanel/AddWmsPanel.example.md

@@ -1,33 +1,16 @@
 .add-wms-panel {
-  .body {
-    display: flex;
-    flex-direction: column;
-
-    .ant-checkbox-group {
-      flex: 1;
-      height: 100%;
-      overflow-y: auto;
-    }
-
-    .add-wms-layer-checkbox-line {
-      padding: 5px;
-      margin: 1px;
-      display: flex;
-      flex: 1;
-      align-items: center;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
+  display: flex;
+  flex-direction: column;
 
-      .add-wms-add-info-icon {
-        margin-left: 5px;
-      }
-    }
+  .ant-checkbox-group {
+    flex: 1;
+    height: 100%;
+    overflow-y: auto;
+  }
 
-    .react-geo-titlebar {
-      .react-geo-simplebutton {
-        margin-right: 5px;
-      }
-    }
+  .buttons {
+    display: flex;
+    gap: 5px;
+    justify-content: end;
   }
 }

src/Container/AddWmsPanel/AddWmsPanel.less

@@ -64,9 +64,6 @@ describe('<AddWmsPanel />', () => {
     const dialog = screen.getByRole('dialog');
     expect(dialog).toBeVisible();
 
-    const title = within(dialog).getByText(/add wms layer/i);
-    expect(title).toBeVisible();
-
     const list = within(dialog).getByRole('list');
     expect(list).toBeVisible();
 

src/Container/AddWmsPanel/AddWmsPanel.spec.tsx

@@ -4,8 +4,6 @@ import OlMap from 'ol/Map';
 
 import _isFunction from 'lodash/isFunction';
 
-import Panel, { PanelProps } from '../../Panel/Panel/Panel';
-import Titlebar from '../../Panel/Titlebar/Titlebar';
 import SimpleButton from '../../Button/SimpleButton/SimpleButton';
 import Logger from '@terrestris/base-util/dist/Logger';
 
@@ -27,10 +25,6 @@ interface OwnProps {
    * Optional text to be shown in cancel button
    */
   cancelText: string;
-  /**
-   * Optional text to be shown in panel title
-   */
-  titleText: string;
   /**
    * Array containing layers (e.g. `Capability.Layer.Layer` of ol capabilities
    * parser)
@@ -59,7 +53,7 @@ interface AddWmsLayerState {
   selectedWmsLayers: string[];
 }
 
-export type AddWmsPanelProps = OwnProps & PanelProps;
+export type AddWmsPanelProps = OwnProps;
 
 /**
  * Panel containing a (checkable) list of AddWmsLayerEntry instances.
@@ -79,7 +73,6 @@ export class AddWmsPanel extends React.Component<AddWmsPanelProps, AddWmsLayerSt
     addAllLayersText: 'Add all layers',
     addSelectedLayersText: 'Add selected layers',
     cancelText: 'Cancel',
-    titleText: 'Add WMS layer'
   };
 
   /**
@@ -118,7 +111,7 @@ export class AddWmsPanel extends React.Component<AddWmsPanelProps, AddWmsLayerSt
    * state
    */
   onAddSelectedLayers = () => {
-    const  {
+    const {
       selectedWmsLayers
     } = this.state;
 
@@ -136,7 +129,7 @@ export class AddWmsPanel extends React.Component<AddWmsPanelProps, AddWmsLayerSt
     } else if (map) {
       filteredLayers.forEach(layer => {
         // Add layer to map if it is not added yet
-        if (!map.getLayers().getArray().includes(layer) ) {
+        if (!map.getLayers().getArray().includes(layer)) {
           map.addLayer(layer);
         }
       });
@@ -160,7 +153,7 @@ export class AddWmsPanel extends React.Component<AddWmsPanelProps, AddWmsLayerSt
     } else if (map) {
       wmsLayers.forEach(layer => {
         // Add layer to map if it is not added yet
-        if (!map.getLayers().getArray().includes(layer) ) {
+        if (!map.getLayers().getArray().includes(layer)) {
           map.addLayer(layer);
         }
       });
@@ -172,70 +165,64 @@ export class AddWmsPanel extends React.Component<AddWmsPanelProps, AddWmsLayerSt
   /**
    * The render function.
    */
-  render () {
+  render() {
     const {
       wmsLayers,
       onCancel,
-      titleText,
       cancelText,
       addAllLayersText,
-      addSelectedLayersText,
-      onLayerAddToMap,
-      onSelectionChange,
-      ...passThroughProps
+      addSelectedLayersText
     } = this.props;
 
     const {
       selectedWmsLayers
-    } =  this.state;
+    } = this.state;
 
     return (
-      wmsLayers && wmsLayers.length > 0  ?
-        <Panel
-          title={titleText}
-          bounds="#main"
-          className="add-wms-panel"
-          role="dialog"
-          {...passThroughProps}
-        >
-          <div role="list" >
-            <Checkbox.Group onChange={value => this.onSelectedLayersChange(value.map(v => v as string))}>
-              {wmsLayers.map((layer, idx) =>
-                <div role="listitem" key={idx}>
-                  <AddWmsLayerEntry
-                    wmsLayer={layer}
-                  />
-                </div>
-              )}
-            </Checkbox.Group>
-          </div>
-          <Titlebar tools={[
-            <SimpleButton
-              size="small"
-              key="useSelectedBtn"
-              disabled={selectedWmsLayers.length === 0}
-              onClick={this.onAddSelectedLayers}
-            >
-              {addSelectedLayersText}
-            </SimpleButton>,
+      wmsLayers && wmsLayers.length > 0 &&
+      <div
+        className="add-wms-panel"
+        role="dialog"
+      >
+        <div role="list" >
+          <Checkbox.Group onChange={value => this.onSelectedLayersChange(value.map(v => v as string))}>
+            {wmsLayers.map((layer, idx) =>
+              <div role="listitem" key={idx}>
+                <AddWmsLayerEntry
+                  wmsLayer={layer}
+                />
+              </div>
+            )}
+          </Checkbox.Group>
+        </div>
+        <div className="buttons">
+          <SimpleButton
+            size="small"
+            key="useSelectedBtn"
+            disabled={selectedWmsLayers.length === 0}
+            onClick={this.onAddSelectedLayers}
+          >
+            {addSelectedLayersText}
+          </SimpleButton>
+          <SimpleButton
+            size="small"
+            key="useAllBtn"
+            onClick={this.onAddAllLayers}
+          >
+            {addAllLayersText}
+          </SimpleButton>
+          {
+            onCancel &&
             <SimpleButton
               size="small"
-              key="useAllBtn"
-              onClick={this.onAddAllLayers}
+              key="cancelBtn"
+              onClick={onCancel}
             >
-              {addAllLayersText}
-            </SimpleButton>,
-            onCancel ?
-              <SimpleButton
-                size="small"
-                key="cancelBtn"
-                onClick={onCancel}
-              >
-                {cancelText}
-              </SimpleButton> : null
-          ]} />
-        </Panel>
-        : null
+              {cancelText}
+            </SimpleButton>
+          }
+        </div>
+      </div>
     );
   }
 }