From 3d2227e98ca125086a59a1a7784236979842694a Mon Sep 17 00:00:00 2001 From: Artyom Podymov Date: Fri, 3 Dec 2021 16:30:36 +0300 Subject: [PATCH 1/3] #RI-2062 - add pagination --- .../constants/mocks/mock-enablement-area.ts | 30 +++-- .../{images => _images}/aggregations.png | Bin .../aggregation-with-apply.txt | 0 .../combined-search-with-and.txt | 0 .../combined-search-with-geo-filter.txt | 0 .../combined-search-with-or.txt | 0 .../working-with-hashes/create-hash-index.txt | 0 .../working-with-hashes/crud-create.txt | 0 .../working-with-hashes/crud-delete.txt | 0 .../working-with-hashes/crud-read.txt | 0 .../working-with-hashes/crud-update.txt | 0 .../working-with-hashes/exact-text-search.txt | 0 .../field-specific-text-search.txt | 0 .../working-with-hashes/fuzzy-text-search.txt | 0 .../group-and-sort-by-aggregation.txt | 0 .../working-with-hashes/index-info.txt | 0 .../working-with-hashes/list-all-indexes.txt | 0 .../multiple-tags-and-search.txt | 0 .../multiple-tags-or-search.txt | 0 .../numeric-range-query.txt | 0 .../working-with-hashes/tag-search.txt | 0 .../combined-search-with-and.txt | 0 .../combined-search-with-geo-filter.txt | 0 .../combined-search-with-or.txt | 0 .../working-with-json/create-json-index.txt | 0 .../working-with-json/crud-create.txt | 0 .../working-with-json/crud-delete.txt | 0 .../document/working-with-json/crud-read.txt | 0 .../working-with-json/crud-update.txt | 0 .../working-with-json/exact-text-search.txt | 0 .../field-specific-text-search.txt | 0 .../working-with-json/fuzzy-text-search.txt | 0 .../group-and-sort-by-aggregation.txt | 0 .../document/working-with-json/index-info.txt | 0 .../working-with-json/list-all-indexes.txt | 0 .../multiple-tags-and-search.txt | 0 .../multiple-tags-or-search.txt | 0 .../working-with-json/numeric-range-query.txt | 0 .../document/working-with-json/tag-search.txt | 0 .../{scripts => _scripts}/manual.txt | 0 .../enablement-area/enablement-area.json | 36 +++--- .../document/introduction.html | 15 --- .../document/learn-more.html | 15 --- .../document/working-with-hashes.html | 75 +++--------- .../document/working-with-json.html | 73 +++-------- .../EnablementArea/EnablementArea.spec.tsx | 17 +-- .../EnablementArea/EnablementArea.tsx | 6 +- .../components/InternalPage/InternalPage.tsx | 26 ++-- .../InternalPage/styles.module.scss | 19 ++- .../LazyInternalPage/LazyInternalPage.tsx | 38 ++++-- .../components/Pagination/Pagination.tsx | 115 ++++++++++++++++++ .../components/Pagination/index.ts | 3 + .../components/Pagination/styles.module.scss | 82 +++++++++++++ .../EnablementArea/components/index.ts | 2 + .../EnablementArea/styles.module.scss | 1 - .../EnablementArea/utils/getFileInfo.spec.ts | 41 +++++-- .../EnablementArea/utils/getFileInfo.ts | 31 ++++- .../ui/src/slices/interfaces/workbench.ts | 4 +- .../workbench/wb-enablement-area.spec.ts | 2 +- .../slices/workbench/wb-enablement-area.ts | 11 +- 60 files changed, 408 insertions(+), 234 deletions(-) rename redisinsight/ui/src/packages/enablement-area/{images => _images}/aggregations.png (100%) rename redisinsight/ui/src/packages/enablement-area/{scripts => _scripts}/document/working-with-hashes/aggregation-with-apply.txt (100%) rename redisinsight/ui/src/packages/enablement-area/{scripts => _scripts}/document/working-with-hashes/combined-search-with-and.txt (100%) rename redisinsight/ui/src/packages/enablement-area/{scripts => _scripts}/document/working-with-hashes/combined-search-with-geo-filter.txt (100%) rename redisinsight/ui/src/packages/enablement-area/{scripts => _scripts}/document/working-with-hashes/combined-search-with-or.txt (100%) rename redisinsight/ui/src/packages/enablement-area/{scripts => _scripts}/document/working-with-hashes/create-hash-index.txt (100%) rename redisinsight/ui/src/packages/enablement-area/{scripts => _scripts}/document/working-with-hashes/crud-create.txt (100%) rename redisinsight/ui/src/packages/enablement-area/{scripts => _scripts}/document/working-with-hashes/crud-delete.txt (100%) rename redisinsight/ui/src/packages/enablement-area/{scripts => _scripts}/document/working-with-hashes/crud-read.txt (100%) rename redisinsight/ui/src/packages/enablement-area/{scripts => _scripts}/document/working-with-hashes/crud-update.txt (100%) rename redisinsight/ui/src/packages/enablement-area/{scripts => _scripts}/document/working-with-hashes/exact-text-search.txt (100%) rename redisinsight/ui/src/packages/enablement-area/{scripts => _scripts}/document/working-with-hashes/field-specific-text-search.txt (100%) rename redisinsight/ui/src/packages/enablement-area/{scripts => _scripts}/document/working-with-hashes/fuzzy-text-search.txt (100%) rename redisinsight/ui/src/packages/enablement-area/{scripts => _scripts}/document/working-with-hashes/group-and-sort-by-aggregation.txt (100%) rename redisinsight/ui/src/packages/enablement-area/{scripts => _scripts}/document/working-with-hashes/index-info.txt (100%) rename redisinsight/ui/src/packages/enablement-area/{scripts => _scripts}/document/working-with-hashes/list-all-indexes.txt (100%) rename redisinsight/ui/src/packages/enablement-area/{scripts => _scripts}/document/working-with-hashes/multiple-tags-and-search.txt (100%) rename redisinsight/ui/src/packages/enablement-area/{scripts => _scripts}/document/working-with-hashes/multiple-tags-or-search.txt (100%) rename redisinsight/ui/src/packages/enablement-area/{scripts => _scripts}/document/working-with-hashes/numeric-range-query.txt (100%) rename redisinsight/ui/src/packages/enablement-area/{scripts => _scripts}/document/working-with-hashes/tag-search.txt (100%) rename redisinsight/ui/src/packages/enablement-area/{scripts => _scripts}/document/working-with-json/combined-search-with-and.txt (100%) rename redisinsight/ui/src/packages/enablement-area/{scripts => _scripts}/document/working-with-json/combined-search-with-geo-filter.txt (100%) rename redisinsight/ui/src/packages/enablement-area/{scripts => _scripts}/document/working-with-json/combined-search-with-or.txt (100%) rename redisinsight/ui/src/packages/enablement-area/{scripts => _scripts}/document/working-with-json/create-json-index.txt (100%) rename redisinsight/ui/src/packages/enablement-area/{scripts => _scripts}/document/working-with-json/crud-create.txt (100%) rename redisinsight/ui/src/packages/enablement-area/{scripts => _scripts}/document/working-with-json/crud-delete.txt (100%) rename redisinsight/ui/src/packages/enablement-area/{scripts => _scripts}/document/working-with-json/crud-read.txt (100%) rename redisinsight/ui/src/packages/enablement-area/{scripts => _scripts}/document/working-with-json/crud-update.txt (100%) rename redisinsight/ui/src/packages/enablement-area/{scripts => _scripts}/document/working-with-json/exact-text-search.txt (100%) rename redisinsight/ui/src/packages/enablement-area/{scripts => _scripts}/document/working-with-json/field-specific-text-search.txt (100%) rename redisinsight/ui/src/packages/enablement-area/{scripts => _scripts}/document/working-with-json/fuzzy-text-search.txt (100%) rename redisinsight/ui/src/packages/enablement-area/{scripts => _scripts}/document/working-with-json/group-and-sort-by-aggregation.txt (100%) rename redisinsight/ui/src/packages/enablement-area/{scripts => _scripts}/document/working-with-json/index-info.txt (100%) rename redisinsight/ui/src/packages/enablement-area/{scripts => _scripts}/document/working-with-json/list-all-indexes.txt (100%) rename redisinsight/ui/src/packages/enablement-area/{scripts => _scripts}/document/working-with-json/multiple-tags-and-search.txt (100%) rename redisinsight/ui/src/packages/enablement-area/{scripts => _scripts}/document/working-with-json/multiple-tags-or-search.txt (100%) rename redisinsight/ui/src/packages/enablement-area/{scripts => _scripts}/document/working-with-json/numeric-range-query.txt (100%) rename redisinsight/ui/src/packages/enablement-area/{scripts => _scripts}/document/working-with-json/tag-search.txt (100%) rename redisinsight/ui/src/packages/enablement-area/{scripts => _scripts}/manual.txt (100%) rename redisinsight/ui/src/packages/enablement-area/{guides => quick-guides}/document/introduction.html (87%) rename redisinsight/ui/src/packages/enablement-area/{guides => quick-guides}/document/learn-more.html (76%) rename redisinsight/ui/src/packages/enablement-area/{guides => quick-guides}/document/working-with-hashes.html (52%) rename redisinsight/ui/src/packages/enablement-area/{guides => quick-guides}/document/working-with-json.html (52%) create mode 100644 redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Pagination/Pagination.tsx create mode 100644 redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Pagination/index.ts create mode 100644 redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Pagination/styles.module.scss diff --git a/redisinsight/ui/src/constants/mocks/mock-enablement-area.ts b/redisinsight/ui/src/constants/mocks/mock-enablement-area.ts index 4419c2232b..d1ca4e667a 100644 --- a/redisinsight/ui/src/constants/mocks/mock-enablement-area.ts +++ b/redisinsight/ui/src/constants/mocks/mock-enablement-area.ts @@ -1,35 +1,43 @@ import { EnablementAreaComponent, IEnablementAreaItem } from 'uiSrc/slices/interfaces' -export const MOCK_ENABLEMENT_AREA_ITEMS: IEnablementAreaItem[] = [ - { +export const MOCK_ENABLEMENT_AREA_ITEMS: Record = { + 'quick-guides': { type: EnablementAreaComponent.Group, id: 'quick-guides', label: 'Quick Guides', - children: [ - { + children: { + 'document-capabilities': { type: EnablementAreaComponent.InternalLink, id: 'document-capabilities', label: 'Document Capabilities', args: { - path: 'static/workbench/guides/document-capabilities.html', + path: 'static/workbench/quick-guides/document-capabilities.html', + }, + }, + 'document': { + type: EnablementAreaComponent.InternalLink, + id: 'document', + label: 'Document', + args: { + path: 'static/workbench/quick-guides/document.html', }, } - ] + } }, - { + 'internal-page': { type: EnablementAreaComponent.InternalLink, id: 'internal-page', label: 'Internal Page', args: { - path: 'static/workbench/guides/document-capabilities.html' + path: 'static/workbench/quick-guides/document-capabilities.html' }, }, - { + 'manual': { type: EnablementAreaComponent.CodeButton, id: 'manual', label: 'Manual', args: { - path: 'static/workbench/scripts/manual.txt' + path: 'static/workbench/_scripts/manual.txt' }, } -] +} diff --git a/redisinsight/ui/src/packages/enablement-area/images/aggregations.png b/redisinsight/ui/src/packages/enablement-area/_images/aggregations.png similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/images/aggregations.png rename to redisinsight/ui/src/packages/enablement-area/_images/aggregations.png diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/aggregation-with-apply.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/aggregation-with-apply.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/aggregation-with-apply.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/aggregation-with-apply.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/combined-search-with-and.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/combined-search-with-and.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/combined-search-with-and.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/combined-search-with-and.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/combined-search-with-geo-filter.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/combined-search-with-geo-filter.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/combined-search-with-geo-filter.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/combined-search-with-geo-filter.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/combined-search-with-or.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/combined-search-with-or.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/combined-search-with-or.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/combined-search-with-or.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/create-hash-index.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/create-hash-index.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/create-hash-index.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/create-hash-index.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/crud-create.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/crud-create.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/crud-create.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/crud-create.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/crud-delete.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/crud-delete.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/crud-delete.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/crud-delete.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/crud-read.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/crud-read.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/crud-read.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/crud-read.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/crud-update.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/crud-update.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/crud-update.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/crud-update.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/exact-text-search.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/exact-text-search.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/exact-text-search.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/exact-text-search.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/field-specific-text-search.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/field-specific-text-search.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/field-specific-text-search.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/field-specific-text-search.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/fuzzy-text-search.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/fuzzy-text-search.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/fuzzy-text-search.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/fuzzy-text-search.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/group-and-sort-by-aggregation.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/group-and-sort-by-aggregation.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/group-and-sort-by-aggregation.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/group-and-sort-by-aggregation.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/index-info.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/index-info.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/index-info.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/index-info.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/list-all-indexes.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/list-all-indexes.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/list-all-indexes.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/list-all-indexes.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/multiple-tags-and-search.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/multiple-tags-and-search.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/multiple-tags-and-search.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/multiple-tags-and-search.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/multiple-tags-or-search.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/multiple-tags-or-search.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/multiple-tags-or-search.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/multiple-tags-or-search.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/numeric-range-query.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/numeric-range-query.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/numeric-range-query.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/numeric-range-query.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/tag-search.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/tag-search.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-hashes/tag-search.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-hashes/tag-search.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/combined-search-with-and.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/combined-search-with-and.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/combined-search-with-and.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/combined-search-with-and.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/combined-search-with-geo-filter.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/combined-search-with-geo-filter.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/combined-search-with-geo-filter.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/combined-search-with-geo-filter.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/combined-search-with-or.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/combined-search-with-or.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/combined-search-with-or.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/combined-search-with-or.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/create-json-index.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/create-json-index.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/create-json-index.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/create-json-index.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/crud-create.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/crud-create.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/crud-create.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/crud-create.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/crud-delete.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/crud-delete.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/crud-delete.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/crud-delete.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/crud-read.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/crud-read.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/crud-read.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/crud-read.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/crud-update.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/crud-update.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/crud-update.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/crud-update.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/exact-text-search.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/exact-text-search.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/exact-text-search.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/exact-text-search.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/field-specific-text-search.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/field-specific-text-search.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/field-specific-text-search.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/field-specific-text-search.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/fuzzy-text-search.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/fuzzy-text-search.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/fuzzy-text-search.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/fuzzy-text-search.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/group-and-sort-by-aggregation.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/group-and-sort-by-aggregation.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/group-and-sort-by-aggregation.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/group-and-sort-by-aggregation.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/index-info.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/index-info.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/index-info.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/index-info.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/list-all-indexes.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/list-all-indexes.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/list-all-indexes.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/list-all-indexes.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/multiple-tags-and-search.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/multiple-tags-and-search.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/multiple-tags-and-search.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/multiple-tags-and-search.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/multiple-tags-or-search.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/multiple-tags-or-search.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/multiple-tags-or-search.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/multiple-tags-or-search.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/numeric-range-query.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/numeric-range-query.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/numeric-range-query.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/numeric-range-query.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/tag-search.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/tag-search.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/document/working-with-json/tag-search.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/document/working-with-json/tag-search.txt diff --git a/redisinsight/ui/src/packages/enablement-area/scripts/manual.txt b/redisinsight/ui/src/packages/enablement-area/_scripts/manual.txt similarity index 100% rename from redisinsight/ui/src/packages/enablement-area/scripts/manual.txt rename to redisinsight/ui/src/packages/enablement-area/_scripts/manual.txt diff --git a/redisinsight/ui/src/packages/enablement-area/enablement-area.json b/redisinsight/ui/src/packages/enablement-area/enablement-area.json index 68167458c6..cc1aafbb5b 100644 --- a/redisinsight/ui/src/packages/enablement-area/enablement-area.json +++ b/redisinsight/ui/src/packages/enablement-area/enablement-area.json @@ -1,5 +1,5 @@ -[ - { +{ + "quick-guides": { "type": "group", "id": "quick-guides", "label": "QUICK GUIDES", @@ -7,57 +7,57 @@ "withBorder": true, "initialIsOpen": true }, - "children": [ - { + "children": { + "document": { "type": "group", "id": "document", "label": "Document", "args": { "initialIsOpen": true }, - "children": [ - { + "children": { + "introduction": { "type": "internal-link", "id": "introduction", "label": "Introduction", "args": { - "path": "/static/workbench/guides/document/introduction.html" + "path": "/static/workbench/quick-guides/document/introduction.html" } }, - { + "working-with-hashes": { "type": "internal-link", "id": "working-with-hashes", "label": "Working with Hashes", "args": { - "path": "/static/workbench/guides/document/working-with-hashes.html" + "path": "/static/workbench/quick-guides/document/working-with-hashes.html" } }, - { + "working-with-json": { "type": "internal-link", "id": "working-with-json", "label": "Working with JSON", "args": { - "path": "/static/workbench/guides/document/working-with-json.html" + "path": "/static/workbench/quick-guides/document/working-with-json.html" } }, - { + "learn-more": { "type": "internal-link", "id": "learn-more", "label": "Learn More", "args": { - "path": "/static/workbench/guides/document/learn-more.html" + "path": "/static/workbench/quick-guides/document/learn-more.html" } } - ] + } } - ] + } }, - { + "manual": { "type": "code-button", "id": "manual", "label": "Manual", "args": { - "path": "/static/workbench/scripts/manual.txt" + "path": "/static/workbench/_scripts/manual.txt" } } -] +} diff --git a/redisinsight/ui/src/packages/enablement-area/guides/document/introduction.html b/redisinsight/ui/src/packages/enablement-area/quick-guides/document/introduction.html similarity index 87% rename from redisinsight/ui/src/packages/enablement-area/guides/document/introduction.html rename to redisinsight/ui/src/packages/enablement-area/quick-guides/document/introduction.html index 8e01ece071..25f6334d8f 100644 --- a/redisinsight/ui/src/packages/enablement-area/guides/document/introduction.html +++ b/redisinsight/ui/src/packages/enablement-area/quick-guides/document/introduction.html @@ -67,19 +67,4 @@

PRE-REQUISITES

You could also create a free and ready to use instance on Redis Cloud.

-
-
- - Next: Working with Hashes - -
-
diff --git a/redisinsight/ui/src/packages/enablement-area/guides/document/learn-more.html b/redisinsight/ui/src/packages/enablement-area/quick-guides/document/learn-more.html similarity index 76% rename from redisinsight/ui/src/packages/enablement-area/guides/document/learn-more.html rename to redisinsight/ui/src/packages/enablement-area/quick-guides/document/learn-more.html index ce1fa26ee2..e052e84ffb 100644 --- a/redisinsight/ui/src/packages/enablement-area/guides/document/learn-more.html +++ b/redisinsight/ui/src/packages/enablement-area/quick-guides/document/learn-more.html @@ -37,19 +37,4 @@

Tutorials

-
-
- - Previous: Working with JSON - -
-
diff --git a/redisinsight/ui/src/packages/enablement-area/guides/document/working-with-hashes.html b/redisinsight/ui/src/packages/enablement-area/quick-guides/document/working-with-hashes.html similarity index 52% rename from redisinsight/ui/src/packages/enablement-area/guides/document/working-with-hashes.html rename to redisinsight/ui/src/packages/enablement-area/quick-guides/document/working-with-hashes.html index e0aa902fa5..fbe1b031b8 100644 --- a/redisinsight/ui/src/packages/enablement-area/guides/document/working-with-hashes.html +++ b/redisinsight/ui/src/packages/enablement-area/quick-guides/document/working-with-hashes.html @@ -8,25 +8,25 @@
@@ -37,19 +37,19 @@
@@ -60,114 +60,77 @@
-
-
-
- - - Previous: -
- Introduction - - -
-
- - - Next: -
- Working with JSON - - -
-
-
diff --git a/redisinsight/ui/src/packages/enablement-area/guides/document/working-with-json.html b/redisinsight/ui/src/packages/enablement-area/quick-guides/document/working-with-json.html similarity index 52% rename from redisinsight/ui/src/packages/enablement-area/guides/document/working-with-json.html rename to redisinsight/ui/src/packages/enablement-area/quick-guides/document/working-with-json.html index fd6d327e81..e228f992af 100644 --- a/redisinsight/ui/src/packages/enablement-area/guides/document/working-with-json.html +++ b/redisinsight/ui/src/packages/enablement-area/quick-guides/document/working-with-json.html @@ -8,25 +8,25 @@
@@ -37,19 +37,19 @@
@@ -60,108 +60,71 @@
-
-
-
- - - Previous: -
- Working with Hashes - - -
-
- - - Next: -
- Learn More - - -
-
-
diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/EnablementArea.spec.tsx b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/EnablementArea.spec.tsx index 4689e82561..d846421de4 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/EnablementArea.spec.tsx +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/EnablementArea.spec.tsx @@ -29,7 +29,8 @@ jest.mock('uiSrc/slices/workbench/wb-enablement-area', () => { describe('EnablementArea', () => { it('should render', () => { - expect(render()).toBeTruthy() + expect(render()) + .toBeTruthy() }) it('should render loading', () => { @@ -53,7 +54,7 @@ describe('EnablementArea', () => { expect(loaderEl).not.toBeInTheDocument() expect(treeViewEl).toBeInTheDocument() - expect(treeViewEl?.childNodes.length).toEqual(MOCK_ENABLEMENT_AREA_ITEMS.length) + expect(treeViewEl?.childNodes.length).toEqual(Object.values(MOCK_ENABLEMENT_AREA_ITEMS).length) }) it('should render Group component', () => { const item = { @@ -66,7 +67,7 @@ describe('EnablementArea', () => { id: 'document-capabilities', label: 'Document Capabilities', args: { - path: 'static/workbench/guides/document-capabilities.html' + path: 'static/workbench/quick-guides/document-capabilities.html' }, } ] @@ -75,7 +76,7 @@ describe('EnablementArea', () => { const { queryByTestId } = render( ) @@ -89,13 +90,13 @@ describe('EnablementArea', () => { id: 'manual', label: 'Manual', args: { - path: 'static/workbench/scripts/manual.txt' + path: 'static/workbench/_scripts/manual.txt' }, } const { queryByTestId } = render( ) const codeButtonEl = queryByTestId(`preselect-${item.label}`) @@ -108,13 +109,13 @@ describe('EnablementArea', () => { id: 'internal-page', label: 'Internal Page', args: { - path: 'static/workbench/guides/document-capabilities.html', + path: 'static/workbench/quick-guides/document-capabilities.html', } } const { queryByTestId } = render( ) diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/EnablementArea.tsx b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/EnablementArea.tsx index 336695fc95..3d1266d03d 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/EnablementArea.tsx +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/EnablementArea.tsx @@ -19,7 +19,7 @@ import './styles.scss' import styles from './styles.module.scss' export interface Props { - items: IEnablementAreaItem[]; + items: Record; loading: boolean; openScript: (script: string, path: string) => void; openInternalPage: (page: IInternalPage) => void; @@ -69,7 +69,7 @@ const EnablementArea = ({ items, openScript, loading }: Props) => { label={label} {...args} > - {renderTreeView(children || [])} + {renderTreeView(Object.values(children || {}) || [])} ) case EnablementAreaComponent.CodeButton: @@ -108,7 +108,7 @@ const EnablementArea = ({ items, openScript, loading }: Props) => { flush className={cx(styles.innerContainer)} > - {renderTreeView(items)} + {renderTreeView(Object.values(items))} )}
void; + id: string; + pagination?: IEnablementAreaItem[] } const InternalPage = (props: Props) => { - const { onClose, title, backTitle, isLoading, error, content, onScroll, scrollTop } = props + const { onClose, title, backTitle, isLoading, error, content, onScroll, scrollTop, pagination, id } = props const components: any = { LazyCodeButton, Carousel, InternalLink, Image } const containerRef = useRef(null) - const handleScroll = () => { + const handleScroll = debounce(() => { if (containerRef.current && onScroll) { onScroll(containerRef.current.scrollTop) } - } + }, 500) useEffect(() => { if (!isLoading && !error && scrollTop && containerRef.current) { @@ -61,7 +64,7 @@ const InternalPage = (props: Props) => { ), [content]) return ( -
+
@@ -86,12 +89,21 @@ const InternalPage = (props: Props) => { -
+
{ isLoading && } { !isLoading && error && } { !isLoading && !error && contentComponent }
-
+ {!!pagination?.length && ( + <> +
+ +
+
+ +
+ + )}
) } diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalPage/styles.module.scss b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalPage/styles.module.scss index 80eec0a666..b944db8c9e 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalPage/styles.module.scss +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalPage/styles.module.scss @@ -3,36 +3,35 @@ @import '@elastic/eui/src/global_styling/index'; .container { - @include euiScrollBar; - padding: 10px 12px 0 12px !important; - overflow: auto; + min-height: 1px; height: 100%; background-color: var(--euiColorEmptyShade); text-align: left; letter-spacing: 0; color: var(--euiTextSubduedColor) !important; position: relative; + display: flex; + flex-direction: column; } .header { - position: fixed; - left: 0; - top: 0; padding: 10px 4px; width: 100%; background-color: var(--euiColorEmptyShade); } .footer { - position: fixed; - left: 0; - bottom: 0; width: 100%; background-color: var(--euiColorEmptyShade); } .content { - padding: 4px 0; + @include euiScrollBar; + padding: 14px 12px 4px 12px !important; + overflow: auto; + display: flex; + flex-direction: column; + flex: 1; } diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/LazyInternalPage/LazyInternalPage.tsx b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/LazyInternalPage/LazyInternalPage.tsx index 22ee986445..04effd5fd8 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/LazyInternalPage/LazyInternalPage.tsx +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/LazyInternalPage/LazyInternalPage.tsx @@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react' import { startCase } from 'lodash' import { useDispatch, useSelector } from 'react-redux' import axios from 'axios' + import { getApiErrorMessage, isStatusSuccessful } from 'uiSrc/utils' import { resourcesService } from 'uiSrc/services' import { IS_ABSOLUTE_PATH } from 'uiSrc/constants/regex' @@ -11,9 +12,18 @@ import { appContextWorkbenchEA, setWorkbenchEAGuideScrollTop } from 'uiSrc/slices/app/context' -import { getFileInfo } from '../../utils/getFileInfo' +import { IEnablementAreaItem } from 'uiSrc/slices/interfaces' +import { workbenchEnablementAreaSelector } from 'uiSrc/slices/workbench/wb-enablement-area' + +import { getFileInfo, getPagesInsideGroup, IFileInfo } from '../../utils/getFileInfo' import InternalPage from '../InternalPage' +interface IPageData extends IFileInfo { + content: string; + relatedPages?: IEnablementAreaItem[]; +} +const DEFAULT_PAGE_DATA = { content: '', name: '', parent: '', extension: '', location: '', relatedPages: [] } + export interface Props { onClose: () => void; title?: string; @@ -22,23 +32,25 @@ export interface Props { const LazyInternalPage = ({ onClose, title, path }: Props) => { const { guideScrollTop } = useSelector(appContextWorkbenchEA) + const enablementArea = useSelector(workbenchEnablementAreaSelector) const [isLoading, setLoading] = useState(false) const [error, setError] = useState('') - const [content, setContent] = useState('') - const pageInfo = getFileInfo(path) + const [pageData, setPageData] = useState(DEFAULT_PAGE_DATA) const dispatch = useDispatch() const fetchService = IS_ABSOLUTE_PATH.test(path) ? axios : resourcesService const loadContent = async () => { setLoading(true) setError('') - setContent('') + const pageInfo = getFileInfo(path) + const relatedPages = getPagesInsideGroup(enablementArea.items, pageInfo.location) + setPageData({ ...DEFAULT_PAGE_DATA, ...pageInfo, relatedPages }) try { const { data, status } = await fetchService.get(path) if (isStatusSuccessful(status)) { dispatch(setWorkbenchEAGuide(path)) + setPageData((prevState) => ({ ...prevState, content: data })) setLoading(false) - setContent(data) } } catch (error) { setLoading(false) @@ -50,9 +62,11 @@ const LazyInternalPage = ({ onClose, title, path }: Props) => { useEffect(() => { (async function () { - await loadContent() + if (!enablementArea.loading) { + await loadContent() + } }()) - }, [path]) + }, [path, enablementArea.loading]) const handlePageScroll = (top: number) => { dispatch(setWorkbenchEAGuideScrollTop(top)) @@ -60,14 +74,16 @@ const LazyInternalPage = ({ onClose, title, path }: Props) => { return ( ) } diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Pagination/Pagination.tsx b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Pagination/Pagination.tsx new file mode 100644 index 0000000000..f3fce970c8 --- /dev/null +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Pagination/Pagination.tsx @@ -0,0 +1,115 @@ +import React, { useContext, useEffect, useState } from 'react' +import { + EuiButton, + EuiText, + EuiContextMenuPanel, + EuiContextMenuItem, + EuiPopover +} from '@elastic/eui' +import cx from 'classnames' +import { IEnablementAreaItem } from 'uiSrc/slices/interfaces' +import EnablementAreaContext from 'uiSrc/pages/workbench/contexts/enablementAreaContext' + +import styles from './styles.module.scss' + +export interface Props { + items: IEnablementAreaItem[]; + activePageId: string; + compressed?: boolean; +} + +const Pagination = ({ items = [], activePageId, compressed }: Props) => { + const [isPopoverOpen, setPopover] = useState(false) + const [activePage, setActivePage] = useState(-1) + const { openPage } = useContext(EnablementAreaContext) + + useEffect(() => { + const index = items.findIndex((item) => item.id === activePageId) + setActivePage(index) + }, [activePageId]) + + const togglePopover = () => { + setPopover(!isPopoverOpen) + } + + const closePopover = () => { + setPopover(false) + } + + const handleOpenPage = (index: number) => { + const path = items[index]?.args?.path + closePopover() + if (index !== activePage && openPage && path) { + openPage({ path }) + } + } + + const pages = items.map((item, index) => ( + handleOpenPage(index)} + > + {item.label} + + )) + + const PagesControl = () => ( + + {`${activePage + 1} of ${items.length}`} + + )} + isOpen={isPopoverOpen} + closePopover={closePopover} + panelClassName={styles.popover} + panelPaddingSize="none" + > + + + ) + + return ( +
+
+ {activePage > 0 && ( + handleOpenPage(activePage - 1)} + size={compressed ? 's' : 'm'} + className={cx(styles.prevPage, { [styles.prevPageCompressed]: compressed })} + > + Back + + )} +
+
+ +
+
+ {(activePage < items.length - 1) && ( + handleOpenPage(activePage + 1)} + className={cx(styles.nextPage, { [styles.nextPageCompressed]: compressed })} + size={compressed ? 's' : 'm'} + > + Next + + )} +
+
+ ) +} + +export default Pagination diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Pagination/index.ts b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Pagination/index.ts new file mode 100644 index 0000000000..1466412190 --- /dev/null +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Pagination/index.ts @@ -0,0 +1,3 @@ +import Pagination from './Pagination' + +export default Pagination diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Pagination/styles.module.scss b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Pagination/styles.module.scss new file mode 100644 index 0000000000..9563eab786 --- /dev/null +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Pagination/styles.module.scss @@ -0,0 +1,82 @@ +@import '@elastic/eui/src/global_styling/index'; + +.pagination { + padding: 12px 18px; + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + border-top: 1px solid var(--separatorColor); + & > div:first-of-type,& > div:last-of-type { + min-width: 94px; + } +} + +.paginationCompressed { + padding: 8px 6px; + & > div:first-of-type,& > div:last-of-type { + min-width: 70px; + } +} + +.panel { + padding-bottom: 1px; + button:first-of-type { + border-radius: 3px 3px 0 0; + } + button:last-of-type { + border-radius: 0 0 2px 2px; + } +} + +.popover { + border: 1px solid var(--euiColorPrimary) !important; + & > div:before { + border-top-color: var(--euiColorPrimary) !important; + } +} + +.pagesItem { + padding: 4px 18px !important; + background-color: transparent; + text-decoration: none !important; + font: normal normal normal 14px/30px Graphik, sans-serif; + letter-spacing: 0; + span { + color: var(--euiTextSubduedColor); + } + &:hover { + background-color: var(--hoverInListColorLight) !important; + span { + color: inherit; + } + } + a { + text-decoration: none !important; + } +} + +.pagesItemActive, .pagesItemActive:hover { + background-color: var(--euiColorPrimary) !important; + cursor: default !important; + span { + color: var(--euiColorEmptyShade); + } +} + +.prevPage, .nextPage { + & > span { + justify-content: flex-start; + } +} + +.prevPageCompressed { + & > span { + padding: 0 12px 0 4px !important; + } +} +.nextPageCompressed { + & > span { + padding: 0 4px 0 12px !important; + } +} diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/index.ts b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/index.ts index f2f8c160d4..62dfd52659 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/index.ts +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/index.ts @@ -8,6 +8,7 @@ import InternalPage from './InternalPage' import LazyCodeButton from './LazyCodeButton' import LazyInternalPage from './LazyInternalPage' import PlainText from './PlainText' +import Pagination from './Pagination' export { Carousel, @@ -20,4 +21,5 @@ export { LazyCodeButton, LazyInternalPage, PlainText, + Pagination, } diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/styles.module.scss b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/styles.module.scss index 9dfdd67aa4..e5dd56fce2 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/styles.module.scss +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/styles.module.scss @@ -26,7 +26,6 @@ } .internalPage { - padding-top: 60px; width: 100%; max-width: 100%; position: absolute; diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/utils/getFileInfo.spec.ts b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/utils/getFileInfo.spec.ts index 271ccec5d6..ddf395a5e2 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/utils/getFileInfo.spec.ts +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/utils/getFileInfo.spec.ts @@ -1,41 +1,42 @@ -import { getFileInfo } from './getFileInfo' +import { MOCK_ENABLEMENT_AREA_ITEMS } from 'uiSrc/constants' +import { getFileInfo, getPagesInsideGroup } from './getFileInfo' const getFileInfoTests = [ { - input: '/parent-folder/file-name.txt', - expected: { title: 'file name', parent: 'parent folder', extension: 'txt' } + input: 'static/workbench/quick-guides/file-name.txt', + expected: { name: 'file-name', parent: 'quick guides', extension: 'txt', location: '/static/workbench/quick-guides' } }, { input: 'parent_folder\\file_name.txt', - expected: { title: 'file name', parent: 'parent folder', extension: 'txt' } + expected: { name: 'file_name', parent: 'parent folder', extension: 'txt', location: '/parent_folder' } }, { input: 'https://domen.com/workbench/enablement-area/introduction.html', - expected: { title: 'introduction', parent: 'enablement area', extension: 'html' } + expected: { name: 'introduction', parent: 'enablement area', extension: 'html', location: '/workbench/enablement-area' } }, { input: 'https://domen.com/introduction.html', - expected: { title: 'introduction', parent: '', extension: 'html' } + expected: { name: 'introduction', parent: '', extension: 'html', location: '' } }, { input: '/introduction.html', - expected: { title: 'introduction', parent: '', extension: 'html' } + expected: { name: 'introduction', parent: '', extension: 'html', location: '' } }, { input: '//parent/markdown.md', - expected: { title: '', parent: '', extension: '' } + expected: { name: '', parent: '', extension: '', location: '' } }, { input: '/file.txt', - expected: { title: 'file', parent: '', extension: 'txt' } + expected: { name: 'file', parent: '', extension: 'txt', location: '' } }, { input: '', - expected: { title: '', parent: '', extension: '' } + expected: { name: '', parent: '', extension: '', location: '' } }, { input: '/', - expected: { title: '', parent: '', extension: '' } + expected: { name: '', parent: '', extension: '', location: '' } }, ] @@ -48,3 +49,21 @@ describe('getFileInfo', () => { } ) }) + +const getPagesInsideGroupTests = [ + { + input: [MOCK_ENABLEMENT_AREA_ITEMS, '/static/workbench/quick-guides'], + expected: Object.values(MOCK_ENABLEMENT_AREA_ITEMS['quick-guides'].children || {}) + }, +] + +describe('getPagesInsideGroup', () => { + test.each(getPagesInsideGroupTests)( + '%j', + ({ input, expected }) => { + // @ts-ignore + const result = getPagesInsideGroup(...input) + expect(result).toEqual(expected) + } + ) +}) diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/utils/getFileInfo.ts b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/utils/getFileInfo.ts index 545139b93f..28ee8ca4b6 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/utils/getFileInfo.ts +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/utils/getFileInfo.ts @@ -1,22 +1,27 @@ +import { get } from 'lodash' import { API_URL } from 'uiSrc/constants' import { IS_ABSOLUTE_PATH } from 'uiSrc/constants/regex' +import { EnablementAreaComponent, IEnablementAreaItem } from 'uiSrc/slices/interfaces' -interface IFileInfo { +export interface IFileInfo { extension: string; - title: string; + name: string; parent: string; + location: string; } export const getFileInfo = (path: string): IFileInfo => { - const result = { extension: '', title: '', parent: '' } + const result: IFileInfo = { extension: '', name: '', parent: '', location: '' } try { const url = IS_ABSOLUTE_PATH.test(path) ? new URL(path) : new URL(path, API_URL) const pathNames = url.pathname.split('/') const file = pathNames.pop() || '' - const [fileName, extension] = file.split('.') + + result.location = pathNames.join('/') const parent = pathNames.pop() || '' + const [fileName, extension] = file.split('.') if (fileName) { - result.title = fileName.replace(/[-_]+/g, ' ') + result.name = fileName } if (extension) { result.extension = extension @@ -29,3 +34,19 @@ export const getFileInfo = (path: string): IFileInfo => { return result } } + +const EA_STATIC_PATH_REGEX = /^\/?static\/(workbench|enablement-area)\// + +export const getPagesInsideGroup = ( + structure: Record, + path: string +): IEnablementAreaItem[] => { + if (!IS_ABSOLUTE_PATH.test(path) && EA_STATIC_PATH_REGEX.test(path)) { + const groupPath = path.replace(EA_STATIC_PATH_REGEX, '').replace('/', '.children.') + const groupChildren = get(structure, groupPath, undefined)?.children + if (groupChildren) { + return Object.values(groupChildren).filter((item) => item.type === EnablementAreaComponent.InternalLink) + } + } + return [] +} diff --git a/redisinsight/ui/src/slices/interfaces/workbench.ts b/redisinsight/ui/src/slices/interfaces/workbench.ts index f0c3ae8baf..ff786c27ce 100644 --- a/redisinsight/ui/src/slices/interfaces/workbench.ts +++ b/redisinsight/ui/src/slices/interfaces/workbench.ts @@ -22,12 +22,12 @@ export interface IEnablementAreaItem { id: string, type: EnablementAreaComponent, label: string, - children?: IEnablementAreaItem[], + children?: Record, args?: Record, } export interface StateWorkbenchEnablementArea { loading: boolean; error: string; - items: IEnablementAreaItem[]; + items: Record; } diff --git a/redisinsight/ui/src/slices/tests/workbench/wb-enablement-area.spec.ts b/redisinsight/ui/src/slices/tests/workbench/wb-enablement-area.spec.ts index 27fb1861c8..23aeeddd4e 100644 --- a/redisinsight/ui/src/slices/tests/workbench/wb-enablement-area.spec.ts +++ b/redisinsight/ui/src/slices/tests/workbench/wb-enablement-area.spec.ts @@ -61,7 +61,7 @@ describe('slices', () => { describe('getWBEnablementAreaSuccess', () => { it('should properly set state after success', () => { // Arrange - const items: IEnablementAreaItem[] = MOCK_ENABLEMENT_AREA_ITEMS + const items: Record = MOCK_ENABLEMENT_AREA_ITEMS const state = { ...initialState, items, diff --git a/redisinsight/ui/src/slices/workbench/wb-enablement-area.ts b/redisinsight/ui/src/slices/workbench/wb-enablement-area.ts index a570b34aa1..bae21f1897 100644 --- a/redisinsight/ui/src/slices/workbench/wb-enablement-area.ts +++ b/redisinsight/ui/src/slices/workbench/wb-enablement-area.ts @@ -6,8 +6,8 @@ import { EnablementAreaComponent, IEnablementAreaItem, StateWorkbenchEnablementA import { AppDispatch, RootState } from '../store' -export const defaultItems: IEnablementAreaItem[] = [ - { +export const defaultItems: Record = { + manual: { type: EnablementAreaComponent.CodeButton, id: 'manual', label: 'Manual', @@ -15,11 +15,11 @@ export const defaultItems: IEnablementAreaItem[] = [ content: MONACO_MANUAL, } } -] +} export const initialState: StateWorkbenchEnablementArea = { loading: false, error: '', - items: [], + items: {}, } // A slice for recipes @@ -61,7 +61,8 @@ export function fetchEnablementArea(onSuccessAction?: () => void, onFailAction?: dispatch(getWBEnablementArea()) try { - const { data, status } = await resourcesService.get(ApiEndpoints.ENABLEMENT_AREA) + const { data, status } = await resourcesService + .get>(ApiEndpoints.ENABLEMENT_AREA) if (isStatusSuccessful(status)) { dispatch(getWBEnablementAreaSuccess(data)) From cf5a82a03480f99ea367a9dff17baca13dcf3d0c Mon Sep 17 00:00:00 2001 From: Artyom Podymov Date: Fri, 3 Dec 2021 19:32:20 +0300 Subject: [PATCH 2/3] #RI-2062 update styles --- .../EnablementArea/EnablementArea.tsx | 6 +-- .../components/Carousel/Carousel.spec.tsx | 40 --------------- .../components/Carousel/Carousel.tsx | 45 ----------------- .../components/Carousel/index.ts | 3 -- .../components/Carousel/styles.module.scss | 9 ---- .../components/Group/styles.scss | 10 +++- .../InternalLink/styles.module.scss | 1 + .../components/InternalPage/InternalPage.tsx | 49 ++++++++----------- .../InternalPage/styles.module.scss | 32 ++++++++++-- .../components/InternalPage/styles.scss | 17 +++++-- .../components/Pagination/Pagination.tsx | 12 +++-- .../components/Pagination/styles.module.scss | 17 +++++-- .../EnablementArea/components/index.ts | 2 - .../EnablementArea/styles.module.scss | 10 ++-- 14 files changed, 97 insertions(+), 156 deletions(-) delete mode 100644 redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Carousel/Carousel.spec.tsx delete mode 100644 redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Carousel/Carousel.tsx delete mode 100644 redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Carousel/index.ts delete mode 100644 redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Carousel/styles.module.scss diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/EnablementArea.tsx b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/EnablementArea.tsx index b201493ac2..4e22440a2b 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/EnablementArea.tsx +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/EnablementArea.tsx @@ -76,8 +76,8 @@ const EnablementArea = ({ items, openScript, loading }: Props) => { ) case EnablementAreaComponent.CodeButton: return args?.path - ? - : openScript(args?.content || '', '')} label={label} {...args} /> + ?
+ :
openScript(args?.content || '', '')} label={label} {...args} />
case EnablementAreaComponent.InternalLink: return ( @@ -91,7 +91,7 @@ const EnablementArea = ({ items, openScript, loading }: Props) => { const renderTreeView = (elements: IEnablementAreaItem[]) => ( elements?.map((item) => ( -
+
{renderSwitch(item)}
))) diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Carousel/Carousel.spec.tsx b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Carousel/Carousel.spec.tsx deleted file mode 100644 index 227ac1e875..0000000000 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Carousel/Carousel.spec.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react' -import { instance, mock } from 'ts-mockito' -import { fireEvent, render } from 'uiSrc/utils/test-utils' -import Carousel, { Props } from './Carousel' - -const mockedProps = mock() - -describe('Carousel', () => { - it('should render initial slide and pagination by using React portal', () => { - const { container, queryByTestId } = render( -
- -
Slide 1
-
Slide 2
- -
-
- ) - - expect(container).toBeTruthy() - expect(queryByTestId('slide-1')).toBeInTheDocument() - expect(queryByTestId('slide-2')).not.toBeInTheDocument() - expect(container?.querySelector('.pagination')).toBeInTheDocument() - }) - it('should switch slide', () => { - const { queryByTestId, container } = render( -
- -
Slide 1
-
Slide 2
- -
-
- ) - - fireEvent.click(container?.querySelector('[data-test-subj="pagination-button-next"]') as Element) - expect(queryByTestId('slide-1')).not.toBeInTheDocument() - expect(queryByTestId('slide-2')).toBeInTheDocument() - }) -}) diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Carousel/Carousel.tsx b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Carousel/Carousel.tsx deleted file mode 100644 index f9ca14ec05..0000000000 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Carousel/Carousel.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import ReactDOM from 'react-dom' -import React, { useEffect, useState } from 'react' -import { EuiPagination } from '@elastic/eui' - -import styles from './styles.module.scss' - -export interface Props { - children: React.ReactElement[]; -} -const Carousel = ({ children }: Props) => { - const [slideIndex, setSlideIndex] = useState(0) - const [slides, setSlides] = useState([]) - - useEffect(() => { - // Get items only with specified key attribute - setSlides(children.filter((element) => element?.key && element.key.toString().startsWith('slide'))) - }, []) - - const Pagination = () => { - const footerEl = document.getElementById('internalPageFooter') - if (footerEl) { - return ReactDOM.createPortal( -
- setSlideIndex(slide)} - /> -
, - footerEl - ) - } - return null - } - return ( -
- {slides[slideIndex]} - {slides.length && } -
- ) -} - -export default Carousel diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Carousel/index.ts b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Carousel/index.ts deleted file mode 100644 index 349416af45..0000000000 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Carousel/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import Carousel from './Carousel' - -export default Carousel diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Carousel/styles.module.scss b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Carousel/styles.module.scss deleted file mode 100644 index 6e4d396369..0000000000 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Carousel/styles.module.scss +++ /dev/null @@ -1,9 +0,0 @@ -.container { - margin-bottom: 40px; -} - -.pagination { - width: 100%; - display: flex; - justify-content: center; -} diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Group/styles.scss b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Group/styles.scss index f11fee8396..9ce16b2548 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Group/styles.scss +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Group/styles.scss @@ -20,7 +20,7 @@ .euiAccordion-isOpen { min-width: 100%; &.withBorder { - border-color: var(--separatorColor) + border-color: var(--separatorColor); } } .euiAccordion__triggerWrapper, .euiAccordion__childWrapper { @@ -34,9 +34,15 @@ button { padding: 3px 8px; line-height: 24px; + max-height: 30px; + &:hover { + background-color: var(--hoverInListColorLight); + color: var(--euiTextColor) + } } .euiListGroupItem__label { - line-height: 20px; + font: normal normal normal 14px/20px Graphik; + letter-spacing: -0.14px; } } } diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalLink/styles.module.scss b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalLink/styles.module.scss index b573bfa744..d1c4c1ac6e 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalLink/styles.module.scss +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalLink/styles.module.scss @@ -31,4 +31,5 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + line-height: 24px; } diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalPage/InternalPage.tsx b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalPage/InternalPage.tsx index 121ad9e8c1..fb1cc604fb 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalPage/InternalPage.tsx +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalPage/InternalPage.tsx @@ -1,12 +1,9 @@ import React, { useMemo, useRef, useEffect } from 'react' import { - EuiFlexGroup, - EuiFlexItem, EuiFlyoutHeader, - EuiTitle, EuiText, - EuiButtonIcon, - EuiLoadingContent, + EuiButtonEmpty, + EuiLoadingContent, EuiHorizontalRule, } from '@elastic/eui' import JsxParser from 'react-jsx-parser' import cx from 'classnames' @@ -14,7 +11,6 @@ import { debounce } from 'lodash' import { LazyCodeButton, - Carousel, InternalLink, Image, EmptyPrompt, Pagination @@ -38,7 +34,7 @@ export interface Props { } const InternalPage = (props: Props) => { const { onClose, title, backTitle, isLoading, error, content, onScroll, scrollTop, pagination, id } = props - const components: any = { LazyCodeButton, Carousel, InternalLink, Image } + const components: any = { LazyCodeButton, InternalLink, Image } const containerRef = useRef(null) const handleScroll = debounce(() => { if (containerRef.current && onScroll) { @@ -66,28 +62,23 @@ const InternalPage = (props: Props) => { return (
- - - - - -
- {backTitle} -
- - - - - - {title?.toUpperCase()} - - - +
+ + {backTitle} + +
+
+ +
+
+ {title?.toUpperCase()} +
{ isLoading && } diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalPage/styles.module.scss b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalPage/styles.module.scss index b944db8c9e..253ca05727 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalPage/styles.module.scss +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalPage/styles.module.scss @@ -15,23 +15,47 @@ } .header { - padding: 10px 4px; + padding: 6px 0; width: 100%; background-color: var(--euiColorEmptyShade); + & > div { + width: 100%; + padding: 0 18px; + } } .footer { width: 100%; background-color: var(--euiColorEmptyShade); } - - +.pageTitle { + margin: 8px 0 4px; + font: normal normal 500 14px/24px Graphik, sans-serif; +} +.backButton { + padding: 0 4px; + max-height: 30px; + line-height: 24px; + width: 100%; + font: normal normal 14px/24px Graphik, sans-serif !important; + text-decoration: none; + color: var(--euiTextSubduedColor) !important; + & > span { + justify-content: flex-start; + } + &:hover { + background-color: var(--hoverInListColorLight); + color: var(--euiTextColor) !important; + text-decoration: none !important; + } +} .content { @include euiScrollBar; - padding: 14px 12px 4px 12px !important; + padding: 8px 12px 4px 18px !important; overflow: auto; display: flex; flex-direction: column; flex: 1; } + diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalPage/styles.scss b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalPage/styles.scss index b7c4ffdeb8..c9f706c717 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalPage/styles.scss +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalPage/styles.scss @@ -1,13 +1,22 @@ +@mixin font{ + font: normal normal normal 14px/24px Graphik; + letter-spacing: -0.14px; + @media only screen and (max-width: 992px) { + font: normal normal normal 12px/18px Graphik; + letter-spacing: -0.12px; + } +} + .enablement-area__page { height: 100%; - font: normal normal normal 12px/18px Graphik; + @include font; letter-spacing: -0.12px; h1, h2, h3, h4, h5, h6 { color: var(--euiColorGhost); - font: normal normal medium 12px/16px Graphik; + font: normal normal 500 14px/24px Graphik; margin-bottom: 12px; - letter-spacing: -0.12px; + letter-spacing: 0; } p { @@ -22,7 +31,7 @@ } } b, strong { - font: normal normal normal 12px/16px Graphik; + @include font; letter-spacing: -0.12px; color: var(--htmlColor); } diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Pagination/Pagination.tsx b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Pagination/Pagination.tsx index f3fce970c8..0c4f460b0c 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Pagination/Pagination.tsx +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Pagination/Pagination.tsx @@ -1,7 +1,6 @@ import React, { useContext, useEffect, useState } from 'react' import { EuiButton, - EuiText, EuiContextMenuPanel, EuiContextMenuItem, EuiPopover @@ -58,8 +57,8 @@ const Pagination = ({ items = [], activePageId, compressed }: Props) => { - {`${activePage + 1} of ${items.length}`} + )} isOpen={isPopoverOpen} @@ -67,7 +66,12 @@ const Pagination = ({ items = [], activePageId, compressed }: Props) => { panelClassName={styles.popover} panelPaddingSize="none" > - + ) diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Pagination/styles.module.scss b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Pagination/styles.module.scss index 9563eab786..6a07f723bf 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Pagination/styles.module.scss +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Pagination/styles.module.scss @@ -36,6 +36,15 @@ } } +.popoverButton { + text-decoration: underline; + color: var(--euiTextSubduedColor); + &:hover, &:focus { + color: var(--euiTextColor); + } + font: normal normal 500 13px/18px Graphik, sans-serif; +} + .pagesItem { padding: 4px 18px !important; background-color: transparent; @@ -45,18 +54,18 @@ span { color: var(--euiTextSubduedColor); } + &:focus { + background-color: transparent !important; + } &:hover { background-color: var(--hoverInListColorLight) !important; span { color: inherit; } } - a { - text-decoration: none !important; - } } -.pagesItemActive, .pagesItemActive:hover { +.pagesItemActive, .pagesItemActive:hover, .pagesItemActive:focus { background-color: var(--euiColorPrimary) !important; cursor: default !important; span { diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/index.ts b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/index.ts index 62dfd52659..651a69e594 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/index.ts +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/index.ts @@ -1,4 +1,3 @@ -import Carousel from './Carousel' import CodeButton from './CodeButton' import EmptyPrompt from './EmptyPrompt' import Group from './Group' @@ -11,7 +10,6 @@ import PlainText from './PlainText' import Pagination from './Pagination' export { - Carousel, CodeButton, EmptyPrompt, Group, diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/styles.module.scss b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/styles.module.scss index e5dd56fce2..84a2313734 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/styles.module.scss +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/styles.module.scss @@ -2,10 +2,11 @@ @import '@elastic/eui/src/components/table/mixins'; @import '@elastic/eui/src/global_styling/index'; +$paddingHorizontal: 18px; .container { overflow: hidden; height: 100%; - padding: 0 8px; + padding: 0 $paddingHorizontal; background-color: var(--euiColorEmptyShade); border: 1px solid var(--euiColorLightShade) !important; } @@ -20,11 +21,6 @@ color: var(--euiTextSubduedColor) !important; } -.item { - padding: 6px 0; - min-width: 100%; -} - .internalPage { width: 100%; max-width: 100%; @@ -38,5 +34,5 @@ } .internalPageVisible { - transform: translateX(-8px); + transform: translateX(-$paddingHorizontal); } From 38e4c561f50fe9281dfdfa256d7d98844f2a07cd Mon Sep 17 00:00:00 2001 From: Artyom Podymov Date: Mon, 6 Dec 2021 19:09:40 +0300 Subject: [PATCH 3/3] #RI-2062 - update styles and add unit tests --- .../constants/mocks/mock-enablement-area.ts | 24 +++++- .../components/CodeButton/CodeButton.tsx | 2 +- .../components/CodeButton/styles.module.scss | 10 +++ .../components/Group/styles.scss | 2 +- .../components/InternalPage/InternalPage.tsx | 6 +- .../InternalPage/styles.module.scss | 2 +- .../components/Pagination/Pagination.spec.tsx | 75 +++++++++++++++++++ .../components/Pagination/Pagination.tsx | 20 +++-- .../components/Pagination/styles.module.scss | 15 +++- .../EnablementArea/utils/getFileInfo.spec.ts | 12 +++ .../EnablementArea/utils/getFileInfo.ts | 24 ++++-- .../themes/dark_theme/_dark_theme.lazy.scss | 1 + .../themes/dark_theme/_theme_color.scss | 1 + .../themes/light_theme/_light_theme.lazy.scss | 1 + 14 files changed, 171 insertions(+), 24 deletions(-) create mode 100644 redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Pagination/Pagination.spec.tsx diff --git a/redisinsight/ui/src/constants/mocks/mock-enablement-area.ts b/redisinsight/ui/src/constants/mocks/mock-enablement-area.ts index d1ca4e667a..b5f54ddcb3 100644 --- a/redisinsight/ui/src/constants/mocks/mock-enablement-area.ts +++ b/redisinsight/ui/src/constants/mocks/mock-enablement-area.ts @@ -14,12 +14,20 @@ export const MOCK_ENABLEMENT_AREA_ITEMS: Record = { path: 'static/workbench/quick-guides/document-capabilities.html', }, }, - 'document': { + 'working-with-json': { type: EnablementAreaComponent.InternalLink, - id: 'document', - label: 'Document', + id: 'working-with-json', + label: 'Working with JSON', args: { - path: 'static/workbench/quick-guides/document.html', + path: 'static/workbench/quick-guides/working-with-json.html', + }, + }, + 'working-with-hash': { + type: EnablementAreaComponent.InternalLink, + id: 'working-with-hash', + label: 'Working with HASH', + args: { + path: 'static/workbench/quick-guides/working-with-hash.html', }, } } @@ -32,6 +40,14 @@ export const MOCK_ENABLEMENT_AREA_ITEMS: Record = { path: 'static/workbench/quick-guides/document-capabilities.html' }, }, + 'second-internal-page': { + type: EnablementAreaComponent.InternalLink, + id: 'second-internal-page', + label: 'Second Internal Page', + args: { + path: 'static/workbench/quick-guides/document-capabilities.html' + }, + }, 'manual': { type: EnablementAreaComponent.CodeButton, id: 'manual', diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/CodeButton/CodeButton.tsx b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/CodeButton/CodeButton.tsx index ab3aa7a35f..0e4bd17999 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/CodeButton/CodeButton.tsx +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/CodeButton/CodeButton.tsx @@ -17,7 +17,7 @@ const CodeButton = ({ onClick, label, isLoading, ...rest }: Props) => ( onClick={onClick} fullWidth color="secondary" - contentProps={{ className: styles.button }} + className={styles.button} textProps={{ className: styles.buttonText }} data-testid={`preselect-${label}`} {...rest} diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/CodeButton/styles.module.scss b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/CodeButton/styles.module.scss index 32424ff45e..645b37b7cd 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/CodeButton/styles.module.scss +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/CodeButton/styles.module.scss @@ -1,5 +1,15 @@ +@import '@elastic/eui/src/global_styling/index'; + .button { justify-content: space-between; + &[class*='euiButton--secondary']:not([class*='isDisabled']) { + &:hover, + &:focus, + &:focus-within { + background-color: var(--euiColorSecondary) !important; + border-color: var(--euiColorSecondary) !important; + } + } &:not(:hover) { span { color: var(--euiTextSubduedColor); diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Group/styles.scss b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Group/styles.scss index 9ce16b2548..f59a9a1f2f 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Group/styles.scss +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Group/styles.scss @@ -36,7 +36,7 @@ line-height: 24px; max-height: 30px; &:hover { - background-color: var(--hoverInListColorLight); + background-color: var(--hoverInListColorDarken); color: var(--euiTextColor) } } diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalPage/InternalPage.tsx b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalPage/InternalPage.tsx index fb1cc604fb..908175a75c 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalPage/InternalPage.tsx +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalPage/InternalPage.tsx @@ -3,7 +3,8 @@ import { EuiFlyoutHeader, EuiText, EuiButtonEmpty, - EuiLoadingContent, EuiHorizontalRule, + EuiLoadingContent, + EuiHorizontalRule, } from '@elastic/eui' import JsxParser from 'react-jsx-parser' import cx from 'classnames' @@ -13,7 +14,8 @@ import { LazyCodeButton, InternalLink, Image, - EmptyPrompt, Pagination + EmptyPrompt, + Pagination } from 'uiSrc/pages/workbench/components/enablament-area/EnablementArea/components' import { IEnablementAreaItem } from 'uiSrc/slices/interfaces' diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalPage/styles.module.scss b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalPage/styles.module.scss index 253ca05727..84f403651a 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalPage/styles.module.scss +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalPage/styles.module.scss @@ -44,7 +44,7 @@ justify-content: flex-start; } &:hover { - background-color: var(--hoverInListColorLight); + background-color: var(--hoverInListColorDarken); color: var(--euiTextColor) !important; text-decoration: none !important; } diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Pagination/Pagination.spec.tsx b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Pagination/Pagination.spec.tsx new file mode 100644 index 0000000000..96cdbd240d --- /dev/null +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Pagination/Pagination.spec.tsx @@ -0,0 +1,75 @@ +import React from 'react' +import { fireEvent, render, screen, waitFor } from 'uiSrc/utils/test-utils' +import { MOCK_ENABLEMENT_AREA_ITEMS } from 'uiSrc/constants' +import { defaultValue, EnablementAreaProvider } from 'uiSrc/pages/workbench/contexts/enablementAreaContext' +import Pagination from './Pagination' + +const paginationItems = Object.values(MOCK_ENABLEMENT_AREA_ITEMS['quick-guides']?.children || {}) + +describe('Pagination', () => { + it('should render', () => { + const component = render() + const { queryByTestId } = component + + expect(component).toBeTruthy() + expect(queryByTestId('enablement-area__prev-page-btn')).not.toBeInTheDocument() + expect(queryByTestId('enablement-area__next-page-btn')).toBeInTheDocument() + }) + it('should correctly open popover', () => { + const { queryByTestId } = render( + + ) + fireEvent.click(screen.getByTestId('enablement-area__pagination-popover-btn')) + const popover = queryByTestId('enablement-area__pagination-popover') + + expect(popover).toBeInTheDocument() + expect(popover?.querySelectorAll('.pagesItem').length).toEqual(paginationItems.length) + expect(popover?.querySelector('.pagesItemActive')).toHaveTextContent(paginationItems[0].label) + }) + it('should correctly open next page', () => { + const openPage = jest.fn() + const pageIndex = 0 + + render( + + + + ) + fireEvent.click(screen.getByTestId('enablement-area__next-page-btn')) + + expect(openPage).toBeCalledWith({ path: paginationItems[pageIndex + 1]?.args?.path }) + }) + it('should correctly open previous page', () => { + const openPage = jest.fn() + const pageIndex = 1 + + render( + + + + ) + fireEvent.click(screen.getByTestId('enablement-area__prev-page-btn')) + + expect(openPage).toBeCalledWith({ path: paginationItems[pageIndex - 1]?.args?.path }) + }) + it('should correctly open by using pagination popover', async () => { + const openPage = jest.fn() + const { queryByTestId } = render( + + + + ) + + fireEvent.click(screen.getByTestId('enablement-area__pagination-popover-btn')) + const popover = queryByTestId('enablement-area__pagination-popover') + await waitFor(() => { + popover?.querySelectorAll('.pagesItem').forEach(async (el) => { + fireEvent.click(el) + }) + }) + + expect(openPage).toBeCalledTimes(paginationItems.length - 1) // -1 because active item should not be clickable + expect(openPage) + .lastCalledWith({ path: paginationItems[paginationItems.length - 1]?.args?.path }) + }) +}) diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Pagination/Pagination.tsx b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Pagination/Pagination.tsx index 0c4f460b0c..5f6f9e168d 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Pagination/Pagination.tsx +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Pagination/Pagination.tsx @@ -13,18 +13,20 @@ import styles from './styles.module.scss' export interface Props { items: IEnablementAreaItem[]; - activePageId: string; + activePageId?: string; compressed?: boolean; } const Pagination = ({ items = [], activePageId, compressed }: Props) => { const [isPopoverOpen, setPopover] = useState(false) - const [activePage, setActivePage] = useState(-1) + const [activePage, setActivePage] = useState(0) const { openPage } = useContext(EnablementAreaContext) useEffect(() => { - const index = items.findIndex((item) => item.id === activePageId) - setActivePage(index) + if (activePageId) { + const index = items.findIndex((item) => item.id === activePageId) + setActivePage(index) + } }, [activePageId]) const togglePopover = () => { @@ -57,7 +59,12 @@ const Pagination = ({ items = [], activePageId, compressed }: Props) => { + )} @@ -67,6 +74,7 @@ const Pagination = ({ items = [], activePageId, compressed }: Props) => { panelPaddingSize="none" > { { div:first-of-type,& > div:last-of-type { + & > div:first-of-type, & > div:last-of-type { min-width: 70px; } } .panel { - padding-bottom: 1px; + padding: 1px 0; button:first-of-type { border-radius: 3px 3px 0 0; } @@ -31,8 +31,15 @@ .popover { border: 1px solid var(--euiColorPrimary) !important; - & > div:before { - border-top-color: var(--euiColorPrimary) !important; + [class~=euiPopover__panelArrow] { + &:before { + border-top-color: var(--euiColorPrimary) !important; + } + } + [class~=euiPopover__panelArrow--bottom] { + &:before { + border-bottom-color: var(--euiColorPrimary) !important; + } } } diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/utils/getFileInfo.spec.ts b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/utils/getFileInfo.spec.ts index ddf395a5e2..c9f5eb4286 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/utils/getFileInfo.spec.ts +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/utils/getFileInfo.spec.ts @@ -55,6 +55,18 @@ const getPagesInsideGroupTests = [ input: [MOCK_ENABLEMENT_AREA_ITEMS, '/static/workbench/quick-guides'], expected: Object.values(MOCK_ENABLEMENT_AREA_ITEMS['quick-guides'].children || {}) }, + { + input: [MOCK_ENABLEMENT_AREA_ITEMS, '/static/workbench/'], + expected: [MOCK_ENABLEMENT_AREA_ITEMS['internal-page'], MOCK_ENABLEMENT_AREA_ITEMS['second-internal-page']] + }, + { + input: [MOCK_ENABLEMENT_AREA_ITEMS, 'https://domen.com/workbench/enablement-area/'], + expected: [] + }, + { + input: [], + expected: [] + }, ] describe('getPagesInsideGroup', () => { diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/utils/getFileInfo.ts b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/utils/getFileInfo.ts index 28ee8ca4b6..e271d0efbd 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/utils/getFileInfo.ts +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/utils/getFileInfo.ts @@ -36,17 +36,29 @@ export const getFileInfo = (path: string): IFileInfo => { } const EA_STATIC_PATH_REGEX = /^\/?static\/(workbench|enablement-area)\// +const EA_STATIC_ROOT_PATH = /^\/?static\/(workbench|enablement-area)\/?$/ export const getPagesInsideGroup = ( structure: Record, path: string ): IEnablementAreaItem[] => { - if (!IS_ABSOLUTE_PATH.test(path) && EA_STATIC_PATH_REGEX.test(path)) { - const groupPath = path.replace(EA_STATIC_PATH_REGEX, '').replace('/', '.children.') - const groupChildren = get(structure, groupPath, undefined)?.children - if (groupChildren) { - return Object.values(groupChildren).filter((item) => item.type === EnablementAreaComponent.InternalLink) + try { + if (EA_STATIC_PATH_REGEX.test(path)) { + let groupPath = path.replace(EA_STATIC_PATH_REGEX, '') + let groupChildren + if (!EA_STATIC_ROOT_PATH.test(path)) { + groupPath = groupPath.replace('/', '.children.') + groupChildren = get(structure, groupPath, undefined)?.children + } else { + groupChildren = structure + } + if (groupChildren) { + return Object.values(groupChildren) + .filter((item) => item.type === EnablementAreaComponent.InternalLink) + } } + return [] + } catch (e) { + return [] } - return [] } diff --git a/redisinsight/ui/src/styles/themes/dark_theme/_dark_theme.lazy.scss b/redisinsight/ui/src/styles/themes/dark_theme/_dark_theme.lazy.scss index f808273d44..732506a7e5 100644 --- a/redisinsight/ui/src/styles/themes/dark_theme/_dark_theme.lazy.scss +++ b/redisinsight/ui/src/styles/themes/dark_theme/_dark_theme.lazy.scss @@ -84,6 +84,7 @@ --controlsLabelColor: #{$controlsLabelColor}; --hoverInListColor: #{$hoverInListColor}; --hoverInListColorLight: #{$hoverInListColorLight}; + --hoverInListColorDarken: #{$hoverInListColorDarken}; --externalLinkColor: #{$externalLinkColor}; --externalLinkTooltipColor: #{$externalLinkTooltipColor}; diff --git a/redisinsight/ui/src/styles/themes/dark_theme/_theme_color.scss b/redisinsight/ui/src/styles/themes/dark_theme/_theme_color.scss index 9530883b9a..a7fd414d57 100644 --- a/redisinsight/ui/src/styles/themes/dark_theme/_theme_color.scss +++ b/redisinsight/ui/src/styles/themes/dark_theme/_theme_color.scss @@ -61,6 +61,7 @@ $buttonDangerHoverColor: #E8524A; $hoverInListColor: #070707; $hoverInListColorLight: #465282; +$hoverInListColorDarken: #292F47; $textColorShade: #b5b6c0; $cliOutputResponseColor: #ffffff; $cliOutputResponseFailColor: #e06c75; diff --git a/redisinsight/ui/src/styles/themes/light_theme/_light_theme.lazy.scss b/redisinsight/ui/src/styles/themes/light_theme/_light_theme.lazy.scss index ce0bb6deae..314f4df6f6 100644 --- a/redisinsight/ui/src/styles/themes/light_theme/_light_theme.lazy.scss +++ b/redisinsight/ui/src/styles/themes/light_theme/_light_theme.lazy.scss @@ -86,6 +86,7 @@ --controlsLabelHoverColor: #{$controlsLabelHoverColor}; --hoverInListColor: #{$hoverInListColor}; --hoverInListColorLight: #{$hoverInListColor}; + --hoverInListColorDarken: #{$hoverInListColorLight}; --externalLinkColor: #{$externalLinkColor}; --externalLinkTooltipColor: #{$externalLinkTooltipColor};