Skip to content

Remove JQuery from renderer.js #235

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

Draft
acrosman wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

Remove JQuery from renderer.js #235

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b7e0b5e
Updates to remove most JQuery references
acrosman May 10, 2025
156caf1
Swap json viewer plugin for library
acrosman May 10, 2025
3a67d95
HTML and JS Updates to remove JQuery references.
acrosman May 10, 2025
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
10 changes: 6 additions & 4 deletions app/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
<meta http-equiv="Content-Security-Policy"
content="default-src 'self'; font-src 'self' https://fonts.gstatic.com; style-src 'self' https://fonts.googleapis.com; img-src 'self' data:; object-src 'none'">
<link rel="stylesheet" id="css-theme-link" href="../node_modules/bootswatch/dist/cyborg/bootstrap.min.css">
<link rel="stylesheet" href="../node_modules/jquery.json-viewer/json-viewer/jquery.json-viewer.css">
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/bootstrap-icons.css">
<link rel="stylesheet" href="dashboard.css">
<title>Salesforce &#11000; Sql</title>
Expand Down Expand Up @@ -223,7 +222,8 @@ <h5 class="card-title">Instructions</h5>
<div class="col-md-8">
<div class="card bg-default" id=raw-response-wrapper>
<h2>Last Response:</h2>
<pre id="raw-response" class="pre-scrollable"></pre>
<andypf-json-viewer data="" theme="monokai" expanded="3" show-toolbar="false"
id="raw-response"></andypf-json-viewer>
<button type="button" id="show-console" class="btn btn-info" value="Show Log Console"
data-bs-toggle="modal" data-bs-target="#consoleModal">Show Log Console</button>
<div class="text-center alert" id="loader-indicator">
Expand Down Expand Up @@ -329,7 +329,9 @@ <h3 id="results-summary-count"></h3>
<h3></h3>
<p></p>
</div>
<div id="results-object-viewer"></div>
<andypf-json-viewer indent="2" expanded="true" theme="monokai" show-data-types="false"
show-toolbar="true" expand-icon-type="arrow" show-copy="false" show-size="true"
data=''></andypf-json-viewer>
</div>
</div>
<div class="tab-pane fade" id="nav-sql" role="tabpanel" aria-labelledby="nav-sql-tab">
Expand All @@ -354,7 +356,7 @@ <h3></h3>
</body>
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../node_modules/jquery.json-viewer/json-viewer/jquery.json-viewer.js"></script>
<script src="../node_modules/@andypf/json-viewer/dist/iife/index.js"></script>
<script src="render.js"></script>

</html>
139 changes: 73 additions & 66 deletions app/render.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,49 @@
/* global $ */
// Initial interface setup using jQuery (since it's around from bootstrap anyway).
$.when($.ready).then(() => {
/* global bootstrap $ */

Check warning on line 1 in app/render.js

View workflow job for this annotation

GitHub Actions / Lint 

'$' is defined but never used
// Replace jQuery ready handler
document.addEventListener('DOMContentLoaded', () => {
// Get the current application preferences.
window.api.send('get_preferences');

// Hide the places for handling responses until we have some.
$('#org-status').hide();
$('#results-table-wrapper').hide();
$('#results-object-viewer-wrapper').hide();
document.getElementById('org-status').style.display = 'none';
document.getElementById('results-table-wrapper').style.display = 'none';
document.getElementById('results-object-viewer-wrapper').style.display = 'none';

// Setup next buttons.
$('button.btn-next').on('click', (event) => {
event.preventDefault();
const tab = $(event.target).data('next');
$(tab).tab('show');
document.querySelectorAll('button.btn-next').forEach((button) => {
button.addEventListener('click', (event) => {
event.preventDefault();
const tab = event.target.dataset.next;
// Bootstrap tab show
const tabEl = document.querySelector(tab);
const bsTab = new bootstrap.Tab(tabEl);
bsTab.show();
});
});

// Setup prev buttons.
$('button.btn-prev').on('click', (event) => {
event.preventDefault();
const tab = $(event.target).data('prev');
$(tab).tab('show');
document.querySelectorAll('button.btn-prev').forEach((button) => {
button.addEventListener('click', (event) => {
event.preventDefault();
const tab = event.target.dataset.prev;
const tabEl = document.querySelector(tab);
const bsTab = new bootstrap.Tab(tabEl);
bsTab.show();
});
});

// Setup Find button.
$('#btn-find-in-page').on('click', (event) => {
document.getElementById('btn-find-in-page').addEventListener('click', (event) => {
event.preventDefault();
let searchDir;
// Get the search
const searchText = $('#find-in-page-text').val().trim();
const searchText = document.getElementById('find-in-page-text').value.trim();

// Trigger the search if text was provided.
if (searchText) {
// Set direction.
searchDir = 'forward';
if ($('#chk-find-direction').prop('checked')) {
if (document.getElementById('chk-find-direction').checked) {
searchDir = 'back';
}

Expand All @@ -46,19 +55,25 @@
});

// Setup Object Select All
$('#btn-select-all-objects').on('click', (event) => {
document.getElementById('btn-select-all-objects').addEventListener('click', (event) => {
event.preventDefault();
$('#results-table input[type=checkbox]').prop('checked', true);
document.querySelectorAll('#results-table input[type=checkbox]')
.forEach((checkbox) => {
checkbox.checked = true;
});
});

// Setup Object Select All
$('#btn-deselect-all-objects').on('click', (event) => {
// Setup Object Deselect All
document.getElementById('btn-deselect-all-objects').addEventListener('click', (event) => {
event.preventDefault();
$('#results-table input[type=checkbox]').prop('checked', false);
document.querySelectorAll('#results-table input[type=checkbox]')
.forEach((checkbox) => {
checkbox.checked = false;
});
});

// Hide loader.
$('#loader-indicator').hide();
document.getElementById('loader-indicator').style.display = 'none';
});

// ============= Helpers ==============
Expand All @@ -80,12 +95,11 @@
* @param {Object} responseObject The JSForce response object.
*/
const displayRawResponse = (responseObject) => {
$('#raw-response').jsonViewer(responseObject, {
collapsed: true,
rootCollapsable: false,
withQuotes: true,
withLinks: true,
});
const viewer = document.getElementById('raw-response');
if (viewer) {
viewer.data = JSON.stringify(responseObject);
viewer.expanded = 1;
}
};

/**
Expand Down Expand Up @@ -137,12 +151,6 @@

if (data) {
displayRawResponse(data);
$(mesData).jsonViewer(data, {
collapsed: true,
rootCollapsable: false,
withQuotes: true,
withLinks: true,
});
}
}

Expand Down Expand Up @@ -308,20 +316,20 @@
};

const showLoader = (message) => {
$('#loader-indicator .loader-message').text(message);
$('#loader-indicator').show();
$('#message-wrapper').hide();
document.querySelector('#loader-indicator .loader-message').textContent = message;
document.getElementById('loader-indicator').style.display = 'block';
document.getElementById('message-wrapper').style.display = 'none';
};

const hideLoader = () => {
$('#loader-indicator').hide();
$('#message-wrapper').show();
document.getElementById('loader-indicator').style.display = 'none';
document.getElementById('message-wrapper').style.display = 'block';
};

const updateMessage = (message) => {
$('#message-wrapper').show();
document.getElementById('message-wrapper').style.display = 'block';
const messageArea = document.getElementById('results-message-only');
messageArea.innerText = message;
messageArea.textContent = message;
};

/**
Expand All @@ -331,23 +339,16 @@
*/
const refreshObjectDisplay = (data) => {
showLoader('Refreshing database schema display');
$('#results-object-viewer-wrapper .results-summary h3').text(data.message);
document.querySelector('#results-object-viewer-wrapper .results-summary h3').textContent = data.message;

// When this is displaying a describe add a little helpful summary.
if (Object.prototype.hasOwnProperty.call(data, 'response.fields')) {
$('#results-object-viewer-wrapper .results-summary p').text(
`Found ${data.response.fields.length} fields and ${data.response.recordTypeInfos.length} record types.`,
);
document.querySelector('#results-object-viewer-wrapper .results-summary p').textContent = `Found ${data.response.fields.length} fields and ${data.response.recordTypeInfos.length} record types.`;
} else {
$('#results-object-viewer-wrapper .results-summary p').text('');
document.querySelector('#results-object-viewer-wrapper .results-summary p').textContent = '';
}

$('#results-object-viewer').jsonViewer(data.response, {
collapsed: true,
rootCollapsable: false,
withQuotes: true,
withLinks: true,
});
document.getElementById('#results-object-viewer').data = data;
hideLoader();
};

Expand Down Expand Up @@ -400,7 +401,7 @@
replaceText('login-response-message', responseData.message);

// Enable the button to fetch object list.
$('#btn-fetch-objects').prop('disabled', false);
document.getElementById('btn-fetch-objects').disabled = false;
};

/**
Expand All @@ -423,10 +424,10 @@
updateMessage(`Object List Retrieved for ${orgUser}`);

// Display area.
// @todo: remove jquery use.
$('#results-table-wrapper').show();
$('#results-object-viewer-wrapper').hide();
$('#results-summary-count').text('Loading objects...');
// Replace jQuery show/hide calls
document.getElementById('results-table-wrapper').style.display = 'block';
document.getElementById('results-object-viewer-wrapper').style.display = 'none';
document.getElementById('results-summary-count').textContent = 'Loading objects...';

// Get the table.
const resultsTable = document.getElementById('results-table');
Expand Down Expand Up @@ -572,10 +573,11 @@
// Add the whole table body to the table itself.
resultsTable.appendChild(tBody);

$('#results-summary-count').text(`Your org contains ${objCount} creatable objects`);
// Replace jQuery text setting
document.getElementById('results-summary-count').textContent = `Your org contains ${objCount} creatable objects`;

// Enable the button to fetch object list.
$('#btn-fetch-details').prop('disabled', false);
// Replace jQuery prop call
document.getElementById('btn-fetch-details').disabled = false;

// Interface update complete, hide the loader.
hideLoader();
Expand All @@ -601,9 +603,15 @@
}
updateMessage(`Proposed schema from ${orgUser} ready for review.`);

$('#btn-generate-schema').prop('disabled', false);
$('#btn-save-sf-schema').prop('disabled', false);
$('#nav-schema-tab').tab('show');
// Replace jQuery prop calls
document.getElementById('btn-generate-schema').disabled = false;
document.getElementById('btn-save-sf-schema').disabled = false;

// Replace jQuery tab show with Bootstrap native
const tabEl = document.querySelector('#nav-schema-tab');
const tab = new bootstrap.Tab(tabEl);
tab.show();

hideLoader();
};

Expand Down Expand Up @@ -634,8 +642,7 @@
updateMessage('Database creation process complete, some tables had error. Review logs for more details');
}

// @todo remove jquery.
$('#btn-save-sql-schema').prop('disabled', false);
document.getElementById('btn-save-sql-schema').disabled = false;

hideLoader();
};
Expand Down
2 changes: 1 addition & 1 deletion app/tests/render.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@ test('Test updateMessage', () => {
const message = 'Test message';
updateMessage(message);
const messageElement = document.getElementById('results-message-only');
expect(messageElement.innerText).toEqual(message);
expect(messageElement.innerHTML).toEqual(message);
});

// test('Test refreshObjectDisplay', () => {
Expand Down
14 changes: 7 additions & 7 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,13 @@
"url": "https://github.com/acrosman/Salesforce2Sql"
},
"dependencies": {
"@andypf/json-viewer": "^2.1.10",
"bootstrap": "^5.1.3",
"bootstrap-icons": "^1.5.0",
"bootswatch": "^5.1.3",
"electron-squirrel-startup": "^1.0.0",
"fs-extra": "^8.1.0",
"jquery": "^3.5.1",
"jquery.json-viewer": "^1.4.0",
"jsforce": "^3",
"knex": "^3.1",
"minimist": "^1.2.6",
Expand Down
Loading