From a557a283453dc50f170d58cbed09d84ccb92fe9f Mon Sep 17 00:00:00 2001 From: Arlen Johnson Date: Mon, 22 Jan 2024 17:32:17 -0500 Subject: [PATCH] Improve layout and UX for External Identity Source Records (CFM-363) (#145) --- app/resources/locales/en_US/field.po | 10 +- app/resources/locales/en_US/information.po | 6 + .../ExternalIdentitySources/retrieve.php | 276 +++++++++++------- .../ExternalIdentitySources/search.php | 141 +++++---- app/templates/element/menuPanel.php | 18 +- app/templates/element/menuTop.php | 97 +++--- app/templates/element/subnavigation.php | 23 +- app/webroot/css/co-base.css | 53 +++- app/webroot/css/co-responsive.css | 3 + 9 files changed, 397 insertions(+), 230 deletions(-) diff --git a/app/resources/locales/en_US/field.po b/app/resources/locales/en_US/field.po index d54299d3e..ac02352bc 100644 --- a/app/resources/locales/en_US/field.po +++ b/app/resources/locales/en_US/field.po @@ -113,6 +113,9 @@ msgstr "Frozen" msgid "id" msgstr "ID" +msgid "item" +msgstr "Item" + msgid "family" msgstr "Family Name" @@ -258,6 +261,9 @@ msgstr "Timestamp" msgid "title" msgstr "Title" +msgid "type" +msgstr "Type" + msgid "url" msgstr "URL" @@ -351,8 +357,8 @@ msgstr "Limit Global Search Scope" msgid "CoSettings.search_global_limited_models.desc" msgstr "If true, Global Search will only search Names, Email Addresses, and Identifiers. This may result in faster searches for larger deployments." -msgid "ExternalIdentitySources.source_record.desc" -msgstr "If the source record is empty, it likely indicates this record is no longer available from the datasource" +msgid "ExternalIdentitySources.source_record.empty" +msgstr "The source record is empty. This suggests the record is no longer available from the datasource." msgid "GroupMembers.source" msgstr "Membership Source" diff --git a/app/resources/locales/en_US/information.po b/app/resources/locales/en_US/information.po index e5183c44e..73edccf50 100644 --- a/app/resources/locales/en_US/information.po +++ b/app/resources/locales/en_US/information.po @@ -60,12 +60,18 @@ msgstr "This External Identity was created from {0} ({1})" msgid "ExternalIdentitySources.retrieve" msgstr "This is the current record available directly from the source. To view the latest record retrieved and cached by Registry, click View External Identity Source Record." +msgid "ExternalIdentitySourceRecords.metadata" +msgstr "Metadata" + msgid "ExternalIdentitySourceRecords.view" msgstr "This is the latest record retrieved from the source, as cached by Registry. To view the current record directly from the source, select Retrieve from External Identity Source." msgid "ExternalIdentitySources.search.attrs.none" msgstr "The External Identity Source cannot be searched." +msgid "ExternalIdentitySources.search.single.placeholder" +msgstr "Search directly against the source for any value" + msgid "global.attribute.modal" msgstr "Attribute Modal" diff --git a/app/templates/ExternalIdentitySources/retrieve.php b/app/templates/ExternalIdentitySources/retrieve.php index cebe36a39..6ad48a2d0 100644 --- a/app/templates/ExternalIdentitySources/retrieve.php +++ b/app/templates/ExternalIdentitySources/retrieve.php @@ -26,105 +26,139 @@ */ use \Cake\Utility\Inflector; + + // Include the plugin subnavigation + $subnav = [ + 'name' => 'plugin', + 'active' => 'search' + ]; + + // Generate the subnavigation title and tabs + print $this->element('subnavigation', $subnav); ?>
-

+

-
- - -
- Flash->render() ?> - - - - Alert->alert($b, 'warning') ?> - - - - - - Alert->alert($b, 'warning') ?> - - -
- - - - - - + ], + 'label' => __d('operation', 'ExternalIdentitySources.sync') + ]; + + if(!empty($vv_external_identity_record)) { + $action_args['vv_actions'][] = [ + 'order' => 2, + 'icon' => 'visibility', + 'url' => [ + 'controller' => 'external-identities', + 'action' => 'view', + $vv_external_identity_record->external_identity_id + ], + 'label' => __d('operation', 'view.a', [__d('controller', 'ExternalIdentities', [1])]) + ]; + $action_args['vv_actions'][] = [ + 'order' => 3, + 'icon' => 'visibility', + 'url' => [ + 'controller' => 'ext-identity-source-records', + 'action' => 'view', + $vv_external_identity_record->id + ], + 'label' => __d('operation', 'view.a', [__d('controller', 'ExtIdentitySourceRecords', [1])]) + ]; + } + + print '
'; + print $this->element('menuAction', $action_args); + print '
'; + ?> + + + +
- +

+
+ + + + + + - - - + + + + + + + +
description; ?>description; ?>
+ +

+ + - - - + + + + + + - - - + + + + + - - - + + + \n"; - print "\n"; - print "\n"; - print "\n"; + print "\n"; + print "\n"; - print "\n"; - print "\n"; - print "\n"; + print "\n"; + print "\n"; + print "\n"; print "\n"; } } ?> + +
-
    - $value) { - if($field == 'type') continue; - - print "
  • " . $field . ": " . $value . "
    • \n"; - } - ?> -
-
+
    + $value) { + if($field == 'type') continue; + + print "
  • " . $field . ": " . $value . "
    • \n"; + } + ?> +
+
" . __d('controller', Inflector::camelize($model), 1) . "" . ($m['type'] ?? "") . "
    \n"; + print "
" . __d('controller', Inflector::camelize($model), 1) . "" . ($m['type'] ?? "") . "
    \n"; foreach($m as $field => $value) { if($field == 'type') continue; @@ -158,35 +192,45 @@ if(!empty($vv_eis_record['entity_data']['ad_hoc_attributes'])) { foreach($vv_eis_record['entity_data']['ad_hoc_attributes'] as $aha) { print "
" . __d('controller', 'AdHocAttributes', 1) . "" . $aha['tag'] . "" . $aha['value'] . "" . __d('controller', 'AdHocAttributes', 1) . "" . $aha['tag'] . "" . $aha['value'] . "
+ + +

+ + + + + + + + + \n"; - print "\n"; - print "\n"; print "\n"; - print "\n"; - print "\n"; - print "\n"; + print "\n"; + print "\n"; + print "\n"; print "\n"; foreach(array_keys($role) as $field) { if($field == 'role_key' || is_array($role[$field])) continue; print "\n"; - print "\n"; - print "\n"; - print "\n"; + print "\n"; + print "\n"; + print "\n"; print "\n"; } } @@ -202,9 +246,9 @@ if(!empty($role[$model])) { foreach($role[$model] as $m) { print "\n"; - print "\n"; - print "\n"; - print "\n"; + print "\n"; + print "\n"; - print "\n"; - print "\n"; - print "\n"; + print "\n"; + print "\n"; + print "\n"; print "\n"; } } ?> - - - - - - - -
" . __d('controller', 'ExternalIdentityRoles', 1) . "
" . __d('field', 'role_key') . "" . $role['role_key'] . "" . __d('field', 'role_key') . "" . $role['role_key'] . "
" . __d('field', $field) . "" . $role[$field] . "" . __d('field', $field) . "" . $role[$field] . "
" . __d('controller', Inflector::camelize($model), 1) . "" . ($m['type'] ?? "") . "
    \n"; + print "
" . __d('controller', Inflector::camelize($model), 1) . "" . ($m['type'] ?? "") . "
    \n"; foreach($m as $field => $value) { if($field == 'type') continue; @@ -221,31 +265,37 @@ if(!empty($role['ad_hoc_attributes'])) { foreach($role['ad_hoc_attributes'] as $aha) { print "
" . __d('controller', 'AdHocAttributes', 1) . "" . $aha['tag'] . "" . $aha['value'] . "" . __d('controller', 'AdHocAttributes', 1) . "" . $aha['tag'] . "" . $aha['value'] . "
-
- - 		- - - -
+ + + + + +

+
+ + + + + + + +
+
diff --git a/app/templates/ExternalIdentitySources/search.php b/app/templates/ExternalIdentitySources/search.php index 835f2a9e8..53f6c7eee 100644 --- a/app/templates/ExternalIdentitySources/search.php +++ b/app/templates/ExternalIdentitySources/search.php @@ -24,70 +24,88 @@ * @since COmanage Registry v5.0.0 * @license Apache License, Version 2.0 (http://www.apache.org/licenses/LICENSE-2.0) */ + + // Include the plugin subnavigation + $subnav = [ + 'name' => 'plugin', + 'active' => 'search' + ]; + + // Generate the subnavigation title and tabs + print $this->element('subnavigation', $subnav); ?>
-

+

- -
- Flash->render() ?> - - - - Alert->alert($b, 'warning') ?> - - - - - - Alert->alert($b, 'warning') ?> - - -
- - -
- info -
- + -
    -Form->create(null, [ - 'id' => 'eis-search-form', - 'type' => 'post' - ]); - - foreach($vv_search_attrs as $field => $label) { - $key = "search." . $field; - - print "
  • " . $this->Form->control($key, - [ - 'label' => $label - ]) - . "
    • \n"; - - } -?> -
  • -
    -
    -
    - Form->submit(__d('operation', 'search')); - print $this->Form->end(); - ?> -
    -
    • -
+ Form->create(null, [ + 'id' => 'eis-search-form', + 'type' => 'post' + ]); + ?> + + + $label): ?> + +
+ Form->label($key, $label, ['class' => 'visually-hidden']) ?> + Form->control($key, + [ + 'class' => 'form-control', + 'label' => false, + 'placeholder' => __d('information','ExternalIdentitySources.search.single.placeholder'), + 'onfocus' => 'this.select()' + ]) + ?> + Form->submit(__d('operation', 'search'), ['class' => 'btn-sm']); ?> +
+ + +
    + $label): ?> + +
  • +
    +
    +
    + Form->label($key, $label) ?> +
    +
    +
    + Form->control($key, ['label' => false]) ?> +
    +
    +
    • + +
  • +
    +
    +
    + Form->submit(__d('operation', 'search')); + ?> +
    +
    • +
+ + Form->end() ?> @@ -116,7 +134,7 @@ $r): ?> - + Html->link( $source_key, @@ -124,18 +142,15 @@ 'action' => 'retrieve', $this->request->getParam('pass')[0], '?' => ['source_key' => $source_key] + ], + [ + 'class' => 'row-link row-link-retrieve' ] ); ?> - - - - - + + + diff --git a/app/templates/element/menuPanel.php b/app/templates/element/menuPanel.php index 46088a350..d4065b255 100644 --- a/app/templates/element/menuPanel.php +++ b/app/templates/element/menuPanel.php @@ -248,6 +248,22 @@
    +
  • + Url->build( + ['plugin' => null, + 'controller' => 'ext_identity_source_records', + 'action' => 'index', + '?' => [ + 'co_id' => $vv_cur_co->id + ]] + ); + ?> + + + + +
  • Url->build( @@ -260,7 +276,7 @@ ); ?> - +
    • diff --git a/app/templates/element/menuTop.php b/app/templates/element/menuTop.php index 3f0e47863..d13095af4 100644 --- a/app/templates/element/menuTop.php +++ b/app/templates/element/menuTop.php @@ -68,55 +68,62 @@ class="dropdown-toggle top-menu-button"
    • -

      - - -

      -
      -
      - - -
      -
      - - -
      -
      - - -
      + +
      + + + + +
      +
      + + +
      +
      + + +
      +
      + + +
      +
      +
    • -

      - - -

      -
      -
      - - -
      -
      - - -
      -
      - - + +
      + + + + +
      +
      + + +
      +
      + + +
      +
      + + +
      • diff --git a/app/templates/element/subnavigation.php b/app/templates/element/subnavigation.php index 7f68593ab..5f4c05f9a 100644 --- a/app/templates/element/subnavigation.php +++ b/app/templates/element/subnavigation.php @@ -58,7 +58,7 @@ $navController = $vv_primary_link_model; } elseif(!empty($vv_primary_link_id)) { $curId = $vv_primary_link_id; - } + } // For top-level nav while in edit pages. if ($name == 'person') { @@ -66,6 +66,10 @@ } elseif ($name == 'group') { $linkFilter = ['group_id' => $curId]; } +} elseif(!empty($vv_bc_title_links)) { + // All else fails? Use the breadcrumb which has figured this out. + // XXX We might just be able to do this and skip all the above after breadcrumbs have been refactored + $curId = end($vv_bc_title_links[0]['target']); } if(!empty($vv_obj)) { @@ -89,6 +93,10 @@ $supertitle = $vv_obj->$vv_display_field; } elseif(!empty($vv_bc_parent_obj)) { $supertitle = $vv_bc_parent_obj->$vv_bc_parent_displayfield; +} elseif(!empty($vv_bc_title_links)) { + // All else fails? Use the breadcrumb which has figured this out. + // XXX We might just be able to do this and skip all the above after breadcrumbs have been refactored + $supertitle = $vv_bc_title_links[0]['label']; } ?> @@ -341,6 +349,19 @@ ); ?> + +
    • + Html->link( + __d('operation', 'ExternalIdentitySources.search'), + $navUrl, + ['class' => $linkClass] + ); + ?> +
      • +
    diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css index 87c8ac7d0..64f111e62 100644 --- a/app/webroot/css/co-base.css +++ b/app/webroot/css/co-base.css @@ -57,7 +57,7 @@ h2 { h3 { font-size: 1.4em; line-height: 1.4em; - margin: 0; + margin: 1em 0 0.5em; } a { color: var(--cmg-color-link); @@ -248,8 +248,8 @@ body.cos.select #top-bar { margin-right: 0.25em; vertical-align: middle; } -#top-menu .menu-grouping h4 .material-icons, -#top-menu .menu-grouping h4 .material-icons-outlined { +#top-menu .menu-grouping legend .material-icons, +#top-menu .menu-grouping legend .material-icons-outlined { font-size: 1.1rem; margin-right: 0.5rem; } @@ -257,7 +257,7 @@ body.cos.select #top-bar { padding: 1em; font-size: 0.9em; } -.menu-grouping h4 { +.menu-grouping legend { display: flex; align-items: center; font-size: 1rem; @@ -524,6 +524,9 @@ ul.form-list li.alert-banner .co-alert { -webkit-box-shadow: 5px 5px 8px 0px var(--cmg-color-bg-003); box-shadow: 5px 5px 8px 0px var(--cmg-color-bg-003); } +.menu-panel h3 { + margin: 0; +} #main-menu .menu-panel a { color: var(--cmg-color-link); } @@ -1398,6 +1401,9 @@ ul.form-list .field-suppliment { margin-top: 1px; vertical-align: top; } +.form-control { + font-size: 1em; /* bootstrap override */ +} /* DATE and TIME PICKERS */ .cm-datetime-picker { display: flex; @@ -1578,6 +1584,29 @@ ul.form-list .cm-time-picker-vals li { #comanage-iframe-wrapper .pageTitleContainer { margin: 1em 0; } +/* EIS SEARCH */ +#eis-search-form { + margin-bottom: 1em; +} +#eis-search-form .eis-single-search { + display: flex; + gap: 1em; + align-items: center; +} +.eis-single-search .input { + flex-grow: 1; +} +/* EIS Source Records */ +.eis-item { + width: 30%; +} +.eis-type { + width: 20%; + font-style: italic; +} +.eis-meta.eis-item { + width: 50%; +} /* GENERAL */ .hidden, .invisible, @@ -1671,9 +1700,11 @@ a.desc::after { .co-grid .co-row { border-top: 1px solid var(--cmg-color-bg-005); } -code, +code, .fixed-width * { font-family: "Courier New","Courier",monospace !important; + color: var(--cmg-color-body-txt); + font-size: 1em; } /* INDEX VIEWS and TABLES */ table { @@ -1689,6 +1720,7 @@ table { th, td { padding: 0.75em; text-align: left; + vertical-align: top; } th { background-color: var(--cmg-color-bg-003); @@ -1699,6 +1731,10 @@ thead td.actions { td { border-bottom: 1px solid var(--cmg-color-bg-005); } +td ul { + margin: 0; + padding: 0 0 0 1em; +} table.list-mode th.actions:first-child, table.list-mode td.actions:first-child { text-align: center; @@ -1741,6 +1777,13 @@ table.list-mode .read-only-link-container { color: var(--cmg-color-txt-soft); padding: 0 0.5em; } +table.table-striped tbody tr:nth-child(2n) td { + /* bootstrap override */ + background-color: var(--cmg-color-bg-001); +} +td .alert { + margin-bottom: 0; +} /* LOADING ANIMATION & SKELETONS */ @keyframes loading { 0% { opacity: 0.3; } diff --git a/app/webroot/css/co-responsive.css b/app/webroot/css/co-responsive.css index 496e9110c..58eeee290 100644 --- a/app/webroot/css/co-responsive.css +++ b/app/webroot/css/co-responsive.css @@ -404,6 +404,9 @@ .field-actions.top-links .actions-expanded a.dropdown-item:hover { background-color: transparent; } + #view-external-identity-source-record td:first-child { + white-space: nowrap; + } /* FOOTER */ #co-footer { position: static;