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

GDB-10263 import view improvements #1408

Merged
merged 3 commits into from
May 21, 2024
Merged

GDB-10263 import view improvements #1408

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
9f677fd
Changed help info messages in the import user data and server files t…
svilenvelikov May 17, 2024
56589c2
For some reason the page info box opens unexpectedly and covers the h…
svilenvelikov May 20, 2024
75d3fe3
Forced the help info open because the page info opens for some reason…
svilenvelikov May 20, 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
18 changes: 11 additions & 7 deletions src/i18n/locale-en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -988,21 +988,25 @@
"copied_to_clipboard": "Copied to clipboard"
},
"on_upload": {
"import_user_data": "Import User Data",
"to_reimport_again": "To reimport a file, URL or text snippet click the Import button again.",
"file_size_limit_can_be_changed": "The file size limit can be changed by setting the",
"import_user_data": "Import RDF files from your computer, from a URL, or type or paste RDF data",
"file_size_limit_can_be_changed": "The file size limit for uploads can be changed by setting the",
"the_property": " property",
"execution": "Import execution",
"work_in_background": "Imports are executed in the background while you continue working on other things.",
"to_reimport_again": "To reimport a file, URL or text snippet click the Import button again.",
"interrupt_support": "Interrupt is supported only when the location is local.",
"parser_config": "Parser config options are not available for remote locations."
},
"on_server_import": {
"import_from_server": "It’s required to have access to the server where the GraphDB Workbench is running",
"open_directory": "Open (or create) a directory",
"put_files_into": "and place your files and folders in it",
"import_from_server": "Import files from the server where GraphDB is running",
"open_directory": "Put files or directories you want to import into the",
"put_files_into": "directory on the GraphDB server. Create the directory if necessary.",
"directory_can_be_changed": "The directory can be changed by setting the",
"the_property": "property"
"the_property": "property",
"execution": "Import execution",
"work_in_background": "Imports are executed in the background while you continue working on other things.",
"to_reimport_again": "To reimport a file, URL or text snippet click the Import button again.",
"interrupt_support": "Interrupt is supported only when the location is local."
},
"on_file_size_limit": {
"file_import_options_info_1": "Explore other file import options - ",
Expand Down
16 changes: 10 additions & 6 deletions src/i18n/locale-fr.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -987,20 +987,24 @@
"copied_to_clipboard": "Copié dans le presse-papier"
},
"on_upload": {
"import_user_data": "Importer des données utilisateur",
"to_reimport_again": "Pour réimporter un fichier, une URL ou un extrait de texte, cliquez à nouveau sur le bouton Importer.",
"file_size_limit_can_be_changed": "The file size limit can be changed by setting the",
"import_user_data": "Importez des fichiers RDF depuis votre ordinateur, depuis une URL, ou saisissez ou collez des données RDF",
"file_size_limit_can_be_changed": "La limite de taille de fichier pour les téléchargements peut être modifiée en définissant le",
"the_property": "propriété",
"execution": "Exécution d'importation",
"work_in_background": "Les importations sont exécutées en arrière-plan pendant que vous continuez à travailler sur d'autres choses.",
"to_reimport_again": "Pour réimporter un fichier, une URL ou un extrait de texte, cliquez à nouveau sur le bouton Importer.",
"interrupt_support": "L'interruption n'est prise en charge que lorsque l'emplacement est local.",
"parser_config": "Les options de configuration de l'analyseur ne sont pas disponibles pour les sites distants."
},
"on_server_import": {
"import_from_server": "Il est nécessaire d'avoir accès au serveur sur lequel GraphDB Workbench est exécuté",
"open_directory": "Ouvrir (ou créer) un répertoire",
"put_files_into": "et placez-y vos fichiers et dossiers",
"import_from_server": "Importer des fichiers depuis le serveur sur lequel GraphDB est exécuté",
"open_directory": "Placez les fichiers ou répertoires que vous souhaitez importer dans",
"put_files_into": "répertoire du serveur GraphDB. Créez le répertoire si nécessaire.",
"directory_can_be_changed": "Le répertoire peut être modifié en réglant le",
"execution": "Exécution d'importation",
"work_in_background": "Les importations sont exécutées en arrière-plan pendant que vous continuez à travailler sur d'autres choses.",
"to_reimport_again": "Pour réimporter un fichier, une URL ou un extrait de texte, cliquez à nouveau sur le bouton Importer.",
"interrupt_support": "L'interruption n'est prise en charge que lorsque l'emplacement est local.",
"the_property": "propriété"
},
"on_file_size_limit": {
Expand Down
33 changes: 16 additions & 17 deletions src/js/angular/import/controllers/tab.controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ function TabController($scope, $location, ImportViewStorageService, ImportContex
// =========================
// Public variables
// =========================
$scope.isHelpVisible = true;
$scope.isHelpVisible = false;
$scope.fileSizeLimitInfoTemplateUrl = 'js/angular/import/templates/fileSizeLimitInfo.html';

// =========================
Expand All @@ -32,32 +32,30 @@ function TabController($scope, $location, ImportViewStorageService, ImportContex
$scope.toggleHelp = () => {
const viewPersistence = ImportViewStorageService.getImportViewSettings();
ImportViewStorageService.toggleHelpVisibility();
$scope.isHelpVisible = !viewPersistence.isHelpVisible;
setIsHelpVisible(!viewPersistence.isHelpVisible);
};

// =========================
// Private functions
// =========================

const onFilesUpdated = (files) => {
const setIsHelpVisible = (isVisible) => {
$scope.isHelpVisible = isVisible;
};

const setHelpVisibility = (resources) => {
// reset help visibility on empty state in initial load
if (shouldResetHelpVisibility && files.length === 0) {
if (shouldResetHelpVisibility && resources.getSize() === 0) {
ImportViewStorageService.setHelpVisibility(true);
shouldResetHelpVisibility = false;
}
const viewPersistence = ImportViewStorageService.getImportViewSettings();
let isVisible = viewPersistence.isHelpVisible;
if (files.length === 0 && viewPersistence.isHelpVisible) {
isVisible = true;
} else if (files.length === 0 && !viewPersistence.isHelpVisible) {
isVisible = false;
} else if (viewPersistence.isHelpVisible) {
isVisible = true;
} else if (!viewPersistence.isHelpVisible) {
isVisible = false;
}
const isVisible = resources.getSize() === 0;
ImportViewStorageService.setHelpVisibility(isVisible);
$scope.isHelpVisible = isVisible;
setIsHelpVisible(isVisible);
};

const onResourcesUpdated = (resources) => {
setHelpVisibility(resources);
};

// =========================
Expand All @@ -68,9 +66,10 @@ function TabController($scope, $location, ImportViewStorageService, ImportContex
subscriptions.push(ImportContextService.onActiveTabIdUpdated((newActiveTabId) => {
$scope.activeTabId = newActiveTabId;
$location.hash($scope.activeTabId);
setHelpVisibility(ImportContextService.getResources());
}));

subscriptions.push(ImportContextService.onFilesUpdated(onFilesUpdated));
subscriptions.push(ImportContextService.onResourcesUpdated(onResourcesUpdated));

const removeAllListeners = () => subscriptions.forEach((subscription) => subscription());

Expand Down
43 changes: 21 additions & 22 deletions src/js/angular/import/templates/import-resource-tree.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,8 +151,7 @@
<input type="checkbox" ng-model="resource.selected" ng-click="selectionChanged(resource)"
prop-indeterminate="resource.partialSelected" class="select-checkbox">
</td>
<td colspan="5"
ng-style="{'padding-left': (filterByType !== TYPE_FILTER_OPTIONS.FILE ? resource.indent : '8px')}"
<td ng-style="{'padding-left': (filterByType !== TYPE_FILTER_OPTIONS.FILE ? resource.indent : '8px')}"
class="cell">
<span class="cell-title">
<em ng-class="resource.iconClass"></em>
Expand All @@ -166,6 +165,25 @@
</div>
</span>
</td>
<td class="cell cell-size">
{{ resource.importResource.size || ''}}
</td>
<td class="cell cell-modified"
ng-class="{'font-weight-bold': resource.isModifiedBiggerThanImported}">
{{ resource.importResource.modifiedOn ? (resource.importResource.modifiedOn | date:'yyyy-MM-dd, HH:mm') : '' }}
</td>
<td class="cell cell-imported"
ng-class="{'font-weight-bold': resource.isImportedBiggerThanModified}">
{{ resource.importResource.importedOn ? (resource.importResource.importedOn | date:'yyyy-MM-dd, HH:mm') : '' }}
</td>
<td class="cell">
<a if="resource.importResource.context"
title="{{resource.importResource.context}}"
class="uri-link"
href="{{'resource?uri=' + resource.importResource.context + '&role=context'}}">
{{resource.shortenedContext ? resource.shortenedContext : resource.importResource.context}}
</a>
</td>
<td class="cell">
<div class="cell-actions">
<import-resource-status-info class="btn btn-sm import"
Expand Down Expand Up @@ -206,29 +224,10 @@
</tr>
<tr ng-repeat-end class="row info-row" ng-class="{ 'even-row-end': $even, 'odd-row-end': $odd}">
<td class="cell cell-select"></td>
<td ng-style="{'padding-left': (filterByType !== TYPE_FILTER_OPTIONS.FILE ? resource.indent : '8px')}"
<td colspan="6" ng-style="{'padding-left': (filterByType !== TYPE_FILTER_OPTIONS.FILE ? resource.indent : '8px')}"
class="cell">
<import-resource-message resource="resource"></import-resource-message>
</td>
<td class="cell cell-size">
{{ resource.importResource.size || ''}}
</td>
<td class="cell cell-modified"
ng-class="{'font-weight-bold': resource.isModifiedBiggerThanImported}">
{{ resource.importResource.modifiedOn ? (resource.importResource.modifiedOn | date:'yyyy-MM-dd, HH:mm') : '' }}
</td>
<td class="cell cell-imported"
ng-class="{'font-weight-bold': resource.isImportedBiggerThanModified}">
{{ resource.importResource.importedOn ? (resource.importResource.importedOn | date:'yyyy-MM-dd, HH:mm') : '' }}
</td>
<td colspan="2" class="cell">
<a if="resource.importResource.context"
title="{{resource.importResource.context}}"
class="uri-link"
href="{{'resource?uri=' + resource.importResource.context + '&role=context'}}">
{{resource.shortenedContext ? resource.shortenedContext : resource.importResource.context}}
</a>
</td>
</tr>
</tbody>
</table>
Expand Down
4 changes: 4 additions & 0 deletions src/js/angular/models/import/import-resource-tree-element.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -327,4 +327,8 @@ export class ImportResourceTreeElement {
this.files.sort(compareFunction);
this.directories.forEach((directory) => directory.sort(compareFunction));
}

getSize() {
return this.toList().length;
}
}
14 changes: 9 additions & 5 deletions src/pages/import.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,18 +108,16 @@ <h1>
<div class="ot-view-info">
<h4>{{'import.help.on_upload.import_user_data' | translate}}</h4>
<p>
{{'import.help.on_upload.to_reimport_again' | translate}}<br>
{{'import.help.on_upload.file_size_limit_can_be_changed' | translate}}
<strong class="file-size-prop copyable">graphdb.workbench.maxUploadSize</strong>
<copy-to-clipboard tooltip-text="import.help.buttons.copy_file_size_prop.tooltip"></copy-to-clipboard>
{{'import.help.on_upload.the_property' | translate}}.
</p>

<h4>{{'import.help.on_upload.execution' | translate}}</h4>
<h5>{{'import.help.on_upload.execution' | translate}}</h5>
<ul>
<li>{{'import.help.on_upload.work_in_background' | translate}}</li>
<li>{{'import.help.on_upload.to_reimport_again' | translate}}</li>
<li>{{'import.help.on_upload.interrupt_support' | translate}}</li>
<li>{{'import.help.on_upload.parser_config' | translate}}</li>
</ul>
</div>
</div>
Expand Down Expand Up @@ -147,12 +145,18 @@ <h4>{{'import.help.on_server_import.import_from_server' | translate}}</h4>
<p>
{{'import.help.on_server_import.open_directory' | translate}}
<strong>{{appData.properties['graphdb.workbench.importDirectory'].value}}</strong>
{{'import.help.on_server_import.put_files_into' | translate}}.<br>
{{'import.help.on_server_import.put_files_into' | translate}}<br><br>
{{'import.help.on_server_import.directory_can_be_changed' | translate}}
<strong class="server-import-directory-prop copyable">graphdb.workbench.importDirectory</strong>
<copy-to-clipboard tooltip-text="import.help.buttons.copy_import_directory_prop.tooltip"></copy-to-clipboard>
{{'import.help.on_server_import.the_property' | translate}}.
</p>
<h5>{{'import.help.on_server_import.execution' | translate}}</h5>
<ul>
<li>{{'import.help.on_server_import.work_in_background' | translate}}</li>
<li>{{'import.help.on_server_import.to_reimport_again' | translate}}</li>
<li>{{'import.help.on_server_import.interrupt_support' | translate}}</li>
</ul>
</div>
</div>
<div class="ot-loader ot-main-loader" onto-loader size="50" ng-if="loader"></div>
Expand Down
23 changes: 14 additions & 9 deletions test-cypress/fixtures/locale-en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@
"link_state_in_sync": "In sync",
"link_state_syncing": "Syncing",
"link_state_out_of_sync": "Out of sync",
"link_state_receiving_snapshot": "Receiving a snapshot",
"link_state_recovering": "Recovering",
"recovery_state": {
"searching_for_node": "Searching for node",
Expand Down Expand Up @@ -987,26 +988,30 @@
"copied_to_clipboard": "Copied to clipboard"
},
"on_upload": {
"import_user_data": "Import User Data",
"to_reimport_again": "To reimport a file, URL or text snippet click the Import button again.",
"file_size_limit_can_be_changed": "The file size limit can be changed by setting the",
"import_user_data": "Import RDF files from your computer, from a URL, or type or paste RDF data",
"file_size_limit_can_be_changed": "The file size limit for uploads can be changed by setting the",
"the_property": " property",
"execution": "Import execution",
"work_in_background": "Imports are executed in the background while you continue working on other things.",
"to_reimport_again": "To reimport a file, URL or text snippet click the Import button again.",
"interrupt_support": "Interrupt is supported only when the location is local.",
"parser_config": "Parser config options are not available for remote locations."
},
"on_server_import": {
"import_from_server": "It’s required to have access to the server where the GraphDB Workbench is running",
"open_directory": "Open (or create) a directory",
"put_files_into": "and place your files and folders in it",
"import_from_server": "Import files from the server where GraphDB is running",
"open_directory": "Put files or directories you want to import into the",
"put_files_into": "directory on the GraphDB server. Create the directory if necessary.",
"directory_can_be_changed": "The directory can be changed by setting the",
"the_property": "property"
"the_property": "property",
"execution": "Import execution",
"work_in_background": "Imports are executed in the background while you continue working on other things.",
"to_reimport_again": "To reimport a file, URL or text snippet click the Import button again.",
"interrupt_support": "Interrupt is supported only when the location is local."
},
"on_file_size_limit": {
"file_size_limit_info": "To import larger than {{fileSizeLimit}} MB files, use the ",
"file_import_options_info_1": "Explore other file import options - ",
"file_import_options_info_2": "import (opens Server files tab) or ",
"server_files_link": "Server files",
"import_or_use": "import or use the",
"api_link": "API"
}
},
Expand Down
6 changes: 5 additions & 1 deletion test-cypress/integration/import/import-server-files.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,11 @@ describe('Import server files', () => {

it('Should be able to toggle the server file import help', () => {
// When the page is loaded
// Then I should see the server files import help
// Then I expect import help message to be hidden because it is not an empty state
ImportServerFilesSteps.getHelpMessage().should('not.exist');
// When I click on the help button
ImportServerFilesSteps.openHelpMessage();
// Then the help should appear
ImportServerFilesSteps.getHelpMessage().should('be.visible');
// When I close the help
ImportServerFilesSteps.closeHelpMessage();
Expand Down
Loading