From 91fbc4f86f1ad1f3e04e3f176be618d53744953f Mon Sep 17 00:00:00 2001
From: Akhil Kala <akhilkala@pop-os.localdomain>
Date: Tue, 21 Sep 2021 09:09:13 +0530
Subject: [PATCH 1/6] Header customisation added

---
 src/components/collections/CollectionHome.jsx | 101 +++++++++++++++++
 .../collections/CollectionHomeHeader.jsx      |  45 +++-----
 .../common/CollapsibleAttributes.jsx          |  32 ++----
 src/components/common/JSONEditor.jsx          |   3 +-
 src/components/orgs/OrgHome.jsx               |  21 +++-
 src/components/orgs/OrgHomeHeader.jsx         |  12 +-
 src/components/sources/SourceHome.jsx         | 106 ++++++++++++++++++
 src/components/sources/SourceHomeHeader.jsx   |  45 +++-----
 8 files changed, 269 insertions(+), 96 deletions(-)

diff --git a/src/components/collections/CollectionHome.jsx b/src/components/collections/CollectionHome.jsx
index 1c71eb81..b019f5c4 100644
--- a/src/components/collections/CollectionHome.jsx
+++ b/src/components/collections/CollectionHome.jsx
@@ -14,6 +14,107 @@ const DEFAULT_CONFIG = {
   web_default: true,
   is_default: false,
   config: {
+    header:{
+      shrink: false,
+      visibleAttributes: [
+        {
+          label: "Short Code",
+          value: "short_code",
+          type: "text"
+        },
+        {
+          label: "Name",
+          value: "name",
+          type: "text"
+        },
+        {
+          label: "Collection Type",
+          value: "collection_type",
+          type: "text"
+        },
+        {
+          label: "Custom Validation Schema",
+          value: "custom_validation_schema",
+          type: "text"
+        },
+        {
+          label: "Supported Locales",
+          value: "supported_locales",
+        }
+      ],
+      invisibleAttributes: [
+        {
+          label: "Canonical Url",
+          value: "canonical_url",
+          type: "url"
+        },
+        {
+          label: "Publisher",
+          value: "publisher",
+          type: "text"
+        },
+        {
+          label: "Purpose",
+          value: "purpose",
+          type: "text"
+        },
+        {
+          label: "Copyright",
+          value: "copyright",
+          type: "text"
+        },
+        {
+          label: "Preferred Source",
+          value: "preferred_source",
+          type: "text"
+        },
+        {
+          label: "Custom Resources Linked Source",
+          value: "custom_resources_linked_source",
+          type: "text"
+        },
+        {
+          label: "Revision Date",
+          value: "revision_date",
+          type: "date"
+        },
+        {
+          label: "Identifier",
+          value: "identifier",
+          type: "json"
+        },
+        {
+          label: "Contact",
+          value: "contact",
+          type: "json"
+        },
+        {
+          label: "Jurisdiction",
+          value: "jurisdiction",
+          type: "json"
+        },
+        {
+          label: "Meta",
+          value: "meta",
+          type: "json"
+        },
+        {
+          label: "Immutable",
+          value: "immutable",
+          type: "boolean"
+        },
+        {
+          label: "Locked Date",
+          value: "locked_date",
+          type: "date"
+        },
+        {
+          label: "Experimental",
+          value: "experimental",
+          type: "boolean"
+        },
+      ]
+    },
     tabs: [
       {type: "concepts", label: "Concepts", page_size: 25, "default": true, layout: 'table'},
       {type: "mappings", label: "Mappings", page_size: 25, layout: 'table'},
diff --git a/src/components/collections/CollectionHomeHeader.jsx b/src/components/collections/CollectionHomeHeader.jsx
index 170618da..e57301f6 100644
--- a/src/components/collections/CollectionHomeHeader.jsx
+++ b/src/components/collections/CollectionHomeHeader.jsx
@@ -32,33 +32,17 @@ import ProcessingChip from '../common/ProcessingChip';
 import ConceptContainerDelete from '../common/ConceptContainerDelete';
 import CollapsibleDivider from '../common/CollapsibleDivider';
 
-const HIDDEN_ATTRIBUTES = {
-  canonical_url: 'url',
-  publisher: 'text',
-  purpose: 'text',
-  copyright: 'text',
-  preferred_source: 'text',
-  custom_resources_linked_source: 'text',
-  revision_date: 'date',
-  identifier: 'json',
-  contact: 'json',
-  jurisdiction: 'json',
-  meta: 'json',
-  immutable: 'boolean',
-  locked_date: 'date',
-  experimental: 'boolean'
-}
 const CollectionHomeHeader = ({
   collection, isVersionedObject, versionedObjectURL, currentURL, config
 }) => {
   const downloadFileName = isVersionedObject ? `${collection.type}-${collection.short_code}` : `${collection.type}-${collection.short_code}-${collection.id}`;
   const hasAccess = currentUserHasAccess();
-  const [openHeader, setOpenHeader] = React.useState(!get(config, 'config.shrinkHeader', false));
+  const [openHeader, setOpenHeader] = React.useState(!get(config, 'config.header.shrink', false));
   const [deleteDialog, setDeleteDialog] = React.useState(false);
   const [logoURL, setLogoURL] = React.useState(collection.logo_url)
   const [collectionForm, setCollectionForm] = React.useState(false);
   const onIconClick = () => copyURL(toFullAPIURL(currentURL))
-  const hasManyHiddenAttributes = nonEmptyCount(collection, keys(HIDDEN_ATTRIBUTES)) >= 4;
+  const hasManyHiddenAttributes = nonEmptyCount(collection, map(get(config, 'config.header.invisibleAttributes'),(attr) => attr.value)) >= 4;
   const onLogoUpload = (base64, name) => {
     APIService.new().overrideURL(versionedObjectURL).appendToUrl('logo/')
               .post({base64: base64, name: name})
@@ -69,8 +53,8 @@ const CollectionHomeHeader = ({
   }
 
   React.useEffect(
-    () => setOpenHeader(!get(config, 'config.shrinkHeader', false)),
-    [get(config, 'config.shrinkHeader')]
+    () => setOpenHeader(!get(config, 'config.header.shrink', false)),
+    [get(config, 'config.header.shrink')]
   )
 
   const deleteCollection = () => {
@@ -163,28 +147,25 @@ const CollectionHomeHeader = ({
                 {collection.description}
               </div>
             }
-            <HeaderAttribute label="Short Code" value={collection.short_code} gridClass="col-md-12" />
-            <HeaderAttribute label="Name" value={collection.name} gridClass="col-md-12" />
-            <HeaderAttribute label="Collection Type" value={collection.collection_type} gridClass="col-md-12" />
-            <HeaderAttribute label="Supported Locales" value={<SupportedLocales {...collection} />} gridClass="col-md-12" type="component" />
-            <HeaderAttribute label="Custom Validation Schema" value={collection.custom_validation_schema} gridClass="col-md-12" />
+            {map(get(config, 'config.header.visibleAttributes'), (attr) => {
+              if (attr.value === "supported_locales" || attr.value === "default_locale"){
+                return <HeaderAttribute key={attr.label} label="Supported Locales" value={<SupportedLocales {...collection} />} gridClass="col-md-12" type="component" />
+              }
+              return <HeaderAttribute key={attr.label} label={attr.label} value={collection[attr.value]} type={attr.type} gridClass="col-md-12"/>
+            })}
             <HeaderAttribute label="Custom Attributes" value={<CustomAttributesPopup attributes={collection.extras} />} gridClass="col-md-12" />
             {
               hasManyHiddenAttributes ?
               <div className='col-md-12 no-side-padding'>
                 <CollapsibleAttributes
+                  hiddenAttributes={get(config, 'config.header.invisibleAttributes')}
                   object={collection}
-                  urlAttrs={['canonical_url']}
-                  textAttrs={['publisher', 'purpose', 'copyright', 'preferred_source', 'custom_resources_linked_source']}
-                  dateAttrs={['revision_date', 'locked_date']}
-                  jsonAttrs={['identifier', 'contact', 'jurisdiction']}
-                  booleanAttrs={['immutable', 'experimental']}
                 />
               </div> :
               <React.Fragment>
                 {
-                  map(HIDDEN_ATTRIBUTES, (type, attr) => (
-                    <HeaderAttribute key={attr} label={`${startCase(attr)}`} value={get(collection, attr)} gridClass="col-md-12" type={type} />
+                  map(get(config, 'config.header.invisibleAttributes'), (attr) => (
+                    <HeaderAttribute key={attr.label} label={attr.label} value={get(collection, attr.value)} gridClass="col-md-12" type={attr.type} />
                   ))
                 }
               </React.Fragment>
diff --git a/src/components/common/CollapsibleAttributes.jsx b/src/components/common/CollapsibleAttributes.jsx
index 705b0f4a..aa45d045 100644
--- a/src/components/common/CollapsibleAttributes.jsx
+++ b/src/components/common/CollapsibleAttributes.jsx
@@ -3,11 +3,11 @@ import {
   ArrowDropDown as ArrowDownIcon, ArrowDropUp as ArrowUpIcon
 } from '@material-ui/icons';
 import { Collapse, Chip } from '@material-ui/core';
-import { map, get, startCase, isArray } from 'lodash';
+import { map, get } from 'lodash';
 import HeaderAttribute from './HeaderAttribute';
 
 const CollapsibleAttributes = ({
-  object, urlAttrs, jsonAttrs, textAttrs, dateAttrs, booleanAttrs
+  object, hiddenAttributes
 }) => {
   const [expand, setExpand] = React.useState(false);
   const onExpand = () => setExpand(!expand);
@@ -16,29 +16,11 @@ const CollapsibleAttributes = ({
     <React.Fragment>
       <Collapse in={expand} className="col-md-8" style={{padding: '0px', display: `${expand ? 'block' : 'none'}`}}>
         {
-          isArray(urlAttrs) && map(urlAttrs, attr => (
-            <HeaderAttribute key={attr} label={`${startCase(attr)}`} value={get(object, attr)} gridClass='col-md-10' type='url' />
-          ))
-        }
-        {
-          isArray(textAttrs) && map(textAttrs, attr => (
-            <HeaderAttribute key={attr} label={`${startCase(attr)}`} value={get(object, attr)} gridClass='col-md-10' />
-          ))
-        }
-        {
-          isArray(booleanAttrs) && map(booleanAttrs, attr => (
-            <HeaderAttribute key={attr} label={`${startCase(attr)}`} value={get(object, attr)} gridClass='col-md-10' type='boolean' />
-          ))
-        }
-        {
-          isArray(dateAttrs) && map(dateAttrs, attr => (
-            <HeaderAttribute key={attr} label={`${startCase(attr)}`} value={get(object, attr)} gridClass='col-md-10' type='date' />
-          ))
-        }
-        {
-          isArray(jsonAttrs) && map(jsonAttrs, attr => (
-            <HeaderAttribute key={attr} label={`${startCase(attr)}`} value={get(object, attr)} gridClass='col-md-10' type='json' />
-          ))
+          map(hiddenAttributes, (attr) => {
+            const value = get(object, attr.value)
+            if (!value) return null
+            return <HeaderAttribute key={attr.label} label={attr.label} value={value} gridClass='col-md-10' type={attr.type} />
+          })
         }
       </Collapse>
       <div className='col-md-12 no-side-padding' style={{marginLeft: '-8px', marginTop: '2px'}}>
diff --git a/src/components/common/JSONEditor.jsx b/src/components/common/JSONEditor.jsx
index 9b2fdb78..ee71dff5 100644
--- a/src/components/common/JSONEditor.jsx
+++ b/src/components/common/JSONEditor.jsx
@@ -3,8 +3,9 @@ import JSONInput from 'react-json-editor-ajrm';
 import locale    from 'react-json-editor-ajrm/locale/en';
 
 const JSONEditor = props => {
+
   return (
-    <JSONInput locale={ locale } height='auto' width='100%' {...props} />
+    <JSONInput waitAfterKeyPress={2500} locale={locale} height='auto' width='100%' {...props} />
   )
 }
 
diff --git a/src/components/orgs/OrgHome.jsx b/src/components/orgs/OrgHome.jsx
index 1ab3b240..bf05add7 100644
--- a/src/components/orgs/OrgHome.jsx
+++ b/src/components/orgs/OrgHome.jsx
@@ -16,7 +16,26 @@ const DEFAULT_CONFIG = {
   web_default: true,
   is_default: false,
   config: {
-    shrinkHeader: false,
+    header: {
+      shrink: false,
+      attributes: [
+        {
+          label: "Company",
+          value: "company",
+          type:"text"
+        },
+        {
+          label: "Location",
+          value: "location",
+          type:"text"
+        },
+        {
+          label: "Website",
+          value: "website",
+          type:"url"
+        },
+      ]
+    },
     tabs: [
       {type: "sources", label: "Sources", page_size: 25, "default": true, layout: 'table'},
       {type: "collections", label: "Collections", page_size: 25, layout: 'table'},
diff --git a/src/components/orgs/OrgHomeHeader.jsx b/src/components/orgs/OrgHomeHeader.jsx
index 3a4c52f6..3de30c5e 100644
--- a/src/components/orgs/OrgHomeHeader.jsx
+++ b/src/components/orgs/OrgHomeHeader.jsx
@@ -5,7 +5,7 @@ import {
   Edit as EditIcon,
 } from '@material-ui/icons';
 import { Tooltip, ButtonGroup, Button, Collapse } from '@material-ui/core';
-import { isEmpty, get } from 'lodash';
+import { isEmpty, get, map } from 'lodash';
 import { toFullAPIURL, copyURL, currentUserHasAccess } from '../../common/utils';
 import APIService from '../../services/APIService';
 import OwnerButton from '../common/OwnerButton';
@@ -24,15 +24,15 @@ import OrgForm from './OrgForm';
 
 const OrgHomeHeader = ({ org, url, fhir, extraComponents, config }) => {
   const downloadFileName = `Org-${get(org, 'id')}`;
-  const [openHeader, setOpenHeader] = React.useState(!get(config, 'config.shrinkHeader', false));
+  const [openHeader, setOpenHeader] = React.useState(!get(config, 'config.header.shrink', false));
   const [logoURL, setLogoURL] = React.useState(org.logo_url)
   const [orgForm, setOrgForm] = React.useState(false);
   const hasAccess = currentUserHasAccess();
   const onIconClick = () => copyURL(toFullAPIURL(url));
 
   React.useEffect(
-    () => setOpenHeader(!get(config, 'config.shrinkHeader', false)),
-    [get(config, 'config.shrinkHeader')]
+    () => setOpenHeader(!get(config, 'config.header.shrink', false)),
+    [get(config, 'config.header.shrink')]
   )
 
   const onLogoUpload = (base64, name) => {
@@ -96,7 +96,9 @@ const OrgHomeHeader = ({ org, url, fhir, extraComponents, config }) => {
                 {org.description}
               </div>
             }
-            <HeaderAttribute label="Company" value={org.company} gridClass="col-md-12" />
+            {map(get(config, 'config.header.attributes'), (attr) => {
+                return <HeaderAttribute key={attr.label} label={attr.label} value={org[attr.value]} type={attr.type} gridClass="col-md-12" />
+            })}
             <HeaderAttribute label="Custom Attributes" value={!isEmpty(org.extras) && <CustomAttributesPopup attributes={org.extras} />} gridClass="col-md-12" />
             <div className='col-md-12 no-side-padding flex-vertical-center' style={{paddingTop: '10px'}}>
               {
diff --git a/src/components/sources/SourceHome.jsx b/src/components/sources/SourceHome.jsx
index 5b5252f4..bc7627cf 100644
--- a/src/components/sources/SourceHome.jsx
+++ b/src/components/sources/SourceHome.jsx
@@ -20,6 +20,112 @@ const DEFAULT_CONFIG = {
   web_default: true,
   is_default: false,
   config: {
+    header: {
+      shrink: false,
+      visibleAttributes: [
+        {
+          label: "Source Type",
+          value: "source_type",
+          type: "text"
+        },
+        {
+          label: "Supported Locales",
+          value: "supported_locales",
+        },
+        {
+          label: "Custom Validation Schema",
+          value: "custom_validation_schema",
+          type: "text"
+        },
+      ],
+      invisibleAttributes: [
+        {
+          label: "Canonical Url",
+          value: "canonical_url",
+          type: "url"
+        },
+        {
+          label: "Publisher",
+          value: "publisher",
+          type: "text"
+        },
+        {
+          label: "Purpose",
+          value: "purpose",
+          type: "text"
+        },
+        {
+          label: "Copyright",
+          value: "copyright",
+          type: "text"
+        },
+        {
+          label: "Content Type",
+          value: "content_type",
+          type: "text"
+        },
+        {
+          label: "Revision Date",
+          value: "revision_date",
+          type: "date"
+        },
+        {
+          label: "Revision Date",
+          value: "revision_date",
+          type: "date"
+        },
+        {
+          label: "Identifier",
+          value: "identifier",
+          type: "json"
+        },
+        {
+          label: "Contact",
+          value: "contact",
+          type: "json"
+        },
+        {
+          label: "Jurisdiction",
+          value: "jurisdiction",
+          type: "json"
+        },
+        {
+          label: "Meta",
+          value: "meta",
+          type: "json"
+        },
+        {
+          label: "Collection Reference",
+          value: "collection_reference",
+          type: "text"
+        },
+        {
+          label: "Hierarchy Meaning",
+          value: "hierarchy_meaning",
+          type: "text"
+        },
+        {
+          label: "Experimental",
+          value: "experimental",
+          type: "boolean"
+        },
+        {
+          label: "Case Sensitive",
+          value: "case_sensitive",
+          type: "boolean"
+        },
+        {
+          label: "Compositional",
+          value: "compositional",
+          type: "boolean"
+        },
+        {
+          label: "Version Needed",
+          value: "version_needed",
+          type: "boolean"
+        },
+      ]
+    },
     tabs: [
       {type: "concepts", label: "Concepts", page_size: 25, "default": true, layout: 'table'},
       {type: "mappings", label: "Mappings", page_size: 25, layout: 'table'},
diff --git a/src/components/sources/SourceHomeHeader.jsx b/src/components/sources/SourceHomeHeader.jsx
index 1e537d5d..711a2c23 100644
--- a/src/components/sources/SourceHomeHeader.jsx
+++ b/src/components/sources/SourceHomeHeader.jsx
@@ -32,35 +32,17 @@ import ProcessingChip from '../common/ProcessingChip';
 import ConceptContainerDelete from '../common/ConceptContainerDelete';
 import CollapsibleDivider from '../common/CollapsibleDivider';
 
-const HIDDEN_ATTRIBUTES = {
-  canonical_url: 'url',
-  publisher: 'text',
-  purpose: 'text',
-  copyright: 'text',
-  content_type: 'text',
-  revision_date: 'date',
-  identifier: 'json',
-  contact: 'json',
-  jurisdiction: 'json',
-  meta: 'json',
-  collection_reference: 'text',
-  hierarchy_meaning: 'text',
-  experimental: 'boolean',
-  case_sensitive: 'boolean',
-  compositional: 'boolean',
-  version_needed: 'boolean',
-}
 const SourceHomeHeader = ({
   source, isVersionedObject, versionedObjectURL, currentURL, config, splitView
 }) => {
   const downloadFileName = isVersionedObject ? `${source.type}-${source.short_code}` : `${source.type}-${source.short_code}-${source.id}`;
   const hasAccess = currentUserHasAccess();
-  const [openHeader, setOpenHeader] = React.useState(!get(config, 'config.shrinkHeader', false));
+  const [openHeader, setOpenHeader] = React.useState(!get(config, 'config.header.shrink', false));
   const [deleteDialog, setDeleteDialog] = React.useState(false);
   const [logoURL, setLogoURL] = React.useState(source.logo_url)
   const [sourceForm, setSourceForm] = React.useState(false);
   const onIconClick = () => copyURL(toFullAPIURL(currentURL))
-  const hasManyHiddenAttributes = nonEmptyCount(source, keys(HIDDEN_ATTRIBUTES)) >= 4;
+  const hasManyHiddenAttributes = nonEmptyCount(source, map(get(config, 'config.header.invisibleAttributes'),(attr) => attr.value)) >= 4;
   const onLogoUpload = (base64, name) => {
     APIService.new().overrideURL(versionedObjectURL).appendToUrl('logo/')
               .post({base64: base64, name: name})
@@ -71,8 +53,8 @@ const SourceHomeHeader = ({
   }
 
   React.useEffect(
-    () => setOpenHeader(!get(config, 'config.shrinkHeader', false)),
-    [get(config, 'config.shrinkHeader')]
+    () => setOpenHeader(!get(config, 'config.header.shrink', false)),
+    [get(config, 'config.header.shrink')]
   )
 
   React.useEffect(() => {
@@ -170,26 +152,25 @@ const SourceHomeHeader = ({
                 {source.description}
               </div>
             }
-            <HeaderAttribute label="Source Type" value={source.source_type} gridClass="col-md-12" />
-            <HeaderAttribute label="Supported Locales" value={<SupportedLocales {...source} />} gridClass="col-md-12" type="component" />
-            <HeaderAttribute label="Custom Validation Schema" value={source.custom_validation_schema} gridClass="col-md-12" />
+            {map(get(config, 'config.header.visibleAttributes'), (attr) => {
+              if (attr.value === "supported_locales" || attr.value === "default_locale"){
+                return <HeaderAttribute key={attr.label} label="Supported Locales" value={<SupportedLocales {...source} />} gridClass="col-md-12" type="component" />
+              }
+              return <HeaderAttribute key={attr.label} label={attr.label} value={source[attr.value]} type={attr.type} gridClass="col-md-12"/>
+            })}
             <HeaderAttribute label="Custom Attributes" value={!isEmpty(source.extras) && <CustomAttributesPopup attributes={source.extras} />} gridClass="col-md-12" />
             {
               hasManyHiddenAttributes ?
               <div className='col-md-12 no-side-padding'>
                 <CollapsibleAttributes
                   object={source}
-                  urlAttrs={['canonical_url']}
-                  textAttrs={['publisher', 'purpose', 'copyright', 'content_type', 'collection_reference', 'hierarchy_meaning']}
-                  dateAttrs={['revision_date']}
-                  jsonAttrs={['identifier', 'contact', 'jurisdiction']}
-                  booleanAttrs={['experimental', 'case_sensitive', 'compositional', 'version_needed']}
+                  hiddenAttributes={get(config, 'config.header.invisibleAttributes')}
                 />
               </div> :
               <React.Fragment>
                 {
-                  map(HIDDEN_ATTRIBUTES, (type, attr) => (
-                    <HeaderAttribute key={attr} label={`${startCase(attr)}`} value={get(source, attr)} gridClass="col-md-12" type={type} />
+                  map(get(config, 'config.header.invisibleAttributes'), (attr) => (
+                    <HeaderAttribute key={attr.label} label={attr.label} value={get(source, attr.value)} gridClass="col-md-12" type={attr.type} />
                   ))
                 }
               </React.Fragment>

From 3e39af1947e683374222b1da47a310b9c977d35f Mon Sep 17 00:00:00 2001
From: Akhil Kala <akhilkala@pop-os.localdomain>
Date: Tue, 21 Sep 2021 10:34:12 +0530
Subject: [PATCH 2/6] Updated default options behaviour

---
 .../collections/CollectionHomeHeader.jsx      | 45 +++++++++++++++++--
 .../common/CollapsibleAttributes.jsx          |  5 +++
 src/components/sources/SourceHomeHeader.jsx   | 35 +++++++++++++--
 3 files changed, 77 insertions(+), 8 deletions(-)

diff --git a/src/components/collections/CollectionHomeHeader.jsx b/src/components/collections/CollectionHomeHeader.jsx
index e57301f6..d58e44f4 100644
--- a/src/components/collections/CollectionHomeHeader.jsx
+++ b/src/components/collections/CollectionHomeHeader.jsx
@@ -7,7 +7,7 @@ import {
   Delete as DeleteIcon,
 } from '@material-ui/icons';
 import { Tooltip, Button, ButtonGroup, Collapse } from '@material-ui/core';
-import { keys, map, startCase, get } from 'lodash';
+import { filter, map, get } from 'lodash';
 import { toFullAPIURL, copyURL, nonEmptyCount, currentUserHasAccess } from '../../common/utils';
 import { GREEN } from '../../common/constants';
 import APIService from '../../services/APIService';
@@ -32,6 +32,33 @@ import ProcessingChip from '../common/ProcessingChip';
 import ConceptContainerDelete from '../common/ConceptContainerDelete';
 import CollapsibleDivider from '../common/CollapsibleDivider';
 
+const DEFAULT_VISIBLE_ATTRIBUTES = [
+  {
+    label: "Short Code",
+    value: "short_code",
+    type: "text"
+  },
+  {
+    label: "Name",
+    value: "name",
+    type: "text"
+  },
+  {
+    label: "Collection Type",
+    value: "collection_type",
+    type: "text"
+  },
+  {
+    label: "Custom Validation Schema",
+    value: "custom_validation_schema",
+    type: "text"
+  },
+  {
+    label: "Supported Locales",
+    value: "supported_locales",
+  }
+]
+
 const CollectionHomeHeader = ({
   collection, isVersionedObject, versionedObjectURL, currentURL, config
 }) => {
@@ -42,7 +69,6 @@ const CollectionHomeHeader = ({
   const [logoURL, setLogoURL] = React.useState(collection.logo_url)
   const [collectionForm, setCollectionForm] = React.useState(false);
   const onIconClick = () => copyURL(toFullAPIURL(currentURL))
-  const hasManyHiddenAttributes = nonEmptyCount(collection, map(get(config, 'config.header.invisibleAttributes'),(attr) => attr.value)) >= 4;
   const onLogoUpload = (base64, name) => {
     APIService.new().overrideURL(versionedObjectURL).appendToUrl('logo/')
               .post({base64: base64, name: name})
@@ -51,6 +77,17 @@ const CollectionHomeHeader = ({
                   setLogoURL(get(response, 'data.logo_url', logoURL))
               })
   }
+  const getDefaultHiddenAttributes = () => {
+    return filter(DEFAULT_VISIBLE_ATTRIBUTES, (attr) => {
+      return !map(get(config, 'config.header.visibleAttributes'),(attr) => attr.value).includes(attr.value)
+    }
+    )
+  }
+  const getHiddenAttributes = () => {
+    return {...get(config, 'config.header.invisibleAttributes'), ...getDefaultHiddenAttributes()}
+  }
+  const hasManyHiddenAttributes = nonEmptyCount(collection, map(getHiddenAttributes(),(attr) => attr.value)) >= 4;
+
 
   React.useEffect(
     () => setOpenHeader(!get(config, 'config.header.shrink', false)),
@@ -158,13 +195,13 @@ const CollectionHomeHeader = ({
               hasManyHiddenAttributes ?
               <div className='col-md-12 no-side-padding'>
                 <CollapsibleAttributes
-                  hiddenAttributes={get(config, 'config.header.invisibleAttributes')}
+                  hiddenAttributes={getHiddenAttributes()}
                   object={collection}
                 />
               </div> :
               <React.Fragment>
                 {
-                  map(get(config, 'config.header.invisibleAttributes'), (attr) => (
+                  map(getHiddenAttributes(), (attr) => (
                     <HeaderAttribute key={attr.label} label={attr.label} value={get(collection, attr.value)} gridClass="col-md-12" type={attr.type} />
                   ))
                 }
diff --git a/src/components/common/CollapsibleAttributes.jsx b/src/components/common/CollapsibleAttributes.jsx
index aa45d045..50e7fbcf 100644
--- a/src/components/common/CollapsibleAttributes.jsx
+++ b/src/components/common/CollapsibleAttributes.jsx
@@ -5,6 +5,7 @@ import {
 import { Collapse, Chip } from '@material-ui/core';
 import { map, get } from 'lodash';
 import HeaderAttribute from './HeaderAttribute';
+import SupportedLocales from '../common/SupportedLocales';
 
 const CollapsibleAttributes = ({
   object, hiddenAttributes
@@ -19,6 +20,10 @@ const CollapsibleAttributes = ({
           map(hiddenAttributes, (attr) => {
             const value = get(object, attr.value)
             if (!value) return null
+            
+            if (attr.value === "supported_locales" || attr.value === "default_locale"){
+              return <HeaderAttribute key={attr.label} label="Supported Locales" value={<SupportedLocales {...object} />} gridClass="col-md-12" type="component" />
+            }
             return <HeaderAttribute key={attr.label} label={attr.label} value={value} gridClass='col-md-10' type={attr.type} />
           })
         }
diff --git a/src/components/sources/SourceHomeHeader.jsx b/src/components/sources/SourceHomeHeader.jsx
index 711a2c23..963e26af 100644
--- a/src/components/sources/SourceHomeHeader.jsx
+++ b/src/components/sources/SourceHomeHeader.jsx
@@ -7,7 +7,7 @@ import {
   Delete as DeleteIcon,
 } from '@material-ui/icons';
 import { Tooltip, ButtonGroup, Button, Collapse } from '@material-ui/core';
-import { isEmpty, keys, map, startCase, get } from 'lodash';
+import { isEmpty, map, filter, get } from 'lodash';
 import { toFullAPIURL, copyURL, nonEmptyCount, currentUserHasAccess } from '../../common/utils';
 import { GREEN } from '../../common/constants';
 import APIService from '../../services/APIService';
@@ -32,6 +32,23 @@ import ProcessingChip from '../common/ProcessingChip';
 import ConceptContainerDelete from '../common/ConceptContainerDelete';
 import CollapsibleDivider from '../common/CollapsibleDivider';
 
+const DEFAULT_VISIBLE_ATTRIBUTES = [
+  {
+    label: "Source Type",
+    value: "source_type",
+    type: "text"
+  },
+  {
+    label: "Supported Locales",
+    value: "supported_locales",
+  },
+  {
+    label: "Custom Validation Schema",
+    value: "custom_validation_schema",
+    type: "text"
+  },
+]
+
 const SourceHomeHeader = ({
   source, isVersionedObject, versionedObjectURL, currentURL, config, splitView
 }) => {
@@ -42,7 +59,6 @@ const SourceHomeHeader = ({
   const [logoURL, setLogoURL] = React.useState(source.logo_url)
   const [sourceForm, setSourceForm] = React.useState(false);
   const onIconClick = () => copyURL(toFullAPIURL(currentURL))
-  const hasManyHiddenAttributes = nonEmptyCount(source, map(get(config, 'config.header.invisibleAttributes'),(attr) => attr.value)) >= 4;
   const onLogoUpload = (base64, name) => {
     APIService.new().overrideURL(versionedObjectURL).appendToUrl('logo/')
               .post({base64: base64, name: name})
@@ -51,6 +67,17 @@ const SourceHomeHeader = ({
                   setLogoURL(get(response, 'data.logo_url', logoURL))
               })
   }
+  const getDefaultHiddenAttributes = () => {
+    return filter(DEFAULT_VISIBLE_ATTRIBUTES, (attr) => {
+      return !map(get(config, 'config.header.visibleAttributes'),(attr) => attr.value).includes(attr.value)
+    }
+    )
+  }
+  const getHiddenAttributes = () => {
+    return {...get(config, 'config.header.invisibleAttributes'), ...getDefaultHiddenAttributes()}
+  }
+  const hasManyHiddenAttributes = nonEmptyCount(source, map(getHiddenAttributes(),(attr) => attr.value)) >= 4;
+
 
   React.useEffect(
     () => setOpenHeader(!get(config, 'config.header.shrink', false)),
@@ -164,12 +191,12 @@ const SourceHomeHeader = ({
               <div className='col-md-12 no-side-padding'>
                 <CollapsibleAttributes
                   object={source}
-                  hiddenAttributes={get(config, 'config.header.invisibleAttributes')}
+                  hiddenAttributes={getHiddenAttributes()}
                 />
               </div> :
               <React.Fragment>
                 {
-                  map(get(config, 'config.header.invisibleAttributes'), (attr) => (
+                  map(getHiddenAttributes(), (attr) => (
                     <HeaderAttribute key={attr.label} label={attr.label} value={get(source, attr.value)} gridClass="col-md-12" type={attr.type} />
                   ))
                 }

From e42ef904ed66b986a682c98924f71f8f7378d10e Mon Sep 17 00:00:00 2001
From: Sny <sny.aggarwal@gmail.com>
Date: Thu, 23 Sep 2021 08:29:50 +0530
Subject: [PATCH 3/6] updated attributes to default

---
 src/components/orgs/OrgHome.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/orgs/OrgHome.jsx b/src/components/orgs/OrgHome.jsx
index 0a7fe5dd..16bac240 100644
--- a/src/components/orgs/OrgHome.jsx
+++ b/src/components/orgs/OrgHome.jsx
@@ -53,7 +53,6 @@ const DEFAULT_CONFIG = {
       ],
       height: null,
       controls: true,
-      attributes: true,
       signatures: true,
       logo: true,
       shrink: false,

From 925491392d778c268c006d12793e872e5016cd6d Mon Sep 17 00:00:00 2001
From: Akhil Kala <akhilkala@pop-os.localdomain>
Date: Thu, 23 Sep 2021 10:36:29 +0530
Subject: [PATCH 4/6] json timer removed

---
 src/components/common/JSONEditor.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/common/JSONEditor.jsx b/src/components/common/JSONEditor.jsx
index ee71dff5..d122761b 100644
--- a/src/components/common/JSONEditor.jsx
+++ b/src/components/common/JSONEditor.jsx
@@ -5,7 +5,7 @@ import locale    from 'react-json-editor-ajrm/locale/en';
 const JSONEditor = props => {
 
   return (
-    <JSONInput waitAfterKeyPress={2500} locale={locale} height='auto' width='100%' {...props} />
+    <JSONInput locale={locale} height='auto' width='100%' {...props} />
   )
 }
 

From ba026ba893e8e05932da1c3ef3dee55d35dd605c Mon Sep 17 00:00:00 2001
From: Akhil Kala <akhilkala@pop-os.localdomain>
Date: Thu, 23 Sep 2021 10:54:55 +0530
Subject: [PATCH 5/6] Default configs refactored

---
 src/common/defaultConfigs.js                  | 394 ++++++++++++++++++
 src/components/collections/CollectionHome.jsx | 123 +-----
 .../collections/CollectionHomeHeader.jsx      |  28 +-
 src/components/fhir/ConceptMapHome.jsx        |  14 +-
 src/components/fhir/ContainerHome.jsx         |  27 +-
 src/components/fhir/Fhir.jsx                  |  16 +-
 src/components/fhir/OwnerHome.jsx             |  16 +-
 src/components/orgs/OrgHome.jsx               |  62 +--
 src/components/sources/SourceHome.jsx         | 127 +-----
 src/components/sources/SourceHomeHeader.jsx   |  18 +-
 10 files changed, 418 insertions(+), 407 deletions(-)
 create mode 100644 src/common/defaultConfigs.js

diff --git a/src/common/defaultConfigs.js b/src/common/defaultConfigs.js
new file mode 100644
index 00000000..8cb31e50
--- /dev/null
+++ b/src/common/defaultConfigs.js
@@ -0,0 +1,394 @@
+export const CONCEPT_MAP_DEFAULT_CONFIG = {
+  name: "FHIR Default (ConceptMap)",
+  web_default: true,
+  is_default: false,
+  config: {
+    tabs: [
+      {
+        type: "codes",
+        label: "Codes",
+        page_size: 25,
+        default: true,
+        layout: "table",
+      },
+      { type: "versions", label: "Versions", page_size: 25, layout: "table" },
+      { type: "about", label: "About" },
+    ],
+  },
+};
+
+export const CODE_SYSTEM_DEFAULT_CONFIG = {
+  name: "FHIR Default (CodeSystem)",
+  web_default: true,
+  is_default: false,
+  config: {
+    tabs: [
+      {
+        type: "codes",
+        label: "Codes",
+        page_size: 25,
+        default: true,
+        layout: "table",
+      },
+      { type: "versions", label: "Versions", page_size: 25, layout: "table" },
+      { type: "about", label: "About" },
+    ],
+  },
+};
+
+export const VALUE_SET_DEFAULT_CONFIG = {
+  name: "FHIR Default (ValueSet)",
+  web_default: true,
+  is_default: false,
+  config: {
+    tabs: [
+      {
+        type: "codes",
+        label: "Codes",
+        page_size: 25,
+        default: true,
+        layout: "table",
+      },
+      { type: "versions", label: "Versions", page_size: 25, layout: "table" },
+      { type: "about", label: "About" },
+    ],
+  },
+};
+
+export const FHIR_DEFAULT_CONFIG = {
+  name: "FHIR Default",
+  web_default: true,
+  is_default: false,
+  config: {
+    tabs: [
+      { type: "CodeSystem", label: "Code Systems", default: true },
+      { type: "ValueSet", label: "Value Sets" },
+      { type: "ConceptMap", label: "Concept Maps" },
+    ],
+  },
+};
+
+const ORG_BACKGROUND_CONFIG = {
+  background: {
+    image: "",
+    backgroundColor: "",
+  },
+  forground: {
+    color: "",
+    titleColor: "",
+    descriptionColor: "",
+    title: "",
+    description: "",
+  },
+};
+
+export const ORG_DEFAULT_CONFIG = {
+  name: "OCL Default (Org)",
+  web_default: true,
+  is_default: false,
+  config: {
+    header: {
+      ...ORG_BACKGROUND_CONFIG,
+      attributes: [
+        {
+          label: "Company",
+          value: "company",
+          type: "text",
+        },
+        {
+          label: "Location",
+          value: "location",
+          type: "text",
+        },
+        {
+          label: "Website",
+          value: "website",
+          type: "url",
+        },
+      ],
+      height: null,
+      controls: true,
+      signatures: true,
+      logo: true,
+      shrink: false,
+    },
+    tabs: [
+      {
+        type: "sources",
+        label: "Sources",
+        page_size: 25,
+        default: true,
+        layout: "table",
+        color: "",
+      },
+      {
+        type: "collections",
+        label: "Collections",
+        page_size: 25,
+        layout: "table",
+        color: "",
+      },
+      {
+        type: "users",
+        label: "Members",
+        page_size: 25,
+        layout: "table",
+        color: "",
+      },
+      { type: "about", label: "About", color: "" },
+    ],
+  },
+};
+
+export const SOURCE_DEFAULT_CONFIG = {
+  name: "OCL Default (Source)",
+  web_default: true,
+  is_default: false,
+  config: {
+    header: {
+      shrink: false,
+      visibleAttributes: [
+        {
+          label: "Source Type",
+          value: "source_type",
+          type: "text",
+        },
+        {
+          label: "Supported Locales",
+          value: "supported_locales",
+        },
+        {
+          label: "Custom Validation Schema",
+          value: "custom_validation_schema",
+          type: "text",
+        },
+      ],
+      invisibleAttributes: [
+        {
+          label: "Canonical Url",
+          value: "canonical_url",
+          type: "url",
+        },
+        {
+          label: "Publisher",
+          value: "publisher",
+          type: "text",
+        },
+        {
+          label: "Purpose",
+          value: "purpose",
+          type: "text",
+        },
+        {
+          label: "Copyright",
+          value: "copyright",
+          type: "text",
+        },
+        {
+          label: "Content Type",
+          value: "content_type",
+          type: "text",
+        },
+        {
+          label: "Revision Date",
+          value: "revision_date",
+          type: "date",
+        },
+        {
+          label: "Revision Date",
+          value: "revision_date",
+          type: "date",
+        },
+        {
+          label: "Identifier",
+          value: "identifier",
+          type: "json",
+        },
+        {
+          label: "Contact",
+          value: "contact",
+          type: "json",
+        },
+        {
+          label: "Jurisdiction",
+          value: "jurisdiction",
+          type: "json",
+        },
+        {
+          label: "Meta",
+          value: "meta",
+          type: "json",
+        },
+        {
+          label: "Collection Reference",
+          value: "collection_reference",
+          type: "text",
+        },
+        {
+          label: "Hierarchy Meaning",
+          value: "hierarchy_meaning",
+          type: "text",
+        },
+        {
+          label: "Experimental",
+          value: "experimental",
+          type: "boolean",
+        },
+        {
+          label: "Case Sensitive",
+          value: "case_sensitive",
+          type: "boolean",
+        },
+        {
+          label: "Compositional",
+          value: "compositional",
+          type: "boolean",
+        },
+        {
+          label: "Version Needed",
+          value: "version_needed",
+          type: "boolean",
+        },
+      ],
+    },
+    tabs: [
+      {
+        type: "concepts",
+        label: "Concepts",
+        page_size: 25,
+        default: true,
+        layout: "table",
+      },
+      { type: "mappings", label: "Mappings", page_size: 25, layout: "table" },
+      { type: "versions", label: "Versions", page_size: 25, layout: "table" },
+      { type: "about", label: "About" },
+    ],
+  },
+};
+
+export const COLLECTION_DEFAULT_CONFIG = {
+  name: "OCL Default (Collection)",
+  web_default: true,
+  is_default: false,
+  config: {
+    header: {
+      shrink: false,
+      visibleAttributes: [
+        {
+          label: "Short Code",
+          value: "short_code",
+          type: "text",
+        },
+        {
+          label: "Name",
+          value: "name",
+          type: "text",
+        },
+        {
+          label: "Collection Type",
+          value: "collection_type",
+          type: "text",
+        },
+        {
+          label: "Custom Validation Schema",
+          value: "custom_validation_schema",
+          type: "text",
+        },
+        {
+          label: "Supported Locales",
+          value: "supported_locales",
+        },
+      ],
+      invisibleAttributes: [
+        {
+          label: "Canonical Url",
+          value: "canonical_url",
+          type: "url",
+        },
+        {
+          label: "Publisher",
+          value: "publisher",
+          type: "text",
+        },
+        {
+          label: "Purpose",
+          value: "purpose",
+          type: "text",
+        },
+        {
+          label: "Copyright",
+          value: "copyright",
+          type: "text",
+        },
+        {
+          label: "Preferred Source",
+          value: "preferred_source",
+          type: "text",
+        },
+        {
+          label: "Custom Resources Linked Source",
+          value: "custom_resources_linked_source",
+          type: "text",
+        },
+        {
+          label: "Revision Date",
+          value: "revision_date",
+          type: "date",
+        },
+        {
+          label: "Identifier",
+          value: "identifier",
+          type: "json",
+        },
+        {
+          label: "Contact",
+          value: "contact",
+          type: "json",
+        },
+        {
+          label: "Jurisdiction",
+          value: "jurisdiction",
+          type: "json",
+        },
+        {
+          label: "Meta",
+          value: "meta",
+          type: "json",
+        },
+        {
+          label: "Immutable",
+          value: "immutable",
+          type: "boolean",
+        },
+        {
+          label: "Locked Date",
+          value: "locked_date",
+          type: "date",
+        },
+        {
+          label: "Experimental",
+          value: "experimental",
+          type: "boolean",
+        },
+      ],
+    },
+    tabs: [
+      {
+        type: "concepts",
+        label: "Concepts",
+        page_size: 25,
+        default: true,
+        layout: "table",
+      },
+      { type: "mappings", label: "Mappings", page_size: 25, layout: "table" },
+      {
+        type: "references",
+        label: "References",
+        page_size: 25,
+        layout: "table",
+      },
+      { type: "versions", label: "Versions", page_size: 25, layout: "table" },
+      { type: "about", label: "About" },
+    ],
+  },
+};
diff --git a/src/components/collections/CollectionHome.jsx b/src/components/collections/CollectionHome.jsx
index b019f5c4..5b13f440 100644
--- a/src/components/collections/CollectionHome.jsx
+++ b/src/components/collections/CollectionHome.jsx
@@ -7,123 +7,10 @@ import CollectionHomeTabs from './CollectionHomeTabs';
 import NotFound from '../common/NotFound';
 import AccessDenied from '../common/AccessDenied';
 import PermissionDenied from '../common/PermissionDenied';
+import { COLLECTION_DEFAULT_CONFIG } from "../../common/defaultConfigs"
 
 const TABS = ['details', 'concepts', 'mappings', 'references', 'versions', 'about']
-const DEFAULT_CONFIG = {
-  name: 'OCL Default (Collection)',
-  web_default: true,
-  is_default: false,
-  config: {
-    header:{
-      shrink: false,
-      visibleAttributes: [
-        {
-          label: "Short Code",
-          value: "short_code",
-          type: "text"
-        },
-        {
-          label: "Name",
-          value: "name",
-          type: "text"
-        },
-        {
-          label: "Collection Type",
-          value: "collection_type",
-          type: "text"
-        },
-        {
-          label: "Custom Validation Schema",
-          value: "custom_validation_schema",
-          type: "text"
-        },
-        {
-          label: "Supported Locales",
-          value: "supported_locales",
-        }
-      ],
-      invisibleAttributes: [
-        {
-          label: "Canonical Url",
-          value: "canonical_url",
-          type: "url"
-        },
-        {
-          label: "Publisher",
-          value: "publisher",
-          type: "text"
-        },
-        {
-          label: "Purpose",
-          value: "purpose",
-          type: "text"
-        },
-        {
-          label: "Copyright",
-          value: "copyright",
-          type: "text"
-        },
-        {
-          label: "Preferred Source",
-          value: "preferred_source",
-          type: "text"
-        },
-        {
-          label: "Custom Resources Linked Source",
-          value: "custom_resources_linked_source",
-          type: "text"
-        },
-        {
-          label: "Revision Date",
-          value: "revision_date",
-          type: "date"
-        },
-        {
-          label: "Identifier",
-          value: "identifier",
-          type: "json"
-        },
-        {
-          label: "Contact",
-          value: "contact",
-          type: "json"
-        },
-        {
-          label: "Jurisdiction",
-          value: "jurisdiction",
-          type: "json"
-        },
-        {
-          label: "Meta",
-          value: "meta",
-          type: "json"
-        },
-        {
-          label: "Immutable",
-          value: "immutable",
-          type: "boolean"
-        },
-        {
-          label: "Locked Date",
-          value: "locked_date",
-          type: "date"
-        },
-        {
-          label: "Experimental",
-          value: "experimental",
-          type: "boolean"
-        },
-      ]
-    },
-    tabs: [
-      {type: "concepts", label: "Concepts", page_size: 25, "default": true, layout: 'table'},
-      {type: "mappings", label: "Mappings", page_size: 25, layout: 'table'},
-      {type: "references", label: "References", page_size: 25, layout: 'table'},
-      {type: "versions", label: "Versions", page_size: 25, layout: 'table'},
-      {type: "about", label: "About"},
-    ]
-  }
-}
+
 
 class CollectionHome extends React.Component {
   constructor(props) {
@@ -248,7 +135,7 @@ class CollectionHome extends React.Component {
                     this.setState({
                       isLoading: false,
                       collection: collection,
-                      selectedConfig: defaultCustomConfig || DEFAULT_CONFIG,
+                      selectedConfig: defaultCustomConfig || COLLECTION_DEFAULT_CONFIG,
                       customConfigs: customConfigs,
                     }, () => {
                       if(isEmpty(this.state.versions))
@@ -327,11 +214,11 @@ class CollectionHome extends React.Component {
               currentVersion={this.getCurrentVersion()}
               aboutTab={showAboutTab}
               onVersionUpdate={this.onVersionUpdate}
-              customConfigs={[...customConfigs, DEFAULT_CONFIG]}
+              customConfigs={[...customConfigs, COLLECTION_DEFAULT_CONFIG]}
               onConfigChange={this.onConfigChange}
               selectedConfig={selectedConfig}
               showConfigSelection={this.customConfigFeatureApplicable()}
-              isOCLDefaultConfigSelected={isEqual(selectedConfig, DEFAULT_CONFIG)}
+              isOCLDefaultConfigSelected={isEqual(selectedConfig, COLLECTION_DEFAULT_CONFIG)}
               isLoadingVersions={isLoadingVersions}
             />
           </div>
diff --git a/src/components/collections/CollectionHomeHeader.jsx b/src/components/collections/CollectionHomeHeader.jsx
index d58e44f4..425a5ab0 100644
--- a/src/components/collections/CollectionHomeHeader.jsx
+++ b/src/components/collections/CollectionHomeHeader.jsx
@@ -31,33 +31,9 @@ import RetiredChip from '../common/RetiredChip';
 import ProcessingChip from '../common/ProcessingChip';
 import ConceptContainerDelete from '../common/ConceptContainerDelete';
 import CollapsibleDivider from '../common/CollapsibleDivider';
+import { COLLECTION_DEFAULT_CONFIG } from '../../common/defaultConfigs';
 
-const DEFAULT_VISIBLE_ATTRIBUTES = [
-  {
-    label: "Short Code",
-    value: "short_code",
-    type: "text"
-  },
-  {
-    label: "Name",
-    value: "name",
-    type: "text"
-  },
-  {
-    label: "Collection Type",
-    value: "collection_type",
-    type: "text"
-  },
-  {
-    label: "Custom Validation Schema",
-    value: "custom_validation_schema",
-    type: "text"
-  },
-  {
-    label: "Supported Locales",
-    value: "supported_locales",
-  }
-]
+const DEFAULT_VISIBLE_ATTRIBUTES = COLLECTION_DEFAULT_CONFIG.config.header.visibleAttributes
 
 const CollectionHomeHeader = ({
   collection, isVersionedObject, versionedObjectURL, currentURL, config
diff --git a/src/components/fhir/ConceptMapHome.jsx b/src/components/fhir/ConceptMapHome.jsx
index 73d038e4..f5568376 100644
--- a/src/components/fhir/ConceptMapHome.jsx
+++ b/src/components/fhir/ConceptMapHome.jsx
@@ -8,19 +8,7 @@ import NotFound from '../common/NotFound';
 import NavigationButtonGroup from '../search/NavigationButtonGroup';
 import ContainerHomeHeader from './ContainerHomeHeader';
 import ConceptMapGroups from './ConceptMapGroups';
-
-const CONCEPT_MAP_DEFAULT_CONFIG = {
-  name: 'FHIR Default (ConceptMap)',
-  web_default: true,
-  is_default: false,
-  config: {
-    tabs: [
-      {type: "codes", label: "Codes", page_size: 25, "default": true, layout: 'table'},
-      {type: "versions", label: "Versions", page_size: 25, layout: 'table'},
-      {type: "about", label: "About"},
-    ]
-  }
-}
+import { CONCEPT_MAP_DEFAULT_CONFIG } from "../../common/defaultConfigs"
 
 class ConceptMapHome extends React.Component {
   constructor(props) {
diff --git a/src/components/fhir/ContainerHome.jsx b/src/components/fhir/ContainerHome.jsx
index cf8f1009..4c3a9cc2 100644
--- a/src/components/fhir/ContainerHome.jsx
+++ b/src/components/fhir/ContainerHome.jsx
@@ -6,32 +6,7 @@ import APIService from '../../services/APIService';
 import ContainerHomeHeader from './ContainerHomeHeader';
 import ContainerHomeTabs from './ContainerHomeTabs';
 import { getAppliedServerConfig } from '../../common/utils';
-
-const CODE_SYSTEM_DEFAULT_CONFIG = {
-  name: 'FHIR Default (CodeSystem)',
-  web_default: true,
-  is_default: false,
-  config: {
-    tabs: [
-      {type: "codes", label: "Codes", page_size: 25, "default": true, layout: 'table'},
-      {type: "versions", label: "Versions", page_size: 25, layout: 'table'},
-      {type: "about", label: "About"},
-    ]
-  }
-}
-
-const VALUE_SET_DEFAULT_CONFIG = {
-  name: 'FHIR Default (ValueSet)',
-  web_default: true,
-  is_default: false,
-  config: {
-    tabs: [
-      {type: "codes", label: "Codes", page_size: 25, "default": true, layout: 'table'},
-      {type: "versions", label: "Versions", page_size: 25, layout: 'table'},
-      {type: "about", label: "About"},
-    ]
-  }
-}
+import { CODE_SYSTEM_DEFAULT_CONFIG, VALUE_SET_DEFAULT_CONFIG} from "../../common/defaultConfigs"
 
 class ContainerHome extends React.Component {
   constructor(props) {
diff --git a/src/components/fhir/Fhir.jsx b/src/components/fhir/Fhir.jsx
index 751a2621..9ed4dd1b 100644
--- a/src/components/fhir/Fhir.jsx
+++ b/src/components/fhir/Fhir.jsx
@@ -3,19 +3,7 @@ import { getAppliedServerConfig } from '../../common/utils';
 import OrgHomeHeader from '../orgs/OrgHomeHeader';
 import FhirTabs from './FhirTabs';
 import HeaderAttribute from '../common/HeaderAttribute';
-
-const DEFAULT_CONFIG = {
-  name: 'FHIR Default',
-  web_default: true,
-  is_default: false,
-  config: {
-    tabs: [
-      { type: "CodeSystem", label: "Code Systems", "default": true },
-      { type: "ValueSet", label: "Value Sets" },
-      { type: "ConceptMap", label: "Concept Maps" },
-    ]
-  }
-}
+import { FHIR_DEFAULT_CONFIG } from "../../common/defaultConfigs"
 
 class Fhir extends React.Component {
   constructor(props) {
@@ -23,7 +11,7 @@ class Fhir extends React.Component {
     this.serverConfig = getAppliedServerConfig()
     this.state = {
       tab: this.getDefaultTab(),
-      config: DEFAULT_CONFIG
+      config: FHIR_DEFAULT_CONFIG
     }
   }
 
diff --git a/src/components/fhir/OwnerHome.jsx b/src/components/fhir/OwnerHome.jsx
index cadbceca..93724fe9 100644
--- a/src/components/fhir/OwnerHome.jsx
+++ b/src/components/fhir/OwnerHome.jsx
@@ -6,19 +6,7 @@ import {
 import { getAppliedServerConfig } from '../../common/utils';
 import FhirTabs from './FhirTabs';
 import OwnerButton from '../common/OwnerButton';
-
-const DEFAULT_CONFIG = {
-  name: 'FHIR Default',
-  web_default: true,
-  is_default: false,
-  config: {
-    tabs: [
-      { type: "CodeSystem", label: "Code Systems", "default": true },
-      { type: "ValueSet", label: "Value Sets" },
-      { type: "ConceptMap", label: "Concept Maps" },
-    ]
-  }
-}
+import { FHIR_DEFAULT_CONFIG } from "../../common/defaultConfigs"
 
 class OwnerHome extends React.Component {
   constructor(props) {
@@ -36,7 +24,7 @@ class OwnerHome extends React.Component {
     this.state = {
       owner: {ownerType: ownerType, owner: owner, id: owner,},
       tab: this.getDefaultTab(),
-      config: DEFAULT_CONFIG
+      config: FHIR_DEFAULT_CONFIG
     }
   }
 
diff --git a/src/components/orgs/OrgHome.jsx b/src/components/orgs/OrgHome.jsx
index 16bac240..f4ecd4c4 100644
--- a/src/components/orgs/OrgHome.jsx
+++ b/src/components/orgs/OrgHome.jsx
@@ -12,59 +12,7 @@ import OrgHomeTabs from './OrgHomeTabs';
 import NotFound from '../common/NotFound';
 import AccessDenied from '../common/AccessDenied';
 import PermissionDenied from '../common/PermissionDenied';
-
-const BACKGROUND_CONFIG = {
-  background: {
-    image: '',
-    backgroundColor: '',
-  },
-  forground: {
-    color: '',
-    titleColor: '',
-    descriptionColor: '',
-    title: '',
-    description: ""
-  },
-}
-
-const DEFAULT_CONFIG = {
-  name: 'OCL Default (Org)',
-  web_default: true,
-  is_default: false,
-  config: {
-    header: {
-      ...BACKGROUND_CONFIG,
-      attributes: [
-        {
-          label: "Company",
-          value: "company",
-          type:"text"
-        },
-        {
-          label: "Location",
-          value: "location",
-          type:"text"
-        },
-        {
-          label: "Website",
-          value: "website",
-          type:"url"
-        },
-      ],
-      height: null,
-      controls: true,
-      signatures: true,
-      logo: true,
-      shrink: false,
-    },
-    tabs: [
-      {type: "sources", label: "Sources", page_size: 25, "default": true, layout: 'table', color: ''},
-      {type: "collections", label: "Collections", page_size: 25, layout: 'table', color: ''},
-      {type: "users", label: "Members", page_size: 25, layout: 'table', color: ''},
-      {type: "about", label: "About", color: ''},
-    ]
-  }
-}
+import { ORG_DEFAULT_CONFIG } from "../../common/defaultConfigs"
 
 class OrgHome extends React.Component {
   constructor(props) {
@@ -175,7 +123,7 @@ class OrgHome extends React.Component {
               this.setState({
                 isLoading: false,
                 org: org,
-                selectedConfig: defaultCustomConfig || DEFAULT_CONFIG,
+                selectedConfig: defaultCustomConfig || ORG_DEFAULT_CONFIG,
                 customConfigs: customConfigs,
               }, this.setTab)
             }
@@ -264,7 +212,7 @@ class OrgHome extends React.Component {
                   onPinCreate={this.createPin}
                   onPinDelete={this.deletePin}
                   showPin={isCurrentUserMemberOfOrg}
-                  customConfigs={[...customConfigs, DEFAULT_CONFIG]}
+                  customConfigs={[...customConfigs, ORG_DEFAULT_CONFIG]}
                   onConfigChange={this.onConfigChange}
                   aboutTab={showAboutTab}
                   showConfigSelection={this.customConfigFeatureApplicable()}
@@ -290,7 +238,7 @@ class OrgHome extends React.Component {
                   onPinCreate={this.createPin}
                   onPinDelete={this.deletePin}
                   showPin={isCurrentUserMemberOfOrg}
-                  customConfigs={[...customConfigs, DEFAULT_CONFIG]}
+                  customConfigs={[...customConfigs, ORG_DEFAULT_CONFIG]}
                   onConfigChange={this.onConfigChange}
                   aboutTab={showAboutTab}
                   showConfigSelection={this.customConfigFeatureApplicable()}
@@ -318,7 +266,7 @@ class OrgHome extends React.Component {
                     onPinCreate={this.createPin}
                     onPinDelete={this.deletePin}
                     showPin={isCurrentUserMemberOfOrg}
-                    customConfigs={[...customConfigs, DEFAULT_CONFIG]}
+                    customConfigs={[...customConfigs, ORG_DEFAULT_CONFIG]}
                     onConfigChange={this.onConfigChange}
                     selectedConfig={selectedConfig}
                     aboutTab={showAboutTab}
diff --git a/src/components/sources/SourceHome.jsx b/src/components/sources/SourceHome.jsx
index bc7627cf..5c9f490e 100644
--- a/src/components/sources/SourceHome.jsx
+++ b/src/components/sources/SourceHome.jsx
@@ -12,129 +12,10 @@ import PermissionDenied from '../common/PermissionDenied';
 import ConceptHome from '../concepts/ConceptHome';
 import MappingHome from '../mappings/MappingHome';
 import '../common/Split.scss';
+import { SOURCE_DEFAULT_CONFIG } from "../../common/defaultConfigs"
 
 const TABS = ['details', 'concepts', 'mappings', 'versions', 'about']
 
-const DEFAULT_CONFIG = {
-  name: 'OCL Default (Source)',
-  web_default: true,
-  is_default: false,
-  config: {
-    header: {
-      shrink: false,
-      visibleAttributes: [
-        {
-          label: "Source Type",
-          value: "source_type",
-          type: "text"
-        },
-        {
-          label: "Supported Locales",
-          value: "supported_locales",
-        },
-        {
-          label: "Custom Validation Schema",
-          value: "custom_validation_schema",
-          type: "text"
-        },
-      ],
-      invisibleAttributes: [
-        {
-          label: "Canonical Url",
-          value: "canonical_url",
-          type: "url"
-        },
-        {
-          label: "Publisher",
-          value: "publisher",
-          type: "text"
-        },
-        {
-          label: "Purpose",
-          value: "purpose",
-          type: "text"
-        },
-        {
-          label: "Copyright",
-          value: "copyright",
-          type: "text"
-        },
-        {
-          label: "Content Type",
-          value: "content_type",
-          type: "text"
-        },
-        {
-          label: "Revision Date",
-          value: "revision_date",
-          type: "date"
-        },
-        {
-          label: "Revision Date",
-          value: "revision_date",
-          type: "date"
-        },
-        {
-          label: "Identifier",
-          value: "identifier",
-          type: "json"
-        },
-        {
-          label: "Contact",
-          value: "contact",
-          type: "json"
-        },
-        {
-          label: "Jurisdiction",
-          value: "jurisdiction",
-          type: "json"
-        },
-        {
-          label: "Meta",
-          value: "meta",
-          type: "json"
-        },
-        {
-          label: "Collection Reference",
-          value: "collection_reference",
-          type: "text"
-        },
-        {
-          label: "Hierarchy Meaning",
-          value: "hierarchy_meaning",
-          type: "text"
-        },
-        {
-          label: "Experimental",
-          value: "experimental",
-          type: "boolean"
-        },
-        {
-          label: "Case Sensitive",
-          value: "case_sensitive",
-          type: "boolean"
-        },
-        {
-          label: "Compositional",
-          value: "compositional",
-          type: "boolean"
-        },
-        {
-          label: "Version Needed",
-          value: "version_needed",
-          type: "boolean"
-        },
-      ]
-    },
-    tabs: [
-      {type: "concepts", label: "Concepts", page_size: 25, "default": true, layout: 'table'},
-      {type: "mappings", label: "Mappings", page_size: 25, layout: 'table'},
-      {type: "versions", label: "Versions", page_size: 25, layout: 'table'},
-      {type: "about", label: "About"},
-    ]
-  }
-}
-
 class SourceHome extends React.Component {
   constructor(props) {
     super(props);
@@ -283,7 +164,7 @@ class SourceHome extends React.Component {
                     this.setState({
                       isLoading: false,
                       source: source,
-                      selectedConfig: defaultCustomConfig || DEFAULT_CONFIG,
+                      selectedConfig: defaultCustomConfig || SOURCE_DEFAULT_CONFIG,
                       customConfigs: customConfigs,
                     }, () => {
                       this.fetchSummary()
@@ -369,11 +250,11 @@ class SourceHome extends React.Component {
         currentVersion={this.getCurrentVersion()}
         aboutTab={showAboutTab}
         onVersionUpdate={this.onVersionUpdate}
-        customConfigs={[...customConfigs, DEFAULT_CONFIG]}
+        customConfigs={[...customConfigs, SOURCE_DEFAULT_CONFIG]}
         onConfigChange={this.onConfigChange}
         selectedConfig={selectedConfig}
         showConfigSelection={this.customConfigFeatureApplicable()}
-        isOCLDefaultConfigSelected={isEqual(selectedConfig, DEFAULT_CONFIG)}
+        isOCLDefaultConfigSelected={isEqual(selectedConfig, SOURCE_DEFAULT_CONFIG)}
         isLoadingVersions={isLoadingVersions}
         splitView={splitView}
         onSelect={this.onResourceSelect}
diff --git a/src/components/sources/SourceHomeHeader.jsx b/src/components/sources/SourceHomeHeader.jsx
index 963e26af..8958b416 100644
--- a/src/components/sources/SourceHomeHeader.jsx
+++ b/src/components/sources/SourceHomeHeader.jsx
@@ -31,23 +31,9 @@ import RetiredChip from '../common/RetiredChip';
 import ProcessingChip from '../common/ProcessingChip';
 import ConceptContainerDelete from '../common/ConceptContainerDelete';
 import CollapsibleDivider from '../common/CollapsibleDivider';
+import { SOURCE_DEFAULT_CONFIG } from '../../common/defaultConfigs';
 
-const DEFAULT_VISIBLE_ATTRIBUTES = [
-  {
-    label: "Source Type",
-    value: "source_type",
-    type: "text"
-  },
-  {
-    label: "Supported Locales",
-    value: "supported_locales",
-  },
-  {
-    label: "Custom Validation Schema",
-    value: "custom_validation_schema",
-    type: "text"
-  },
-]
+const DEFAULT_VISIBLE_ATTRIBUTES = SOURCE_DEFAULT_CONFIG.config.header.visibleAttributes
 
 const SourceHomeHeader = ({
   source, isVersionedObject, versionedObjectURL, currentURL, config, splitView

From 3dbb1aaf489559becc986889e71d36b92a55736f Mon Sep 17 00:00:00 2001
From: Akhil Kala <akhilkala@pop-os.localdomain>
Date: Thu, 23 Sep 2021 11:10:57 +0530
Subject: [PATCH 6/6] more customisation added to header attribute config

---
 .../collections/CollectionHomeHeader.jsx      | 20 +++++++++++++++++--
 src/components/orgs/OrgHomeHeader.jsx         | 15 +++++++++++++-
 src/components/sources/SourceHomeHeader.jsx   | 20 +++++++++++++++++--
 3 files changed, 50 insertions(+), 5 deletions(-)

diff --git a/src/components/collections/CollectionHomeHeader.jsx b/src/components/collections/CollectionHomeHeader.jsx
index 425a5ab0..3a9fbaac 100644
--- a/src/components/collections/CollectionHomeHeader.jsx
+++ b/src/components/collections/CollectionHomeHeader.jsx
@@ -34,6 +34,7 @@ import CollapsibleDivider from '../common/CollapsibleDivider';
 import { COLLECTION_DEFAULT_CONFIG } from '../../common/defaultConfigs';
 
 const DEFAULT_VISIBLE_ATTRIBUTES = COLLECTION_DEFAULT_CONFIG.config.header.visibleAttributes
+const DEFAULT_INVISIBLE_ATTRIBUTES = COLLECTION_DEFAULT_CONFIG.config.header.invisibleAttributes
 
 const CollectionHomeHeader = ({
   collection, isVersionedObject, versionedObjectURL, currentURL, config
@@ -60,7 +61,22 @@ const CollectionHomeHeader = ({
     )
   }
   const getHiddenAttributes = () => {
-    return {...get(config, 'config.header.invisibleAttributes'), ...getDefaultHiddenAttributes()}
+    if (get(config, 'config.header.invisibleAttributes') === 'object'){
+      return {...get(config, 'config.header.invisibleAttributes'), ...getDefaultHiddenAttributes()} 
+    }
+    else if (get(config, 'config.header.invisibleAttributes')) {
+      return { DEFAULT_INVISIBLE_ATTRIBUTES, ...getDefaultHiddenAttributes() } 
+    }
+    else return []
+  }
+  const getVisibleAttributes = ()=>{
+    if (get(config, 'config.header.visibleAttributes') === 'object'){
+      return get(config, 'config.header.visibleAttributes')
+    }
+    else if (get(config, 'config.header.visibleAttributes')) {
+      return DEFAULT_VISIBLE_ATTRIBUTES
+    }
+    else return []
   }
   const hasManyHiddenAttributes = nonEmptyCount(collection, map(getHiddenAttributes(),(attr) => attr.value)) >= 4;
 
@@ -160,7 +176,7 @@ const CollectionHomeHeader = ({
                 {collection.description}
               </div>
             }
-            {map(get(config, 'config.header.visibleAttributes'), (attr) => {
+            {map(getVisibleAttributes(), (attr) => {
               if (attr.value === "supported_locales" || attr.value === "default_locale"){
                 return <HeaderAttribute key={attr.label} label="Supported Locales" value={<SupportedLocales {...collection} />} gridClass="col-md-12" type="component" />
               }
diff --git a/src/components/orgs/OrgHomeHeader.jsx b/src/components/orgs/OrgHomeHeader.jsx
index 3de30c5e..cb6b1bfa 100644
--- a/src/components/orgs/OrgHomeHeader.jsx
+++ b/src/components/orgs/OrgHomeHeader.jsx
@@ -21,6 +21,9 @@ import CommonFormDrawer from '../common/CommonFormDrawer';
 import DownloadButton from '../common/DownloadButton';
 import CollapsibleDivider from '../common/CollapsibleDivider';
 import OrgForm from './OrgForm';
+import { ORG_DEFAULT_CONFIG } from "../../common/defaultConfigs"
+
+const DEFAULT_VISIBLE_ATTRIBUTES = ORG_DEFAULT_CONFIG.config.header.attributes
 
 const OrgHomeHeader = ({ org, url, fhir, extraComponents, config }) => {
   const downloadFileName = `Org-${get(org, 'id')}`;
@@ -44,6 +47,16 @@ const OrgHomeHeader = ({ org, url, fhir, extraComponents, config }) => {
               })
   }
 
+  const getVisibleAttributes = ()=>{
+    if (typeof get(config, 'config.header.attributes') === 'object') {
+      return get(config, 'config.header.attributes')
+    }
+    else if (get(config, 'config.header.attributes')) {
+      return DEFAULT_VISIBLE_ATTRIBUTES
+    }
+    else return []
+  }
+
   return (
     <header className='home-header col-md-12' style={{marginBottom: '0px'}}>
       <div className='col-md-12 no-side-padding container' style={{paddingTop: '10px'}}>
@@ -96,7 +109,7 @@ const OrgHomeHeader = ({ org, url, fhir, extraComponents, config }) => {
                 {org.description}
               </div>
             }
-            {map(get(config, 'config.header.attributes'), (attr) => {
+            {map(getVisibleAttributes(), (attr) => {
                 return <HeaderAttribute key={attr.label} label={attr.label} value={org[attr.value]} type={attr.type} gridClass="col-md-12" />
             })}
             <HeaderAttribute label="Custom Attributes" value={!isEmpty(org.extras) && <CustomAttributesPopup attributes={org.extras} />} gridClass="col-md-12" />
diff --git a/src/components/sources/SourceHomeHeader.jsx b/src/components/sources/SourceHomeHeader.jsx
index 8958b416..de26e993 100644
--- a/src/components/sources/SourceHomeHeader.jsx
+++ b/src/components/sources/SourceHomeHeader.jsx
@@ -34,6 +34,7 @@ import CollapsibleDivider from '../common/CollapsibleDivider';
 import { SOURCE_DEFAULT_CONFIG } from '../../common/defaultConfigs';
 
 const DEFAULT_VISIBLE_ATTRIBUTES = SOURCE_DEFAULT_CONFIG.config.header.visibleAttributes
+const DEFAULT_INVISIBLE_ATTRIBUTES = SOURCE_DEFAULT_CONFIG.config.header.invisibleAttributes
 
 const SourceHomeHeader = ({
   source, isVersionedObject, versionedObjectURL, currentURL, config, splitView
@@ -59,8 +60,23 @@ const SourceHomeHeader = ({
     }
     )
   }
+  const getVisibleAttributes = ()=>{
+    if (get(config, 'config.header.visibleAttributes') === 'object'){
+      return get(config, 'config.header.visibleAttributes')
+    }
+    else if (get(config, 'config.header.visibleAttributes')) {
+      return DEFAULT_VISIBLE_ATTRIBUTES
+    }
+    else return []
+  }
   const getHiddenAttributes = () => {
-    return {...get(config, 'config.header.invisibleAttributes'), ...getDefaultHiddenAttributes()}
+    if (get(config, 'config.header.invisibleAttributes') === 'object'){
+      return {...get(config, 'config.header.invisibleAttributes'), ...getDefaultHiddenAttributes()} 
+    }
+    else if (get(config, 'config.header.invisibleAttributes')) {
+      return { DEFAULT_INVISIBLE_ATTRIBUTES, ...getDefaultHiddenAttributes() } 
+    }
+    else return []
   }
   const hasManyHiddenAttributes = nonEmptyCount(source, map(getHiddenAttributes(),(attr) => attr.value)) >= 4;
 
@@ -165,7 +181,7 @@ const SourceHomeHeader = ({
                 {source.description}
               </div>
             }
-            {map(get(config, 'config.header.visibleAttributes'), (attr) => {
+            {map(getVisibleAttributes(), (attr) => {
               if (attr.value === "supported_locales" || attr.value === "default_locale"){
                 return <HeaderAttribute key={attr.label} label="Supported Locales" value={<SupportedLocales {...source} />} gridClass="col-md-12" type="component" />
               }