-
- {loading ?
: null}
-
-
-
-
+
+
);
};
diff --git a/src/frontend/components/dashboard/lib/react/Menu/MenuItem.test.tsx b/src/frontend/components/dashboard/lib/react/Menu/MenuItem.test.tsx
new file mode 100644
index 000000000..831ec5644
--- /dev/null
+++ b/src/frontend/components/dashboard/lib/react/Menu/MenuItem.test.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/dom';
+import { describe, it, expect } from '@jest/globals';
+
+import MenuItem from './MenuItem';
+import { DashboardProps } from '../types';
+
+describe('MenuItem', () => {
+ it('Renders a MenuItem with H1 set', () => {
+ const DashboardProps: DashboardProps = {
+ name: 'Dashboard 1',
+ url: 'http://localhost:3000/dashboard',
+ download_url: 'http://localhost:3000/dashboard/download',
+ }
+
+ render(
);
+
+ expect(screen.getByText('Dashboard 1').parentElement).toBeInstanceOf(HTMLHeadingElement);
+ });
+
+ it('Renders a MenuItem without H1 set', () => {
+ const DashboardProps: DashboardProps = {
+ name: 'Dashboard 1',
+ url: 'http://localhost:3000/dashboard',
+ download_url: 'http://localhost:3000/dashboard/download',
+ }
+
+ render(
);
+
+ expect(screen.getByText('Dashboard 1').parentElement).toBeInstanceOf(HTMLAnchorElement);
+ });
+
+ it('Renders a MenuItem with different currentDashboard', () => {
+ const DashboardProps: DashboardProps[] = [{
+ name: 'Dashboard 1',
+ url: 'http://localhost:3000/dashboard',
+ download_url: 'http://localhost:3000/dashboard/download',
+ }, {
+ name: 'Dashboard 2',
+ url: 'http://localhost:3000/dashboard2',
+ download_url: 'http://localhost:3000/dashboard2/download',
+ }]
+
+ render(
);
+
+ expect(screen.getByText('Dashboard 1').parentElement).toBeInstanceOf(HTMLAnchorElement);
+ });
+});
\ No newline at end of file
diff --git a/src/frontend/components/dashboard/lib/react/Menu/MenuItem.tsx b/src/frontend/components/dashboard/lib/react/Menu/MenuItem.tsx
new file mode 100644
index 000000000..edb13f277
--- /dev/null
+++ b/src/frontend/components/dashboard/lib/react/Menu/MenuItem.tsx
@@ -0,0 +1,23 @@
+import React from "react"
+import { DashboardProps } from "../types"
+import { Nav } from "react-bootstrap"
+
+const MenuItem = ({ dashboard, currentDashboard, includeH1 }: { dashboard: DashboardProps, currentDashboard: DashboardProps, includeH1: boolean }) => {
+ if (dashboard.name === currentDashboard.name) {
+ if (includeH1) {
+ return
+ {dashboard.name}
+
+ } else {
+ return
+ {dashboard.name}
+
+ }
+ } else {
+ return
+ {dashboard.name}
+
+ }
+}
+
+export default MenuItem;
\ No newline at end of file
diff --git a/src/frontend/components/dashboard/lib/react/Widget.tsx b/src/frontend/components/dashboard/lib/react/Widget.tsx
deleted file mode 100644
index de1e5dda2..000000000
--- a/src/frontend/components/dashboard/lib/react/Widget.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from "react";
-import { initializeRegisteredComponents } from 'component'
-
-export default class Widget extends React.Component
{
- private ref;
-
- constructor(props) {
- super(props);
-
- this.ref = React.createRef();
- }
-
- shouldComponentUpdate = (nextProps) => {
- return nextProps.widget.html !== this.props.widget.html;
- }
-
- componentDidUpdate = () => {
- this.initializeLinkspace();
- }
-
- initializeLinkspace = () => {
- if (!this.ref) {
- return;
- }
- initializeRegisteredComponents(this.ref.current)
- }
-
- render() {
- return (
-
-
-
- {this.props.readOnly ? null :
- edit widget
- drag widget
- }
-
Test
",
+ };
+
+ it('Renders a Widget with HTML set', () => {
+ render();
+
+ expect(screen.getByText('Test')).toBeInstanceOf(HTMLDivElement);
+ expect(screen.getByTestId('edit')).toBeInstanceOf(HTMLAnchorElement);
+ expect(screen.getByTestId('drag')).toBeInstanceOf(HTMLSpanElement);
+ });
+
+ it('Renders a Readonly Widget', ()=>{
+ render();
+
+ expect(screen.queryByTestId('edit')).toBeNull();
+ expect(screen.queryByTestId('drag')).toBeNull();
+ });
+
+ it('Calls onEditClick when edit button is clicked', ()=>{
+ const onEditClick = jest.fn();
+ render();
+
+ screen.getByTestId('edit').click();
+ expect(onEditClick).toHaveBeenCalled();
+ });
+});
diff --git a/src/frontend/components/dashboard/lib/react/Widget/Widget.tsx b/src/frontend/components/dashboard/lib/react/Widget/Widget.tsx
new file mode 100644
index 000000000..a2aaddb2a
--- /dev/null
+++ b/src/frontend/components/dashboard/lib/react/Widget/Widget.tsx
@@ -0,0 +1,23 @@
+import React, { createRef, useEffect } from "react";
+import { initializeRegisteredComponents } from 'component'
+
+export default function Widget({html, readOnly, onEditClick}) {
+ const ref = createRef();
+
+ useEffect(()=>{
+ if(!ref.current) return;
+ initializeRegisteredComponents(ref.current);
+ },[html]);
+
+ return (
+ <>
+
+
+ {!readOnly && (<>
+
edit widget
+
drag widget
+ )}
+
-
-
- ))
- )
-
- onLayoutChange = (layout) => {
- if (this.shouldSaveLayout(this.state.layout, layout)) {
- this.props.api.saveLayout(this.props.dashboardId, layout);
- }
- this.setState({ layout });
- }
-
- shouldSaveLayout = (prevLayout, newLayout) => {
- if (prevLayout.length !== newLayout.length) {
- return true;
- }
- for (let i = 0; i < prevLayout.length; i += 1) {
- const entriesNew = Object.entries(newLayout[i]);
- const isDifferent = entriesNew.some((keypair) => {
- const [key, value] = keypair;
- if (key === "moved" || key === "static") return false;
- if (value !== prevLayout[i][key]) return true;
- return false;
- });
- if (isDifferent) return true;
- }
- return false;
- }
-
- renderModal = () => (
-
-
-
-
Edit widget
-
-
-
- {this.state.editError
- ?
{this.state.editError}
: null}
- {this.state.loadingEditHtml
- ?
Loading... :
}
-
-
-
-
-
-
-
-
- {this.props.hideMenu ? null :
}
- {this.renderModal()}
-
-
- {this.generateDOM()}
-
-
- {this.props.hideMenu ? null :
}
-
` +
- `` +
- `` +
+ `` +
+ `` +
'
'
- )
+ )
}
addSelectAllCheckbox() {
@@ -179,10 +189,10 @@ class DataTableComponent extends Component {
})
// Check if the 'select all' checkbox is checked and all checkboxes need to be checked
- $selectAllElm.find('input').on( 'click', (ev) => {
+ $selectAllElm.find('input').on('click', (ev) => {
const checkbox = $(ev.target)
- if ($(checkbox).is( ':checked' )) {
+ if ($(checkbox).is(':checked')) {
this.checkAllCheckboxes($checkBoxes, true)
} else {
this.checkAllCheckboxes($checkBoxes, false)
@@ -192,7 +202,7 @@ class DataTableComponent extends Component {
checkAllCheckboxes($checkBoxes, bCheckAll) {
if (bCheckAll) {
- $checkBoxes.prop( 'checked', true )
+ $checkBoxes.prop('checked', true)
} else {
$checkBoxes.prop('checked', false)
}
@@ -201,7 +211,7 @@ class DataTableComponent extends Component {
checkSelectAll($checkBoxes, $selectAllCheckBox) {
let bSelectAll = true
- $checkBoxes.each((i, checkBox) => {
+ $checkBoxes.each((_i, checkBox) => {
if (!checkBox.checked) {
$selectAllCheckBox.prop('checked', false)
bSelectAll = false
@@ -216,19 +226,16 @@ class DataTableComponent extends Component {
addSortButton(dataTable, column, headerContent) {
const $header = $(column.header())
const $button = $(`
-