This is an automated email from the ASF dual-hosted git repository.
tiagobento pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-kie-tools.git
The following commit(s) were added to refs/heads/main by this push:
new c654813bd2c kie-issues#399: chrome-extension: Some DMN Files are not
correctly loaded (#2099)
c654813bd2c is described below
commit c654813bd2c17a414bb331def2b129e2c2c2c904
Author: Kbowers <[email protected]>
AuthorDate: Mon Jan 8 22:09:34 2024 +0100
kie-issues#399: chrome-extension: Some DMN Files are not correctly loaded
(#2099)
Co-authored-by: Kennedy Bowers <[email protected]>
---
.../src/app/components/common/GitHubContext.tsx | 6 +--
.../app/components/common/KogitoEditorIframe.tsx | 17 +++----
.../src/app/components/common/KogitoMenu.tsx | 56 ++++++++++++----------
.../src/app/components/common/customEffects.ts | 8 ++--
.../src/app/components/pr/IsolatedPrEditor.tsx | 38 ++++++++-------
.../src/app/components/pr/PrEditorsApp.tsx | 4 +-
.../src/app/components/pr/prEditors.tsx | 3 --
.../src/app/components/single/SingleEditorApp.tsx | 18 +++++--
.../app/components/single/SingleEditorToolbar.tsx | 47 +++++++++++-------
.../src/app/components/single/singleEditorView.tsx | 2 +-
packages/chrome-extension/src/app/github/api.ts | 5 +-
11 files changed, 115 insertions(+), 89 deletions(-)
diff --git
a/packages/chrome-extension/src/app/components/common/GitHubContext.tsx
b/packages/chrome-extension/src/app/components/common/GitHubContext.tsx
index 8d249abf3bc..1c14f1e6a5b 100644
--- a/packages/chrome-extension/src/app/components/common/GitHubContext.tsx
+++ b/packages/chrome-extension/src/app/components/common/GitHubContext.tsx
@@ -62,7 +62,7 @@ export const GitHubContextProvider: React.FC<{}> = (props) =>
{
const userIsLoggedIn = useCallback(() => {
return !!globals.dependencies.all.notificationIndicator();
- }, []);
+ }, [globals.dependencies.all]);
const octokit = useCallback(() => {
return octokitInstance;
@@ -77,7 +77,7 @@ export const GitHubContextProvider: React.FC<{}> = (props) =>
{
console.debug("Token not found.");
}
setReady(true);
- }, []);
+ }, [token]);
useLayoutEffect(() => {
if (!token) {
@@ -87,7 +87,7 @@ export const GitHubContextProvider: React.FC<{}> = (props) =>
{
setCookie(globals.githubAuthTokenCookieName, token);
octokitInstance = new Octokit({ auth: token });
}
- }, [token]);
+ }, [globals.githubAuthTokenCookieName, token]);
return (
<GitHubContext.Provider value={{ token, setToken, octokit, userIsLoggedIn
}}>
diff --git
a/packages/chrome-extension/src/app/components/common/KogitoEditorIframe.tsx
b/packages/chrome-extension/src/app/components/common/KogitoEditorIframe.tsx
index 49ed4085017..76007c75467 100644
--- a/packages/chrome-extension/src/app/components/common/KogitoEditorIframe.tsx
+++ b/packages/chrome-extension/src/app/components/common/KogitoEditorIframe.tsx
@@ -53,12 +53,13 @@ const RefForwardingKogitoEditorIframe:
React.ForwardRefRenderFunction<IsolatedEd
const { repoInfo, textMode, fullscreen, onEditorReady } =
useContext(IsolatedEditorContext);
const { locale } = useChromeExtensionI18n();
const wasOnTextMode = usePrevious(textMode);
+ const { openFileExtension, contentPath, getFileContents, readonly,
onSetContentError } = props;
const stateControl = useMemo(() => globalStateControl || new StateControl(),
[globalStateControl]);
const resourceContentService = useMemo(() => {
return resourceContentServiceFactory.createNew(githubApi.octokit(),
repoInfo);
- }, [repoInfo]);
+ }, [githubApi, repoInfo, resourceContentServiceFactory]);
const onResourceContentRequest = useCallback(
(request: ResourceContentRequest) =>
resourceContentService.get(request.path, request.opts),
@@ -84,13 +85,13 @@ const RefForwardingKogitoEditorIframe:
React.ForwardRefRenderFunction<IsolatedEd
// When changing from textMode to !textMode, we should update the diagram
content
useEffect(() => {
if (!textMode && wasOnTextMode) {
- props.getFileContents().then((content) =>
editor?.setContent(props.contentPath, content ?? ""));
+ getFileContents().then((content) => editor?.setContent(contentPath,
content ?? ""));
}
- }, [textMode, wasOnTextMode, editor]);
+ }, [textMode, wasOnTextMode, editor, getFileContents, contentPath]);
// When !textMode, we should listen for changes on the diagram to update
GitHub's default text editor.
useEffect(() => {
- if (props.readonly || textMode || !editor) {
+ if (readonly || textMode || !editor) {
return;
}
@@ -105,7 +106,7 @@ const RefForwardingKogitoEditorIframe:
React.ForwardRefRenderFunction<IsolatedEd
});
});
return () =>
editor.getStateControl().unsubscribe(stateControlSubscription);
- }, [textMode, editor]);
+ }, [textMode, editor, readonly]);
// Forward reference methods to set content programmatically vs property
useImperativeHandle(
@@ -116,10 +117,10 @@ const RefForwardingKogitoEditorIframe:
React.ForwardRefRenderFunction<IsolatedEd
}
return {
- setContent: (content: string) => editor.setContent(props.contentPath,
content),
+ setContent: (content: string) => editor.setContent(contentPath,
content),
};
},
- [editor]
+ [editor, contentPath]
);
return (
@@ -132,7 +133,7 @@ const RefForwardingKogitoEditorIframe:
React.ForwardRefRenderFunction<IsolatedEd
kogitoEditor_ready={onEditorReady}
kogitoWorkspace_resourceContentRequest={onResourceContentRequest}
kogitoWorkspace_resourceListRequest={onResourceContentList}
- kogitoEditor_setContentError={props.onSetContentError}
+ kogitoEditor_setContentError={onSetContentError}
editorEnvelopeLocator={envelopeLocator}
locale={locale}
customChannelApiImpl={customChannelApiImpl}
diff --git a/packages/chrome-extension/src/app/components/common/KogitoMenu.tsx
b/packages/chrome-extension/src/app/components/common/KogitoMenu.tsx
index 1c78265aa2f..e690461fa42 100644
--- a/packages/chrome-extension/src/app/components/common/KogitoMenu.tsx
+++ b/packages/chrome-extension/src/app/components/common/KogitoMenu.tsx
@@ -37,36 +37,40 @@ export function KogitoMenu() {
const [isInfoPopOverOpen, setInfoPopOverOpen] = useState(false);
const [potentialToken, setPotentialToken] = useState("");
- async function updateToken(token?: string) {
- const validToken = await tokenIsValid(token);
-
- if (validToken) {
- gitHubApi.setToken(token!);
- setPotentialToken("");
- } else {
- gitHubApi.setToken("");
- }
-
- return validToken;
- }
+ const updateToken = useCallback(
+ async (token?: string) => {
+ const validToken = await tokenIsValid(token);
+ if (validToken) {
+ gitHubApi.setToken(token!);
+ setPotentialToken("");
+ } else {
+ gitHubApi.setToken("");
+ }
+ return validToken;
+ },
+ [gitHubApi]
+ );
useEffect(() => {
updateToken(gitHubApi.token).then(() => {
console.debug("Checked GitHub token.");
});
- }, []);
-
- const onPaste = useCallback((e) => {
- const token = e.clipboardData.getData("text/plain").slice(0,
GITHUB_OAUTH_TOKEN_SIZE);
- setPotentialToken(token);
- setTimeout(async () => {
- const wasValid = await updateToken(token);
- if (wasValid) {
- setTimeout(() => setWholeMenuOpen(false), 2000);
- }
- inputRef.current!.setSelectionRange(0, 0);
- }, 0);
- }, []);
+ }, [gitHubApi.token, updateToken]);
+
+ const onPaste = useCallback(
+ (e) => {
+ const token = e.clipboardData.getData("text/plain").slice(0,
GITHUB_OAUTH_TOKEN_SIZE);
+ setPotentialToken(token);
+ setTimeout(async () => {
+ const wasValid = await updateToken(token);
+ if (wasValid) {
+ setTimeout(() => setWholeMenuOpen(false), 2000);
+ }
+ inputRef.current!.setSelectionRange(0, 0);
+ }, 0);
+ },
+ [updateToken, setPotentialToken, setWholeMenuOpen]
+ );
const onReset = useCallback(() => {
gitHubApi.setToken("");
@@ -74,7 +78,7 @@ export function KogitoMenu() {
setTimeout(() => {
inputRef.current!.focus();
}, 0);
- }, []);
+ }, [gitHubApi]);
const toggleInfoPopOver = useCallback(() => {
setInfoPopOverOpen(!isInfoPopOverOpen);
diff --git
a/packages/chrome-extension/src/app/components/common/customEffects.ts
b/packages/chrome-extension/src/app/components/common/customEffects.ts
index bd29ea50ec6..5003662a48f 100644
--- a/packages/chrome-extension/src/app/components/common/customEffects.ts
+++ b/packages/chrome-extension/src/app/components/common/customEffects.ts
@@ -27,7 +27,9 @@ export function useEffectAfterFirstRender(func: () =>
ReturnType<EffectCallback>
} else {
firstRender.current = false;
}
- }, deps);
+ // Using deps as an extension mechanism to allow callers to define their
own custom dependencies.
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [func, ...deps]);
}
export function useIsolatedEditorTogglingEffect(
@@ -43,7 +45,7 @@ export function useIsolatedEditorTogglingEffect(
githubTextEditorToReplace.classList.add("hidden");
iframeContainer.classList.remove("hidden");
}
- }, [textMode]);
+ }, [githubTextEditorToReplace.classList, iframeContainer.classList,
textMode]);
}
export function useInitialAsyncCallEffect<T>(promise: () => Promise<T>,
callback: (a: T) => void) {
@@ -60,5 +62,5 @@ export function useInitialAsyncCallEffect<T>(promise: () =>
Promise<T>, callback
return () => {
canceled = true;
};
- }, []);
+ }, [callback, promise]);
}
diff --git
a/packages/chrome-extension/src/app/components/pr/IsolatedPrEditor.tsx
b/packages/chrome-extension/src/app/components/pr/IsolatedPrEditor.tsx
index 8f0f3714832..4ca16836544 100644
--- a/packages/chrome-extension/src/app/components/pr/IsolatedPrEditor.tsx
+++ b/packages/chrome-extension/src/app/components/pr/IsolatedPrEditor.tsx
@@ -45,7 +45,6 @@ export interface PrInfo {
targetGitRef: string;
org: string;
gitRef: string;
- commitSHA: string;
}
export function IsolatedPrEditor(props: {
@@ -65,8 +64,8 @@ export function IsolatedPrEditor(props: {
const [fileStatusOnPr, setFileStatusOnPr] = useState(FileStatusOnPr.UNKNOWN);
const { isolatedEditorRef } = useIsolatedEditorRef();
- const originalFilePath = useMemo(() =>
getOriginalFilePath(props.unprocessedFilePath), []);
- const modifiedFilePath = useMemo(() =>
getModifiedFilePath(props.unprocessedFilePath), []);
+ const originalFilePath = useMemo(() =>
getOriginalFilePath(props.unprocessedFilePath), [props.unprocessedFilePath]);
+ const modifiedFilePath = useMemo(() =>
getModifiedFilePath(props.unprocessedFilePath), [props.unprocessedFilePath]);
useIsolatedEditorTogglingEffect(
textMode,
@@ -74,9 +73,13 @@ export function IsolatedPrEditor(props: {
props.githubTextEditorToReplace
);
- useInitialAsyncCallEffect(() => {
- return discoverFileStatusOnPr(githubApi.octokit(), props.prInfo,
originalFilePath, modifiedFilePath);
- }, setFileStatusOnPr);
+ useInitialAsyncCallEffect(
+ useCallback(
+ () => discoverFileStatusOnPr(githubApi.octokit(), props.prInfo,
originalFilePath, modifiedFilePath),
+ [githubApi, props.prInfo, originalFilePath, modifiedFilePath]
+ ),
+ setFileStatusOnPr
+ );
const closeDiagram = useCallback(() => {
setTextMode(true);
@@ -92,7 +95,7 @@ export function IsolatedPrEditor(props: {
return showOriginal || fileStatusOnPr === FileStatusOnPr.DELETED
? () => getOriginalFileContents(githubApi.octokit(), props.prInfo,
originalFilePath)
: () => getModifiedFileContents(githubApi.octokit(), props.prInfo,
modifiedFilePath);
- }, [showOriginal, fileStatusOnPr, originalFilePath, modifiedFilePath,
githubApi.octokit]);
+ }, [showOriginal, fileStatusOnPr, githubApi, props.prInfo, originalFilePath,
modifiedFilePath]);
const shouldAddLinkToOriginalFile = useMemo(() => {
return fileStatusOnPr === FileStatusOnPr.CHANGED || fileStatusOnPr ===
FileStatusOnPr.DELETED;
@@ -114,7 +117,14 @@ export function IsolatedPrEditor(props: {
gitref: props.prInfo.gitRef,
repo: props.prInfo.repo,
};
- }, [showOriginal]);
+ }, [
+ props.prInfo.gitRef,
+ props.prInfo.org,
+ props.prInfo.repo,
+ props.prInfo.targetGitRef,
+ props.prInfo.targetOrg,
+ showOriginal,
+ ]);
const onEditorReady = useCallback(() => {
setEditorReady(true);
@@ -284,19 +294,11 @@ function iframeContainer(id: string, container:
HTMLElement) {
}
function getModifiedFileContents(octokit: Octokit, prInfo: PrInfo,
modifiedFilePath: string) {
- return fetchFile(octokit, prInfo.org, prInfo.repo, prInfo.gitRef,
modifiedFilePath, undefined, prInfo.commitSHA);
+ return fetchFile(octokit, prInfo.org, prInfo.repo, prInfo.gitRef,
modifiedFilePath, undefined);
}
function getOriginalFileContents(octokit: Octokit, prInfo: PrInfo,
originalFilePath: string) {
- return fetchFile(
- octokit,
- prInfo.targetOrg,
- prInfo.repo,
- prInfo.targetGitRef,
- originalFilePath,
- undefined,
- prInfo.commitSHA
- );
+ return fetchFile(octokit, prInfo.targetOrg, prInfo.repo,
prInfo.targetGitRef, originalFilePath, undefined);
}
function viewOriginalFileHref(prInfo: PrInfo, originalFilePath: string) {
diff --git a/packages/chrome-extension/src/app/components/pr/PrEditorsApp.tsx
b/packages/chrome-extension/src/app/components/pr/PrEditorsApp.tsx
index 8573cfa92d8..33b0311bc83 100644
--- a/packages/chrome-extension/src/app/components/pr/PrEditorsApp.tsx
+++ b/packages/chrome-extension/src/app/components/pr/PrEditorsApp.tsx
@@ -32,7 +32,7 @@ export function PrEditorsApp(props: { prInfo: PrInfo }) {
useEffect(() => {
setPrFileContainers(supportedPrFileElements(globals.logger,
globals.envelopeLocator, globals.dependencies));
- }, []);
+ }, [globals.dependencies, globals.envelopeLocator, globals.logger]);
useEffect(() => {
const observer = new MutationObserver((mutations) => {
@@ -59,7 +59,7 @@ export function PrEditorsApp(props: { prInfo: PrInfo }) {
return () => {
observer.disconnect();
};
- }, [prFileContainers]);
+ }, [globals.dependencies, globals.envelopeLocator, globals.logger,
prFileContainers]);
return (
<>
diff --git a/packages/chrome-extension/src/app/components/pr/prEditors.tsx
b/packages/chrome-extension/src/app/components/pr/prEditors.tsx
index d4d3b1df066..0d97140abd0 100644
--- a/packages/chrome-extension/src/app/components/pr/prEditors.tsx
+++ b/packages/chrome-extension/src/app/components/pr/prEditors.tsx
@@ -65,7 +65,6 @@ export function parsePrInfo(dependencies: Dependencies):
PrInfo {
const targetOrganization = window.location.pathname.split("/")[1];
const repository = window.location.pathname.split("/")[2];
- const commitSHA = dependencies.all.getViewFileButton()?.href.split("/")[6];
// PR is within the same organization
if (prInfos.length < 6) {
return {
@@ -74,7 +73,6 @@ export function parsePrInfo(dependencies: Dependencies):
PrInfo {
targetGitRef: prInfos[1],
org: targetOrganization,
gitRef: prInfos[3],
- commitSHA: commitSHA ?? "",
};
}
@@ -85,7 +83,6 @@ export function parsePrInfo(dependencies: Dependencies):
PrInfo {
targetGitRef: prInfos[2],
org: prInfos[4],
gitRef: prInfos[5],
- commitSHA: commitSHA ?? "",
};
}
diff --git
a/packages/chrome-extension/src/app/components/single/SingleEditorApp.tsx
b/packages/chrome-extension/src/app/components/single/SingleEditorApp.tsx
index 064ef4a483a..f06a4f7fea1 100644
--- a/packages/chrome-extension/src/app/components/single/SingleEditorApp.tsx
+++ b/packages/chrome-extension/src/app/components/single/SingleEditorApp.tsx
@@ -38,7 +38,7 @@ function useFullScreenEditorTogglingEffect(fullscreen:
boolean) {
} else {
iframeFullscreenContainer(globals.id,
globals.dependencies.all.body()).classList.remove("hidden");
}
- }, [fullscreen]);
+ }, [fullscreen, globals.dependencies.all, globals.id]);
}
export function SingleEditorApp(props: {
@@ -78,14 +78,22 @@ export function SingleEditorApp(props: {
onSetContentError={onSetContentError}
/>
),
- [textMode, onSetContentError]
+ [
+ isolatedEditorRef,
+ props.getFileContents,
+ props.fileInfo.path,
+ props.openFileExtension,
+ props.readonly,
+ textMode,
+ onSetContentError,
+ ]
);
const exitFullScreen = useCallback(() => {
setFullscreen(false);
setTextModeAvailable(false);
globals.dependencies.all.showDocumentBody();
- }, []);
+ }, [globals.dependencies.all]);
const deactivateTextMode = useCallback(() => {
setTextMode(false);
@@ -99,7 +107,7 @@ export function SingleEditorApp(props: {
const goFullScreen = useCallback(() => {
setFullscreen(true);
globals.dependencies.all.hideDocumentBody();
- }, []);
+ }, [globals.dependencies.all]);
const { getFileContents, getFileName } = props;
@@ -130,7 +138,7 @@ export function SingleEditorApp(props: {
owner: props.fileInfo.org,
repo: props.fileInfo.repo,
};
- }, []);
+ }, [props.fileInfo.gitRef, props.fileInfo.org, props.fileInfo.repo]);
return (
<>
diff --git
a/packages/chrome-extension/src/app/components/single/SingleEditorToolbar.tsx
b/packages/chrome-extension/src/app/components/single/SingleEditorToolbar.tsx
index 36d99753eec..8424468a568 100644
---
a/packages/chrome-extension/src/app/components/single/SingleEditorToolbar.tsx
+++
b/packages/chrome-extension/src/app/components/single/SingleEditorToolbar.tsx
@@ -40,26 +40,39 @@ export function SingleEditorToolbar(props: {
const linkToExternalEditorTextAreaRef = useRef<HTMLTextAreaElement>(null);
const copyLinkSuccessAlertRef = useRef<HTMLDivElement>(null);
const { i18n } = useChromeExtensionI18n();
+ const { onFullScreen, onSeeAsSource, onSeeAsDiagram, onOpenInExternalEditor
} = props;
- const goFullScreen = useCallback((e: any) => {
- e.preventDefault();
- props.onFullScreen();
- }, []);
+ const goFullScreen = useCallback(
+ (e: any) => {
+ e.preventDefault();
+ onFullScreen();
+ },
+ [onFullScreen]
+ );
- const seeAsSource = useCallback((e: any) => {
- e.preventDefault();
- props.onSeeAsSource();
- }, []);
+ const seeAsSource = useCallback(
+ (e: any) => {
+ e.preventDefault();
+ onSeeAsSource();
+ },
+ [onSeeAsSource]
+ );
- const seeAsDiagram = useCallback((e: any) => {
- e.preventDefault();
- props.onSeeAsDiagram();
- }, []);
+ const seeAsDiagram = useCallback(
+ (e: any) => {
+ e.preventDefault();
+ onSeeAsDiagram();
+ },
+ [onSeeAsDiagram]
+ );
- const openInExternalEditor = useCallback((e: any) => {
- e.preventDefault();
- props.onOpenInExternalEditor?.();
- }, []);
+ const openInExternalEditor = useCallback(
+ (e: any) => {
+ e.preventDefault();
+ onOpenInExternalEditor?.();
+ },
+ [onOpenInExternalEditor]
+ );
const copyLinkToExternalEditor = useCallback((e: any) => {
e.preventDefault();
@@ -83,7 +96,7 @@ export function SingleEditorToolbar(props: {
return () => {
/* Do nothing */
};
- }, [copyLinkSuccessAlertVisible]);
+ }, [closeCopyLinkSuccessAlert, copyLinkSuccessAlertVisible]);
return (
<>
diff --git
a/packages/chrome-extension/src/app/components/single/singleEditorView.tsx
b/packages/chrome-extension/src/app/components/single/singleEditorView.tsx
index bb034b2ed6f..26f0d93f545 100644
--- a/packages/chrome-extension/src/app/components/single/singleEditorView.tsx
+++ b/packages/chrome-extension/src/app/components/single/singleEditorView.tsx
@@ -99,7 +99,7 @@ function SingleEditorViewApp(props: { fileInfo: FileInfo;
openFileExtension: str
props.fileInfo.gitRef,
props.fileInfo.path
),
- []
+ [githubApi, props.fileInfo.gitRef, props.fileInfo.org,
props.fileInfo.path, props.fileInfo.repo]
);
const getFileName = useCallback(() => {
return decodeURIComponent(props.fileInfo.path.split("/").pop()!);
diff --git a/packages/chrome-extension/src/app/github/api.ts
b/packages/chrome-extension/src/app/github/api.ts
index 240f1dac279..0e86f6ed414 100644
--- a/packages/chrome-extension/src/app/github/api.ts
+++ b/packages/chrome-extension/src/app/github/api.ts
@@ -26,8 +26,7 @@ export function fetchFile(
repo: string,
ref: string,
path: string,
- contentType?: ContentType,
- commitSHA?: string
+ contentType?: ContentType
) {
return octokit.repos
.getContent({
@@ -39,7 +38,7 @@ export function fetchFile(
.then((res) => (contentType === ContentType.BINARY ? (res.data as
any).content : atob((res.data as any).content)))
.catch((e) => {
console.debug(`Error fetching ${path} with Octokit. Fallback is
'raw.githubusercontent.com'.`);
- return
fetch(`https://raw.githubusercontent.com/${org}/${repo}/${commitSHA}/${path}`).then((res)
=>
+ return
fetch(`https://raw.githubusercontent.com/${org}/${repo}/${ref}/${path}`).then((res)
=>
res.ok ? res.text() : Promise.resolve(undefined)
);
});
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
