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

Mitigate bad url creation in ToolsButton by adding explicit param #816

Merged
merged 1 commit into from
Apr 27, 2022
Merged

Mitigate bad url creation in ToolsButton by adding explicit param #816

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
37 changes: 20 additions & 17 deletions static/js/ConnectionsPanel.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -315,9 +315,9 @@ class ConnectionsPanel extends Component {
masterPanelSheetId={this.props.masterPanelSheetId}
/> :
<div className="topToolsButtons">
<ToolsButton en="About this Text" he="אודות הטקסט" image="about-text.svg" onClick={() => this.props.setConnectionsMode("About")} />
<ToolsButton en="Table of Contents" he="תוכן העניינים" image="text-navigation.svg" onClick={() => this.props.setConnectionsMode("Navigation")} />
<ToolsButton en="Translations" he="תרגומים" image="translation.svg" onClick={() => this.props.setConnectionsMode("Translations")} count={resourcesButtonCounts.translations} />
<ToolsButton en="About this Text" he="אודות הטקסט" image="about-text.svg" urlConnectionsMode="About" onClick={() => this.props.setConnectionsMode("About")} />
<ToolsButton en="Table of Contents" he="תוכן העניינים" image="text-navigation.svg" urlConnectionsMode="Navigation" onClick={() => this.props.setConnectionsMode("Navigation")} />
<ToolsButton en="Translations" he="תרגומים" image="translation.svg" urlConnectionsMode="Translations" onClick={() => this.props.setConnectionsMode("Translations")} count={resourcesButtonCounts.translations} />
</div>
}
{showConnectionSummary ?
Expand Down Expand Up @@ -348,8 +348,8 @@ class ConnectionsPanel extends Component {
// looked at
(this.props.masterPanelMode == "Sheet" && this.props.title !== "Sheet") ?
<>
<ToolsButton en="About this Source" he="אודות מקור זה" image="about-text.svg" onClick={() => this.props.setConnectionsMode("About")} />
<ToolsButton en="Translations" he="תרגומים" image="translation.svg" count={resourcesButtonCounts["translations"]} onClick={() => this.props.setConnectionsMode("Translations")} />
<ToolsButton en="About this Source" he="אודות מקור זה" image="about-text.svg" urlConnectionsMode="About" onClick={() => this.props.setConnectionsMode("About")} />
<ToolsButton en="Translations" he="תרגומים" image="translation.svg" count={resourcesButtonCounts["translations"]} urlConnectionsMode="Translations" onClick={() => this.props.setConnectionsMode("Translations")} />
</>
:
null
Expand Down Expand Up @@ -756,11 +756,11 @@ const ResourcesList = ({ masterPanelMode, setConnectionsMode, counts }) => {
// A list of Resources in addition to connection
return (
<div className="toolButtonsList">
<ToolsButton en="Sheets" he="דפי מקורות" image="sheet.svg" count={counts["sheets"]} onClick={() => setConnectionsMode("Sheets")} />
<ToolsButton en="Web Pages" he="דפי אינטרנט" image="webpages.svg" count={counts["webpages"]} onClick={() => setConnectionsMode("WebPages")} />
<ToolsButton en="Topics" he="נושאים" image="hashtag-icon.svg" count={counts["topics"]} onClick={() => setConnectionsMode("Topics")} />
<ToolsButton en="Manuscripts" he="כתבי יד" image="manuscripts.svg" count={counts["manuscripts"]} onClick={() => setConnectionsMode("manuscripts")} />
<ToolsButton en="Torah Readings" he="קריאה בתורה" image="torahreadings.svg" count={counts["audio"]} onClick={() => setConnectionsMode("Torah Readings")} />
<ToolsButton en="Sheets" he="דפי מקורות" image="sheet.svg" count={counts["sheets"]} urlConnectionsMode="Sheets" onClick={() => setConnectionsMode("Sheets")} />
<ToolsButton en="Web Pages" he="דפי אינטרנט" image="webpages.svg" count={counts["webpages"]} urlConnectionsMode="WebPages" onClick={() => setConnectionsMode("WebPages")} />
<ToolsButton en="Topics" he="נושאים" image="hashtag-icon.svg" count={counts["topics"]} urlConnectionsMode="Topics" onClick={() => setConnectionsMode("Topics")} />
<ToolsButton en="Manuscripts" he="כתבי יד" image="manuscripts.svg" count={counts["manuscripts"]} urlConnectionsMode="manuscripts" onClick={() => setConnectionsMode("manuscripts")} />
<ToolsButton en="Torah Readings" he="קריאה בתורה" image="torahreadings.svg" count={counts["audio"]} urlConnectionsMode="Torah Readings" onClick={() => setConnectionsMode("Torah Readings")} />
</div>
);
}
Expand All @@ -774,9 +774,9 @@ const ToolsList = ({ setConnectionsMode, toggleSignUpModal, openComparePanel, co
return (
<div className="toolButtonsList">
<ToolsButton en="Add to Sheet" he="הוספה לדף מקורות" image="sheetsplus.svg" onClick={() => !Sefaria._uid ? toggleSignUpModal() : setConnectionsMode("Add To Sheet", { "addSource": "mainPanel" })} />
<ToolsButton en="Dictionaries" he="מילונים" image="dictionaries.svg" onClick={() => setConnectionsMode("Lexicon")} />
<ToolsButton en="Dictionaries" he="מילונים" image="dictionaries.svg" urlConnectionsMode="Lexicon" onClick={() => setConnectionsMode("Lexicon")} />
{openComparePanel ? <ToolsButton en="Compare Text" he="טקסט להשוואה" image="compare-panel.svg" onClick={openComparePanel} /> : null}
<ToolsButton en="Notes" he="הערות" image="notes.svg" alwaysShow={true} count={counts["notes"]} onClick={() => !Sefaria._uid ? toggleSignUpModal() : setConnectionsMode("Notes")} />
<ToolsButton en="Notes" he="הערות" image="notes.svg" alwaysShow={true} count={counts["notes"]} urlConnectionsMode="Notes" onClick={() => !Sefaria._uid ? toggleSignUpModal() : setConnectionsMode("Notes")} />
<ToolsButton en="Chavruta" he="חברותא" image="chavruta.svg" onClick={() => !Sefaria._uid ? toggleSignUpModal() : setConnectionsMode("Chavruta")} />
{masterPanelMode !== "Sheet" ? <ToolsButton en="Share" he="שיתוף" image="share.svg" onClick={() => setConnectionsMode("Share")} /> : null}
<ToolsButton en="Feedback" he="משוב" image="feedback.svg" onClick={() => setConnectionsMode("Feedback")} />
Expand Down Expand Up @@ -809,9 +809,9 @@ const AboutSheetButtons = ({ setConnectionsMode, masterPanelSheetId }) => {

return (<div className="topToolsButtons">
{isOwner ?
<ToolsButton en="Publish Settings" he="הגדרות פרסום" image="about-text.svg" onClick={() => setConnectionsMode("AboutSheet")} />
<ToolsButton en="Publish Settings" he="הגדרות פרסום" image="about-text.svg" urlConnectionsMode="AboutSheet" onClick={() => setConnectionsMode("AboutSheet")} />
:
<ToolsButton en="About this Sheet" he="אודות דף המקורות" image="about-text.svg" onClick={() => setConnectionsMode("AboutSheet")} />
<ToolsButton en="About this Sheet" he="אודות דף המקורות" image="about-text.svg" urlConnectionsMode="AboutSheet" onClick={() => setConnectionsMode("AboutSheet")} />
}
{showEditButton ?
<ToolsButton en="Edit" he="עריכה" image="note.svg" onClick={() => {
Expand Down Expand Up @@ -969,7 +969,7 @@ class SheetNodeConnectionTools extends Component {
{this.props.multiPanel ?
<ToolsButton en="Other Text" he="טקסט נוסף" icon="search" onClick={this.props.openComparePanel} />
: null}
<ToolsButton en="Sheets" he="דפי מקורות" image="sheet.svg" count={this.props.sheetsCount} onClick={() => this.props.setConnectionsMode("Sheets")} />
<ToolsButton en="Sheets" he="דפי מקורות" image="sheet.svg" urlConnectionsMode="Sheets" count={this.props.sheetsCount} onClick={() => this.props.setConnectionsMode("Sheets")} />
<ToolsButton en="Feedback" he="משוב" icon="comment" onClick={() => this.props.setConnectionsMode("Feedback")} />
</div>);
}
Expand Down Expand Up @@ -1346,7 +1346,9 @@ AdvancedToolsList.propTypes = {
};


const ToolsButton = ({ en, he, icon, image, count = null, onClick, control = "interface", typeface = "system", alwaysShow = false, secondaryHe, secondaryEn, greyColor=false }) => {
const ToolsButton = ({ en, he, onClick, urlConnectionsMode = null, icon, image,
count = null, control = "interface", typeface = "system", alwaysShow = false,
secondaryHe, secondaryEn, greyColor=false }) => {
const clickHandler = (e) => {
e.preventDefault();
onClick();
Expand All @@ -1360,7 +1362,8 @@ const ToolsButton = ({ en, he, icon, image, count = null, onClick, control = "in
} else if (image) {
iconElem = (<img src={"/static/img/" + image} className="toolsButtonIcon" alt="" />);
}
const url = Sefaria.util.replaceUrlParam("with", en);
//We only want to generate reloadable urls for states where we actually respond to said url. See ReaderApp.makeHistoryState()- sidebarModes.
const url = urlConnectionsMode ? Sefaria.util.replaceUrlParam("with", urlConnectionsMode) : null;
const nameClass = en.camelize();
const wrapperClasses = classNames({ toolsButton: 1, [nameClass]: 1, [control + "Control"]: 1, [typeface + "Typeface"]: 1, noselect: 1, greyColor: greyColor })
return (
Expand Down
1 change: 1 addition & 0 deletions static/js/sefaria/util.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -695,6 +695,7 @@ class Util {
return vars;
}
static replaceUrlParam(paramName, paramValue){
//TODO: This does not create the correct urls for multipanel views. It ends up just tacking on an extra "with" param on the end
var url = INBROWSER ? window.location.href : this._initialPath;
if(paramValue == null)
paramValue = '';
Expand Down