Skip to content

Commit

Permalink
GDB-10263 import view improvements (#1408)
Browse files Browse the repository at this point in the history 
* Changed help info messages in the import user data and server files tabs per request by the PO.

Changed conditions for help info alert rendering. Now it renders always in the empty state. User can close it, but on the next page load it should pop up again.

Moved resource properties values rendering in the top cells in the row. Previously those were rendered in the bottom cells.

Updated tests to account changes in the help alert behavior

Updated locale bundle

* For some reason the page info box opens unexpectedly and covers the help info icon. Try to close it.

* Forced the help info open because the page info opens for some reason and covers the icon that opens the help info alert
  • Loading branch information
@svilenvelikov
svilenvelikov committed May 21, 2024
1 parent 8337817 commit 124f651
Show file tree
Hide file tree
Showing 10 changed files with 104 additions and 72 deletions.
18 changes: 11 additions & 7 deletions src/i18n/locale-en.json
View file
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
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
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
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
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
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
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
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

0 comments on commit 124f651

Please sign in to comment.