hardforkio/secret-conquery

A private clone of conquery for the tender

secret-conquery's Issues

Prettify Project

Once prettier is added to the project, it should be applied to the codebase once.

CI caching broken because it does not find package.json

Apparently, node/install-packages cannot find the package.json in the frontend folder even though the path is giver per the app-dir variable.

Add stories to check functionality of standard query elements

"Anfrage" node shows `@ts-ignore` on loading in "Editor" pane.

Describe the bug
When dragging an "Anfrage" nodes into the "Editor" it shows @ts-ignore on loading.

To Reproduce
Steps to reproduce the behavior:

1. Open "Anfrage" pane and "Editor" pane side to side
2. Drag an "Anfrage" into the "Editor"
3. Scroll down to '....'
4. See error

Expected behavior
I expect to see some kind of loading indicator during loading.

Desktop (please complete the following information):
On all devices

Info pane behavior broken on mobile (since hover does not port)

Describe the bug
On mobile, touch event on the "Konzeptbäume" pane first toggles the pin in the info pane and then updates the info displayed in the info pane. This means on the first click on a "Konzept" its info is not shown, instead the pin appears in the sidebar. On the second click on another "Konzept" the pin disappears and the corresponding info is shown. On clicking on yet another concept, the pin is activated again, and the Info corresponding to the "Konzept" that was clicked does not show.

Technically, this is because on mobile, a touch event on the "Konzeptbäume" pane fires both a TOGGLE_ADDITIONAL_INFOS and a DISPLAY_ADDITIONAL_INFOS action. in Contrast, on desktop DISPLAY is triggered by hover and TOGGLE is triggered by clicking. This leads to inconsistent behavior of the info pane on mobile.

To Reproduce
Steps to reproduce the behavior:

1. Open the App on mobile (or simulate touch events in browser)
2. Go to "Konzeptbäume"
3. Open the "Movie Appearances" folder by touching
4. Touch e.g. "Action Movies"
5. See how in the Info Pane, the green pin is activated, but no Info is shown.
6. Touch e.g. "Fantasy Movies"
7. See how the pin in the Info pane disapears and and the Info for "Fantasy Movies" is shown.
8. Touch e.g. "Horror Movies"
9. See how the pin in the Info pane appears, but the pane still displays Info for "Fantasy Movies".

Expected behavior
I expect the first touch on a concept to select the concept (showing the the green hover effect) and display the Info for that concept and the second touch on the concept (that is already displayed) to activate the pin for that concept.
Then, clicking on another concept should select the concept (with the green hover effect) but not update the info in the info pane.
Touching the pinned concept or touching the pin in the info pane should unpin the concept.

Screenshots

Smartphone (please complete the following information):

• Device: iPad (with click events as simulated in Firefox)

Formular-Editor squeezed on iPad.

Describe the bug
The Formular-Editor is squeezed (squeezed, scrambled and partly inaccessible) on iPad in portrait view.

To Reproduce
Steps to reproduce the behavior:

1. Go the the "Formular-Editor"
2. Optional (for even worse effect) open info bar on the right
3. View squeezed and scrambled layout.

Expected behavior
Responsive behavior of components in the Formular-Editor and option to scroll down to access them if neccessary.

Screenshots

Smartphone (please complete the following information):

• Device: iPad (as simulated in Chromium)

Document restriction: No support on devices below 768 px (iPad portrait)

Is your feature request related to a problem? Please describe.
The app UI does not work well on small screens and optimizing it for screens below 768 px would require some work that will not be done in the immediate future.

Describe the solution you'd like
Make this limitation transparent in the docs and open an issue to mark this as an enhancement (with either won't fix or icebox depending on product management priorities)

Show error on devices with screen resolution below 768 px vertically

Is your feature request related to a problem? Please describe.
The app is not optimized for usage (and currently also not intended for usage) on screens with resolution below 768 px vertically. Usage on smaller screens is difficult frustrating due to poor responsiveness of components that lead issues with accessibility of features.

Describe the solution you'd like
Show an error on screens with vertical resolution below 768 px saying that this app does not work on their device because the screen is too small. Optionally with a button that lets them use the app anyway but warns them that the experience will be 'not optimal'

Top menu bar is not responsive and either vanishes or causes display issues

Describe the bug
The top menu bar causes issues on low res screens. See screenshots below

To Reproduce
Steps to reproduce the behavior:

1. Open app on smartphone
2. See how the database selector is either pushed out of the view port or pushes other components out of the view port.

Expected behavior
On smaller screens, I expect the app to be rendered inside the view port and components to rearrange responsively. Therefore, I expect the database selector to take up the entire top menu bar (with maybe the exception of a logo/icon on the left side)

Screenshots
On Pixel 2 XL:

On Moto G4:

Improve "Forumular-Editor"

Currently the "Formular-Editor" uses a lot of space which leads to the lower panes (tools and info) to be pushed down too far to use the app on tablet. See screenshot.

Make the editor more compact by reducing unnecessary white (wide) space.

Fix typescript errors

Currently, there are 1980 typescript errors in the front end code base. We want to fix them, so we properly use linting and typechecking in the future.

Add prettier to project

To enforce a consistent coding style and to keep diffs focused on the relevant parts, we want to have prettier in this.

Implement drag and drop activation on mobile as drag and hold.

Is your feature request related to a problem? Please describe.
User interface on mobile is unintuitive. Drag and drop does not work as expected.

Describe the solution you'd like
I would expect Drag and Drop to work with touch and hold to activate drag. Specifically, I would expect to get some feedback on touch and hold that dragging is activated like a popup of the element that can be dragged and/or vibration.

Rethink arrangement of Panes

Is your feature request related to a problem? Please describe.
Currently, the usability on the app on small screens is very limited, since all three panes are displayed simultaneously side by side and are overlapping each other and/or pushing each others content out of the view port. This makes the app pretty much unusable on screens with a max resolution below 900px.

Describe the solution you'd like
One solution to this problem would be rearranging the panes of the app. e.g. a break point at 1080px below which the the screen is separated in two rows where the info pane and the "Konzepte/Anfragen" pane are two collumns in the top row and the editor pane is in the bottom row.

Panes top bars cut off on low res screens.

Describe the bug
The tab headers in top bar of the main Panes (Konzeptbäume, Anfragen, Formulare) and (Editor, Zeit-Editor, Formular-Editor) are cut off on the right side on iPad in portrait mode. On smaller screens they even vanish to the right and are inaccessible.

To Reproduce
Steps to reproduce the behavior:

1. Open App on iPad (or iPad simulator in your Browser),
2. Rotate view to portrait,
3. Look at the right end of the tab headers in the top bars.
4. See cut off.

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots

Smartphone (please complete the following information):

• Device: iPad (simulated in Chromium)

Remove node_modules folder from project

As we have a yarn.lock that keeps track of installed versions, we can remove the node_modules folder. It bloats the diffs, slows sync and does not add value over yarn.lock.

Extend readme to explain the function of different tabs in the app.

It is not obvious what e.g. the "Timebased Editor" and the "Forms" tab are for. Extend the Readme with e.g. screenshots and descriptions to explain this.

Add storybook to project

Analyze state of Conquery app related to standard query builder.

Gather list of bugs/features of Conquery app UI

Implement scrolling on mobile as swipe/touch and drag.

Is your feature request related to a problem? Please describe.
On mobile, scrolling in different panes does not work. (only when one hits the barely visible scroll bar and then its imprecise and in the opposite direction of finger movement)

Describe the solution you'd like
Implement drag to scroll for all the components where it would be expected (Konzeptbaum, Anfragen, Formulare). Scrolling should be activated on touching anywhere inside the component.