update: reset unfold when the expand/metadata are toggled

update: search by @id and _self query depends on deprecated value

update: refetch the ES type list depends on deprecated value

update: fix styling

Author: bilalesi

src/shared/components/ResourceEditor/index.tsx

@@ -68,6 +68,22 @@ const ResourceEditor: React.FunctionComponent<ResourceEditorProps> = props => {
       }
     }
   };
+  const onFormatChangeFold = (expanded: boolean) => {
+    if (codeMirorRef.current) {
+      codeMirorRef.current.execCommand('foldAll');
+      codeMirorRef.current.foldCode(0);
+      setFoldCodeMiror(() => false);
+    }
+    onFormatChange?.(expanded);
+  };
+  const onMetadataChangeFold = (checked: boolean) => {
+    if (codeMirorRef.current) {
+      codeMirorRef.current.execCommand('foldAll');
+      codeMirorRef.current.foldCode(0);
+      setFoldCodeMiror(() => false);
+    }
+    onMetadataChange?.(checked);
+  };
   const renderCodeMirror = (value: string) => {
     return (
       <Spin spinning={busy}>
@@ -103,6 +119,11 @@ const ResourceEditor: React.FunctionComponent<ResourceEditorProps> = props => {
     setEditing(false);
     setStringValue(JSON.stringify(rawData, null, 2)); // Update copy of the rawData for the editor.
     setParsedValue(rawData); // Update parsed value for submit.
+    // onFormatChange?.(false);
+    // onMetadataChange?.(false);
+    return () => {
+      setFoldCodeMiror(false);
+    };
   }, [rawData]); // only runs when Editor receives new resource to edit
 
   const handleChange = (editor: any, data: any, value: any) => {
@@ -163,7 +184,7 @@ const ResourceEditor: React.FunctionComponent<ResourceEditorProps> = props => {
               checkedChildren="Metadata"
               unCheckedChildren="Show Metadata"
               checked={showMetadata}
-              onChange={onMetadataChange}
+              onChange={checked => onMetadataChangeFold(checked)}
               style={switchMarginRight}
             />
           )}
@@ -172,7 +193,7 @@ const ResourceEditor: React.FunctionComponent<ResourceEditorProps> = props => {
               checkedChildren="Expanded"
               unCheckedChildren="Expand"
               checked={expanded}
-              onChange={onFormatChange}
+              onChange={expaned => onFormatChangeFold(expanded)}
               style={switchMarginRight}
             />
           )}

src/shared/components/ResourceList/index.tsx

@@ -22,15 +22,16 @@ import {
   SwitcherOutlined,
 } from '@ant-design/icons';
 import { ResourceList, Resource } from '@bbp/nexus-sdk';
+import { debounce } from 'lodash';
 
 import RenameableItem from '../Renameable';
 import ListItem from '../List/Item';
 import ResourceCardComponent from '../ResourceCard';
 import { getResourceLabel } from '../../utils';
 import TypesIconList from '../Types/TypesIcon';
 import useMeasure from '../../hooks/useMeasure';
+import { DEFAULT_LIST } from '../../../shared/containers/ResourceListBoardContainer';
 import Copy from '../Copy';
-import { debounce } from 'lodash';
 
 import './ResourceList.less';
 
@@ -244,7 +245,6 @@ const ResourceListComponent: React.FunctionComponent<{
   React.useLayoutEffect(() => {
     debounceHeightChange();
   }, [wrapperHeight]);
-
   return (
     <div className="resource-list-height-tester" ref={wrapperHeightRef}>
       <div className="resource-list">

src/shared/components/SchemaLink/index.tsx

@@ -5,7 +5,7 @@ const SchemaLink: React.FunctionComponent<{
   resource: Resource;
   goToSchema?(): void;
 }> = ({ resource: { _constrainedBy: constrainedBy }, goToSchema }) =>
-  constrainedBy.includes('unconstrained.json') ? (
+  constrainedBy?.includes('unconstrained.json') ? (
     <span>No schema defined for validation</span>
   ) : (
     <a

src/shared/containers/ResourceListContainer.tsx

@@ -140,13 +140,35 @@ const ResourceListContainer: React.FunctionComponent<{
               bool: {
                 should: [
                   {
-                    term: {
-                      '@id': list.query.q,
+                    bool: {
+                      must: [
+                        {
+                          term: {
+                            _deprecated: list.query.deprecated,
+                          },
+                        },
+                        {
+                          term: {
+                            '@id': list.query.q,
+                          },
+                        },
+                      ],
                     },
                   },
                   {
-                    term: {
-                      _self: list.query.q,
+                    bool: {
+                      must: [
+                        {
+                          term: {
+                            _deprecated: list.query.deprecated,
+                          },
+                        },
+                        {
+                          term: {
+                            _self: list.query.q,
+                          },
+                        },
+                      ],
                     },
                   },
                 ],
@@ -301,7 +323,7 @@ const ResourceListContainer: React.FunctionComponent<{
       shareableLink={shareableLink}
     >
       <TypeDropdownFilterContainer
-        deprecated={!!list.query.deprecated}
+        deprecated={Boolean(list.query.deprecated)}
         orgLabel={orgLabel}
         projectLabel={projectLabel}
         onChange={handleTypeChange}

src/shared/containers/TypeDropdownFilter.tsx

@@ -1,49 +1,69 @@
 import * as React from 'react';
-import { useNexus } from '@bbp/react-nexus';
-import {
-  DEFAULT_ELASTIC_SEARCH_VIEW_ID,
-  ElasticSearchViewQueryResponse,
-} from '@bbp/nexus-sdk';
+import { useNexusContext } from '@bbp/react-nexus';
+import { DEFAULT_ELASTIC_SEARCH_VIEW_ID, NexusClient } from '@bbp/nexus-sdk';
 
 import DropdownFilter from '../components/DropdownFilter';
 import { TypeDropdownItem } from '../components/DropdownFilter/DropdownItem';
+import { useQuery } from 'react-query';
 
 // must be explicitly set for elasticSearch, default is 10
 const RESULTS_SIZE = 10000;
 
-const TypeDropdownFilterContainer: React.FunctionComponent<{
+const fetchESVTypes = ({
+  nexus,
+  orgLabel,
+  projectLabel,
+  deprecated,
+}: {
+  nexus: NexusClient;
   orgLabel: string;
   projectLabel: string;
   deprecated: boolean;
-  value?: string;
-  onChange(value: string): void;
-}> = ({ orgLabel, projectLabel, onChange, deprecated, value }) => {
-  const { loading: busy, data, error } = useNexus<
-    ElasticSearchViewQueryResponse<any>
-  >(nexus =>
-    nexus.View.elasticSearchQuery(
-      orgLabel,
-      projectLabel,
-      encodeURIComponent(DEFAULT_ELASTIC_SEARCH_VIEW_ID),
-      {
-        aggregations: {
-          types: {
-            filter: {
-              term: { _deprecated: deprecated },
-            },
-            aggregations: {
-              filteredByDeprecation: {
-                terms: {
-                  field: '@type',
-                  size: RESULTS_SIZE,
-                },
+}) =>
+  nexus.View.elasticSearchQuery(
+    orgLabel,
+    projectLabel,
+    encodeURIComponent(DEFAULT_ELASTIC_SEARCH_VIEW_ID),
+    {
+      aggregations: {
+        types: {
+          filter: {
+            term: { _deprecated: deprecated },
+          },
+          aggregations: {
+            filteredByDeprecation: {
+              terms: {
+                field: '@type',
+                size: RESULTS_SIZE,
               },
             },
           },
         },
-      }
-    )
+      },
+    }
   );
+const TypeDropdownFilterContainer: React.FunctionComponent<{
+  orgLabel: string;
+  projectLabel: string;
+  deprecated: boolean;
+  value?: string;
+  onChange(value: string): void;
+}> = ({ orgLabel, projectLabel, onChange, deprecated, value }) => {
+  const nexus = useNexusContext();
+
+  const { data } = useQuery({
+    queryKey: [
+      'resource-list-query-types',
+      {
+        deprecated,
+        orgLabel,
+        projectLabel,
+        desv_id: DEFAULT_ELASTIC_SEARCH_VIEW_ID,
+      },
+    ],
+    queryFn: () => fetchESVTypes({ nexus, orgLabel, projectLabel, deprecated }),
+    refetchOnWindowFocus: true,
+  });
 
   return (
     <DropdownFilter

src/shared/utils/index.ts

@@ -258,16 +258,19 @@ export function getDestinationParam(): string {
  */
 export function getUsername(user: string): string {
   let userName;
-  if (user.length === 0) {
-    userName = 'Unknown';
-  } else {
-    try {
-      [userName] = user.split('/').slice(-1);
-    } catch (e) {
-      userName = user;
+  if (user) {
+    if (user.length === 0) {
+      userName = 'Unknown';
+    } else {
+      try {
+        [userName] = user.split('/').slice(-1);
+      } catch (e) {
+        userName = user;
+      }
     }
+    return userName;
   }
-  return userName;
+  return '';
 }
 
 export function blacklistKeys(raw: { [key: string]: any }, keys: string[]) {