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

Jump to bottom

fix(frontend): do not use backend url in <img> #2424

Merged
merged 4 commits into from
Jul 2, 2024
Merged

fix(frontend): do not use backend url in <img> #2424

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
932c06e
fronted: do not use backend url in <img>
nicoloboschi Jun 28, 2024
1bf59a7
[autofix.ci] apply automated fixes
autofix-ci[bot] Jun 28, 2024
e43254a
Merge branch 'main' into fix-proxy
github-actions[bot] Jul 2, 2024
5495193
Merge branch 'main' into fix-proxy
github-actions[bot] Jul 2, 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
27 changes: 5 additions & 22 deletions src/frontend/src/components/headerComponent/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { Link, useLocation, useNavigate, useParams } from "react-router-dom";
import AlertDropdown from "../../alerts/alertDropDown";
import profileCircle from "../../assets/profile-circle.png";
import {
BACKEND_URL,
BASE_URL_API,
LOCATIONS_TO_RETURN,
USER_PROJECTS_HEADER,
Expand Down Expand Up @@ -50,11 +49,9 @@ export default function Header(): JSX.Element {
const routeHistory = useLocationStore((state) => state.routeHistory);

const profileImageUrl =
`${BACKEND_URL.slice(
0,
BACKEND_URL.length - 1,
)}${BASE_URL_API}files/profile_pictures/${userData?.profile_image}` ??
profileCircle;
`${BASE_URL_API}files/profile_pictures/${
Copy link
Collaborator

@Cristhianzl Cristhianzl Jun 28, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Hi @nicoloboschi,

I appreciate the refactor that removes the code from the src tag in the HTML.

I just wanted to provide some context and ask a question regarding the variable BACKEND_URL.
This variable was created because Langflow's frontend and backend do not always run on the same server URL. Hence, BACKEND_URL was introduced to handle this scenario.
If we revert to using BASE_URL_API, do you think it might break this setup? What are your thoughts?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Hey @Cristhianzl
the scenario is exactly that one, backend and frontend as separate service.
Removing the host will make the browser to reuse the same base host of the current webpage.

since this is an API call the correct flow is:

  • call <frontend_service>/api/....
  • The frontend redirects the call to the backend (as it does for other calls)

I've verified the fix with different ports/host for backend and frontend and it works well.

Copy link
Collaborator

@Cristhianzl Cristhianzl Jun 28, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Makes sence..
Awesome, I will trust in you in that case hahah
Thanks for your explanation and reply!

LGTM

userData?.profile_image ?? "Space/046-rocket.svg"
}` ?? profileCircle;
async function checkForChanges(): Promise<void> {
if (nodes.length === 0) {
await removeFlow(id!);
Expand Down Expand Up @@ -202,14 +199,7 @@ export default function Header(): JSX.Element {
className="shrink-0"
>
<img
src={
`${BACKEND_URL.slice(
0,
BACKEND_URL.length - 1,
)}${BASE_URL_API}files/profile_pictures/${
userData?.profile_image ?? "Space/046-rocket.svg"
}` ?? profileCircle
}
src={profileImageUrl}
className="h-7 w-7 shrink-0 focus-visible:outline-0"
/>
</Button>
Expand All @@ -220,14 +210,7 @@ export default function Header(): JSX.Element {
<DropdownMenuLabel>
<div className="flex items-center gap-3">
<img
src={
`${BACKEND_URL.slice(
0,
BACKEND_URL.length - 1,
)}${BASE_URL_API}files/profile_pictures/${
userData?.profile_image ?? "Space/046-rocket.svg"
}` ?? profileCircle
}
src={profileImageUrl}
className="h-5 w-5 focus-visible:outline-0"
/>

Expand Down
5 changes: 1 addition & 4 deletions src/frontend/src/modals/IOModal/components/chatView/fileComponent/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,7 @@ export default function FileCard({

const fileWrapperClasses = getClasses(isHovered);

const imgSrc = `${BACKEND_URL.slice(
0,
BACKEND_URL.length - 1,
)}${BASE_URL_API}files/images/${content}`;
const imgSrc = `${BASE_URL_API}files/images/${content}`;

if (showFile) {
if (imgTypes.has(fileType)) {
Expand Down
7 changes: 1 addition & 6 deletions src/frontend/src/modals/IOModal/components/chatView/fileComponent/utils/handle-download.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,7 @@ export default async function handleDownload({
try {
isDownloading = true;

const response = await fetch(
`${BACKEND_URL.slice(
0,
BACKEND_URL.length - 1,
)}${BASE_URL_API}files/download/${content}`,
);
const response = await fetch(`${BASE_URL_API}files/download/${content}`);
if (!response.ok) {
throw new Error("Network response was not ok");
}
Expand Down
8 changes: 2 additions & 6 deletions ...ProfilePictureForm/components/profilePictureChooserComponent/hooks/use-preload-images.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@
import { useEffect } from "react";
import {
BACKEND_URL,
BASE_URL_API,
} from "../../../../../../../../../constants/constants";
import { BASE_URL_API } from "../../../../../../../../../constants/constants";

const usePreloadImages = (
profilePictures: { [key: string]: string[] },
Expand All @@ -24,12 +21,11 @@ const usePreloadImages = (

useEffect(() => {
const imageArray: string[] = [];
const firstUrl = `${BACKEND_URL.slice(0, BACKEND_URL.length - 1)}`;

Object.keys(profilePictures).flatMap((folder) =>
profilePictures[folder].map((path) =>
imageArray.push(
`${firstUrl}${BASE_URL_API}files/profile_pictures/${folder}/${path}`,
`${BASE_URL_API}files/profile_pictures/${folder}/${path}`,
),
),
);
Expand Down
10 changes: 2 additions & 8 deletions ...ralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,7 @@
import { useEffect, useRef, useState } from "react";
import { Button } from "../../../../../../../../components/ui/button";
import Loading from "../../../../../../../../components/ui/loading";
import {
BACKEND_URL,
BASE_URL_API,
} from "../../../../../../../../constants/constants";
import { BASE_URL_API } from "../../../../../../../../constants/constants";
import { useDarkStore } from "../../../../../../../../stores/darkStore";
import { cn } from "../../../../../../../../utils/utils";
import usePreloadImages from "./hooks/use-preload-images";
Expand Down Expand Up @@ -55,10 +52,7 @@ export default function ProfilePictureChooserComponent({
>
<img
key={idx}
src={`${BACKEND_URL.slice(
0,
BACKEND_URL.length - 1,
)}${BASE_URL_API}files/profile_pictures/${
src={`${BASE_URL_API}files/profile_pictures/${
folder + "/" + path
}`}
style={{
Expand Down