Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixed few bugs present in NewHomePage look #443

Closed
wants to merge 2 commits into from
Closed

Fixed few bugs present in NewHomePage look #443

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5c5a492
Fixed bugs
saimedhi Oct 29, 2024
0be4299
Merge branch 'main' into bug_fixes2
saimedhi Oct 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion public/app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,10 +42,13 @@ export const FlowFrameworkDashboardsApp = (props: Props) => {
const location = useLocation();
const queryParams = getDataSourceFromURL(location);
const dataSourceId = queryParams.dataSourceId;
const isWorkflowDetailPage = location.pathname.includes(
APP_PATH.WORKFLOW_DETAIL.split(':')[0]
);
const sidebar = (
<EuiPageSideBar
style={{ minWidth: 190 }}
hidden={hideInAppSideNavBar}
hidden={isWorkflowDetailPage || hideInAppSideNavBar}
Comment on lines +45 to +51
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Have you discussed with @opensearch-project/opensearch-ux on this change?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, UX team suggested to

  • Hide navigation on the old look and feel for the Visual Editor.
  • List view should show the navigation.

Copy link

@kamingleung kamingleung Oct 29, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@saimedhi Which navigation is this referring to? Does this only apply to the old look and feel?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • The side nav shown below is only be visible on List view (old look).
Screenshot 2024-10-29 at 4 12 23 PM

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@saimedhi As mentioned in #444, we can hide this navigation on both list page, create page, and visual editor.

paddingSize="l"
>
<EuiSideNav
Expand Down
5 changes: 5 additions & 0 deletions public/global-styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,3 +11,8 @@
height: 100%;
width: 100%;
}

.panel-with-radius {
Copy link

@kamingleung kamingleung Oct 29, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@saimedhi
Can we reuse the same styles from the new Discover?
It should be border-radius: 8px

This radius style should only be applied to the containers within the Visual Editor. The "Manage workflow/Create workflow" page should use the default containers.

border-radius: 4px;
overflow: hidden;
}
6 changes: 5 additions & 1 deletion public/pages/workflow_detail/resizable_workspace.tsx
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This has introduced a regression, the bottom panel seems to be getting cut off now. And because of this, if collapsing the Inspector panel, the button to reopen it is no longer visible.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Screenshot 2024-10-29 at 3 02 10 PM

Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,7 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
initialSize={60}
minSize="25%"
paddingSize="s"
className="stretch-absolute panel-with-radius"
>
<WorkflowInputs
workflow={props.workflow}
Expand All @@ -139,14 +140,15 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
marginRight: isPreviewPanelOpen ? '-32px' : '0px',
marginBottom: isToolsPanelOpen ? '0px' : '24px',
}}
className="stretch-absolute panel-with-radius"
mode="collapsible"
initialSize={60}
minSize="25%"
paddingSize="s"
onToggleCollapsedInternal={() => onTogglePreviewChange()}
>
<EuiResizableContainer
className="workspace-panel"
className="workspace-panel stretch-absolute"
direction="vertical"
style={{
marginLeft: '-8px',
Expand All @@ -173,6 +175,7 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
minSize="25%"
paddingSize="s"
style={{ marginBottom: '-8px' }}
className="stretch-absolute"
>
<EuiFlexGroup
direction="column"
Expand All @@ -190,6 +193,7 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
<EuiResizableButton />
<EuiResizablePanel
id={TOOLS_PANEL_ID}
className="stretch-absolute panel-with-radius"
mode="collapsible"
initialSize={50}
minSize="25%"
Expand Down
8 changes: 6 additions & 2 deletions public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -555,7 +555,11 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
}

return (
<EuiPanel paddingSize="m" grow={true} className="workspace-panel">
<EuiPanel
paddingSize="m"
grow={true}
className="workspace-panel stretch-relative"
>
{props.uiConfig === undefined ? (
<EuiLoadingSpinner size="xl" />
) : (
Expand Down Expand Up @@ -742,7 +746,7 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
<EuiFlexItem>
<EuiHorizontalRule margin="m" />
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexItem style={{ marginBottom: '18px' }}>
<EuiFlexGroup direction="row" justifyContent="flexEnd">
{onIngest && !ingestEnabled ? (
<EuiFlexItem grow={false}>
Expand Down
18 changes: 9 additions & 9 deletions public/render_app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,20 +39,20 @@ export const renderApp = (
params.element
);

const EXPECTED_BASE_PATH = `/app/${PLUGIN_ID}#`;
const handleLinkClick = (event: MouseEvent) => {
const anchorTag = (event.target as HTMLElement).closest(
'a'
) as HTMLAnchorElement | null;

const unlistenParentHistory = params.history.listen(() => {
if (
hideInAppSideNavBar &&
window.location.pathname.endsWith(`/app/${PLUGIN_ID}`)
) {
window.location.href = EXPECTED_BASE_PATH;
if (anchorTag && anchorTag.href.endsWith(`/app/${PLUGIN_ID}`)) {
window.location.href = anchorTag.href + '#';
window.dispatchEvent(new HashChangeEvent('hashchange'));
}
});
};
document.addEventListener('click', handleLinkClick);
Comment on lines +42 to +52
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If I understand correctly, this is performing this logic for every mouse click? This could add a performance hit, and feels like a workaround to me.

Can you take a look at AD plugins, or reach out to core OSD team to get better insight on how to fix the problem?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This workaround is done to handle below scenario:

  • In the NewHomePage - workflow details page, clicking search studio from sidenav will not redirect to flow framework dashboards home page (workflows list page).
  • Reason : expected url by flow framework plugin is '/app/search-studio#' but getting '/app/search-studio'

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Understandable. But I still have the same concerns as mentioned. Can you follow up with AD plugin and/or core OSD team?


return () => {
ReactDOM.unmountComponentAtNode(params.element);
unlistenParentHistory();
document.removeEventListener('click', handleLinkClick);
};
};
Loading