chore: Hodge Podge to address various CSS inconsistencies - BED-7297

cmd/ui/src/views/Explore/ExploreSearch/ExploreSearch.tsx

@@ -175,7 +175,7 @@ const ExploreSearch: React.FC = () => {
                 'w-[600px]': activeTab === 'cypher' && showSearchWidget,
             })}>
             <div
-                className='h-10 w-full flex gap-1 rounded pointer-events-auto bg-[#f4f4f4] dark:bg-[#222222]'
+                className='h-10 w-full flex gap-1 rounded-lg pointer-events-auto bg-[#f4f4f4] dark:bg-[#222222]'
                 data-testid='explore_search-container_header'>
                 <Icon
                     tip='Toggle search widget'

packages/go/chow/ingestvalidator/schema.go

@@ -4,7 +4,7 @@
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
 //
-//     http://www.apache.org/licenses/LICENSE-2.0
+//	http://www.apache.org/licenses/LICENSE-2.0
 //
 // Unless required by applicable law or agreed to in writing, software
 // distributed under the License is distributed on an "AS IS" BASIS,

packages/go/openapi/doc/openapi.json

@@ -22337,7 +22337,8 @@
         "Groups",
         "Data Quality",
         "Datapipe",
-        "Cypher"
+        "Cypher",
+        "OpenGraph"
       ]
     },
     {

packages/javascript/bh-shared-ui/src/components/CreateUserForm/CreateUserForm.tsx

@@ -73,7 +73,7 @@ const CreateUserForm: React.FC<{
 
     if (getRolesQuery.isError || getSSOProvidersQuery.isError || getEnvironmentsQuery.isError) {
         return (
-            <Card className='p-6 rounded shadow w-[600px] m-auto h-[800px] flex flex-col justify-center'>
+            <Card className='p-6 shadow w-[600px] m-auto h-[800px] flex flex-col justify-center'>
                 <div>Unable to load data required to create this user.</div>
 
                 <DialogActions>
@@ -166,7 +166,7 @@ const CreateUserFormInner: React.FC<{
         <Form {...form}>
             <form autoComplete='off' data-testid='create-user-dialog_form' onSubmit={form.handleSubmit(handleOnSave)}>
                 <div className='flex gap-x-4 justify-center'>
-                    <Card className='p-6 rounded shadow max-w-[600px] w-full'>
+                    <Card className='p-6 shadow max-w-[600px] w-full'>
                         <DialogTitle>{'Create User'}</DialogTitle>
 
                         <div className='flex flex-col mt-4 w-full' data-testid='create-user-dialog_content'>

packages/javascript/bh-shared-ui/src/components/EntityInfo/EntityInfoPanel.tsx

@@ -53,7 +53,7 @@ const EntityInfoPanel: React.FC<EntityInfoPanelProps> = ({
     return (
         <div
             className={cn(
-                'flex flex-col pointer-events-none overflow-y-hidden h-full min-w-[400px] w-[400px] max-w-[400px]',
+                'flex flex-col pointer-events-none overflow-y-hidden h-full min-w-[400px] w-[400px] max-w-[400px] rounded-lg',
                 className
             )}
             data-testid='explore_entity-information-panel'>
@@ -65,10 +65,10 @@ const EntityInfoPanel: React.FC<EntityInfoPanelProps> = ({
                     label='Role-based access filtering applied'
                 />
             )}
-            <div className='bg-neutral-2 pointer-events-auto rounded'>
+            <div className='bg-neutral-2 pointer-events-auto rounded-lg shadow-outer-1'>
                 <Header name={getEntityName(selectedNode)} nodeType={selectedNode?.type} />
             </div>
-            <div className='bg-neutral-2 mt-2 overflow-x-hidden overflow-y-auto py-1 px-4 pointer-events-auto rounded'>
+            <div className='bg-neutral-2 mt-2 mb-1 py-1 px-4 pointer-events-auto overflow-x-hidden overflow-y-auto rounded-lg shadow-outer-1'>
                 {selectedNode ? (
                     <EntityInfoContent
                         DataTable={DataTable}

packages/javascript/bh-shared-ui/src/components/EnvironmentSelectPanel/EnvironmentSelectPanel.tsx

@@ -125,7 +125,7 @@ const EnvironmentSelectPanelInner: React.FC<{
     }, [selectedEnvironments, areAllEnvironmentsSelected, areAllEnvironmentsIndeterminate, form]);
 
     return (
-        <Card className='flex-1 p-4 rounded shadow max-w-[400px] overflow-y-hidden'>
+        <Card className='flex-1 p-4 shadow max-w-[400px] overflow-y-hidden'>
             <DialogTitle>Environmental Targeted Access Control </DialogTitle>
             <div
                 className='flex flex-col relative pb-2 h-full'

packages/javascript/bh-shared-ui/src/components/ExploreSearchCombobox/ExploreSearchCombobox.tsx

@@ -112,7 +112,7 @@ const ExploreSearchCombobox: React.FC<{
                     marginTop: '1rem',
                     zIndex: 1300,
                 }}>
-                <Paper style={{ display: isOpen ? 'inherit' : 'none' }}>
+                <Paper style={{ display: isOpen ? 'inherit' : 'none' }} className='rounded-lg'>
                     <List
                         {...getMenuProps()}
                         dense

packages/javascript/bh-shared-ui/src/components/VirtualizedNodeList.tsx

@@ -84,7 +84,7 @@ const Row = <T,>({ data, index, style }: ListChildComponentProps<NodeList<T>>) =
             <div
                 style={{ ...style }}
                 className={cn(
-                    'bg-neutral-light-2 dark:bg-neutral-dark-2 flex items-center pl-2 border-y border-y-neutral-light-5',
+                    'bg-neutral-light-2 dark:bg-neutral-dark-2 flex items-center pl-2 border-b border-y-neutral-light-5',
                     {
                         'bg-neutral-light-3 dark:bg-neutral-dark-3': index % 2 !== 0,
                         'cursor-default pointer-events-none': typeof normalizedItem.onClick !== 'function',

packages/javascript/bh-shared-ui/src/components/index.ts

@@ -33,9 +33,9 @@ export { default as CollectorCard } from './CollectorCard';
 export * from './CollectorCardList';
 export { default as CollectorCardList } from './CollectorCardList';
 export * from './ColumnHeaders';
-export * from './ConditionalTooltip';
 export * from './CommunityIcon';
 export { default as CommunityIcon } from './CommunityIcon';
+export * from './ConditionalTooltip';
 export * from './ConfirmationDialog';
 export { default as ConfirmationDialog } from './ConfirmationDialog';
 export * from './CreateMenu';

packages/javascript/bh-shared-ui/src/views/PrivilegeZones/Details/Details.tsx

@@ -57,26 +57,26 @@ const Details: FC = () => {
     };
 
     return (
-        <div className='h-full max-h-[75vh]'>
+        <div className='h-[calc(100%-10rem)]'>
             <PageDescription />
             <div className='mt-6 w-2/3'>
                 <InfoHeader />
             </div>
-            <div className='flex gap-8 mt-4 h-full'>
-                <div className='flex flex-col gap-2 basis-2/3 bg-neutral-2 pt-4 min-w-0 rounded shadow-outer-1 h-full'>
-                    <h2 className='font-bold text-xl pl-4 pb-1'>{tagTypeDisplay} Details</h2>
-                    <div className='flex flex-wrap justify-between w-full pb-4 border-b border-neutral-3 pl-4'>
-                        <div className='flex gap-6 items-center'>
+            <div className='flex gap-6 my-4 h-full'>
+                <div className='flex flex-col bg-neutral-2 pt-4 rounded-lg shadow-outer-1 basis-2/3'>
+                    <h2 className='font-bold text-xl pl-4 mb-2'>{tagTypeDisplay} Details</h2>
+                    <div className='flex flex-wrap justify-between w-full pb-6 border-b border-neutral-3 pl-4'>
+                        <div className='flex gap-2 items-center'>
                             <TagSelector />
                             <EnvironmentSelector />
                         </div>
                         <SearchBar showTags={false} />
                     </div>
                     <div className='flex overflow-x-hidden max-lg:flex-col h-dvh'>
-                        <div className='w-1/2 grow border-r border-neutral-3 max-lg:border-none max-lg:w-full overflow-y-auto'>
+                        <div className='w-1/2 pt-2 grow border-r border-neutral-3 max-lg:border-none max-lg:w-full overflow-y-auto'>
                             <RulesAccordion key={tagId} />
                         </div>
-                        <div className='w-1/2 max-lg:w-full overflow-y-auto'>
+                        <div className='w-1/2 pt-2 max-lg:w-full overflow-y-auto'>
                             {ruleQuery.data && ruleQuery.data.disabled_at !== null ? (
                                 <Alert severity='warning' className='mx-8'>
                                     <AlertTitle>Rule is disabled</AlertTitle>

packages/javascript/bh-shared-ui/src/views/PrivilegeZones/Details/DynamicDetails.tsx

@@ -77,11 +77,11 @@ const TagDetails: FC<{ tagData: AssetGroupTag; hasObjectCountPanel: boolean }> =
     const ownedId = useOwnedTagId();
 
     return (
-        <div className='max-h-full flex flex-col gap-8' data-testid='privilege-zones_tag-details-card'>
-            <Card className='px-6 py-6 rounded-lg max-w-lg'>
+        <div className='max-h-full flex flex-col gap-6 mb-8' data-testid='privilege-zones_tag-details-card'>
+            <Card className='p-6'>
                 <div className='flex items-center' title={name}>
                     {glyph && <ZoneIcon zone={tagData} persistGlyph size={20} />}
-                    <span className='text-xl font-bold truncate'>{name}</span>
+                    <span className='text-xl font-bold text-wrap'>{name}</span>
                 </div>
                 {Certification && (
                     <div className='mt-4'>
@@ -128,8 +128,8 @@ const RuleDetails: FC<{ ruleData: AssetGroupTagSelector }> = ({ ruleData }) => {
     const { Certification } = useContext(PrivilegeZonesContext);
 
     return (
-        <div className='max-h-full flex flex-col gap-8' data-testid='privilege-zones_selector-details-card'>
-            <Card className='px-6 py-6 rounded-lg'>
+        <div className='flex flex-col gap-6' data-testid='privilege-zones_selector-details-card'>
+            <Card className='p-6'>
                 <div className='text-xl font-bold truncate' title={name}>
                     {name}
                 </div>
@@ -172,10 +172,10 @@ const DynamicDetails: FC<DynamicDetailsProps> = ({
     hasObjectCountPanel = false,
 }) => {
     if (isLoading) {
-        return <Skeleton className='px-6 py-6 max-w-lg h-52' />;
+        return <Skeleton className='p-6 h-52' />;
     } else if (isError) {
         return (
-            <Card className='px-6 py-6 max-w-lg'>
+            <Card className='p-6'>
                 <span className='text-base'>There was an error fetching this data</span>
             </Card>
         );

packages/javascript/bh-shared-ui/src/views/PrivilegeZones/Details/ObjectCountPanel.tsx

@@ -24,10 +24,7 @@ const ObjectCountPanel: FC = () => {
 
     if (objectsCountQuery.isLoading) {
         return (
-            <Card
-                tabIndex={0}
-                className='flex flex-col px-6 py-6 select-none max-w-lg'
-                data-testid='privilege-zones_object-counts'>
+            <Card tabIndex={0} className='flex flex-col p-6 select-none' data-testid='privilege-zones_object-counts'>
                 <div className='flex justify-between items-center'>
                     <p>Total Count</p>
                     <Skeleton className='h-8 w-16' />
@@ -42,10 +39,7 @@ const ObjectCountPanel: FC = () => {
         );
     } else if (objectsCountQuery.isError) {
         return (
-            <Card
-                tabIndex={0}
-                className='flex flex-col px-6 py-6 select-none max-w-lg'
-                data-testid='privilege-zones_object-counts'>
+            <Card tabIndex={0} className='flex flex-col p-6 select-none' data-testid='privilege-zones_object-counts'>
                 <div className='flex justify-between items-center'>
                     <p>Total Count</p>
                     <Badge label={'0'} />
@@ -60,7 +54,7 @@ const ObjectCountPanel: FC = () => {
         return (
             <Card
                 tabIndex={0}
-                className='flex flex-col px-6 py-6 select-none overflow-y-auto max-w-lg'
+                className='flex flex-col p-6 select-none overflow-y-auto'
                 data-testid='privilege-zones_object-counts'>
                 <div className='flex justify-between items-center'>
                     <p>Total Count</p>

packages/javascript/bh-shared-ui/src/views/PrivilegeZones/Details/ObjectsAccordion.tsx

@@ -127,7 +127,7 @@ const ObjectAccordionItem: React.FC<ObjectAccordionItemProps> = ({
                 <div
                     key={index}
                     role='listitem'
-                    className={cn('border-y border-neutral-3 relative', {
+                    className={cn('border-b border-neutral-3 relative', {
                         'bg-neutral-4': objectId === item.id.toString(),
                     })}
                     style={style}>
@@ -151,7 +151,7 @@ const ObjectAccordionItem: React.FC<ObjectAccordionItemProps> = ({
             value={kind}
             data-testid={`privilege-zones_details_${kind}-accordion-item`}
             className='[&[data-state=open]>div>div>button>svg]:rotate-180 sticky'>
-            <div className='w-full flex items-center justify-between border-y border-neutral-3'>
+            <div className='w-full flex items-center justify-between border-b border-neutral-3'>
                 <div className='w-full flex items-center gap-2'>
                     <Button
                         className='w-6'

packages/javascript/bh-shared-ui/src/views/PrivilegeZones/Details/RulesAccordion.tsx

@@ -87,7 +87,7 @@ export const RulesAccordion: React.FC = () => {
                 </span>
             </div>
             <div
-                className={cn('border-y border-neutral-3 relative', {
+                className={cn('border-b border-neutral-3 relative', {
                     'bg-neutral-4': !ruleId,
                 })}>
                 {selectedTag.id && <SelectedHighlight itemId={selectedTag.id} type='tag' />}
@@ -144,7 +144,7 @@ const LoadingRow = (_: number, style: React.CSSProperties) => (
     <div
         data-testid='privilege-zones_rule-accordion_loading-skeleton'
         style={style}
-        className='border-y border-neutral-3 relative w-full p-2'>
+        className='border-b border-neutral-3 relative w-full p-2'>
         <Skeleton className='h-full' />
     </div>
 );
@@ -203,7 +203,7 @@ const RuleAccordionItem: React.FC<RuleAccordionItemProps> = ({ section: filterKe
                 <div
                     key={item.id}
                     role='listitem'
-                    className={cn('border-y border-neutral-3 relative', {
+                    className={cn('border-b border-neutral-3 relative', {
                         'bg-neutral-4': isSelected,
                     })}
                     style={style}>
@@ -226,7 +226,7 @@ const RuleAccordionItem: React.FC<RuleAccordionItemProps> = ({ section: filterKe
             value={filterKey}
             data-testid={`privilege-zones_details_${filterKey}-accordion-item`}
             className='[&[data-state=open]>div>div>button>svg]:rotate-180 sticky'>
-            <div className='w-full flex items-center justify-between border-y border-neutral-3'>
+            <div className='w-full flex items-center justify-between border-b border-neutral-3'>
                 <div className='w-full flex items-center gap-2'>
                     <Button
                         className='w-6 max-xl:px-2 max-lg:px-6'

packages/javascript/bh-shared-ui/src/views/PrivilegeZones/Details/SelectedDetailsTabs/SelectedDetailsTabs.tsx

@@ -26,7 +26,7 @@ export const SelectedDetailsTabs: FC = () => {
     const { selectedDetailsTab, setSelectedDetailsTab } = useSelectedDetailsTabsContext();
 
     return (
-        <div className='flex flex-col w-[400px]'>
+        <div className='flex flex-col basis-1/3'>
             <Tabs
                 value={selectedDetailsTab}
                 className='w-full pb-4'
@@ -49,7 +49,7 @@ export const SelectedDetailsTabs: FC = () => {
                         <CircularProgress color='primary' size={80} />
                     </div>
                 }>
-                <div className='overflow-y-auto overflow-x-hidden'>
+                <div className='overflow-y-auto overflow-x-hidden h-full rounded-lg'>
                     <SelectedDetailsTabContent
                         currentDetailsTab={selectedDetailsTab}
                         tagId={tagId}

packages/javascript/bh-shared-ui/src/views/PrivilegeZones/History/HistoryContent.tsx

@@ -91,11 +91,11 @@ const HistoryContent = () => {
                 Use the log to audit and track changes to your Zones and Labels over time. Log items past 90 days are
                 cleared.
             </p>
-            <div data-testid='history-wrapper' className='flex gap-8 mt-6 grow'>
-                <Card className='grow'>
+            <div data-testid='history-wrapper' className='flex gap-6 mt-4 h-[calc(100%-5rem)]'>
+                <Card className='flex flex-col'>
                     <CardHeader className='flex-row ml-3 justify-between items-center'>
                         <CardTitle>History Log</CardTitle>
-                        <div className='flex items-center '>
+                        <div className='flex items-center'>
                             <SearchInput id='search-pz-history' value={search} onInputChange={setSearch} />
                             <FilterDialog setFilters={setFilters} filters={filters} />
                         </div>
@@ -106,7 +106,7 @@ const HistoryContent = () => {
                         ref={scrollRef}
                         // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
                         tabIndex={0}
-                        className='overflow-y-auto h-[68dvh]'>
+                        className='overflow-y-auto mb-1'>
                         <DataTable
                             data={records}
                             TableHeaderProps={tableHeaderProps}
@@ -118,7 +118,9 @@ const HistoryContent = () => {
                         />
                     </div>
                 </Card>
-                <HistoryNote />
+                <div className='w-[400px] min-w-[400px] overflow-y-auto mb-1'>
+                    <HistoryNote />
+                </div>
             </div>
         </>
     );

packages/javascript/bh-shared-ui/src/views/PrivilegeZones/History/HistoryNote.tsx

@@ -24,15 +24,15 @@ const HistoryNote = () => {
 
     return (
         <div>
-            <Card className='flex justify-center mb-4 p-4 h-14 w-96 min-w-80 max-w-lg'>
+            <Card className='flex justify-center mb-4 p-4 h-14'>
                 <CardTitle className='flex items-center gap-2'>
                     <AppIcon.LinedPaper size={24} className='-mb-[3px]' />
                     Note
                 </CardTitle>
             </Card>
 
             {selected && (
-                <Card className='p-4 '>
+                <Card className='p-4'>
                     <CardContent>
                         <p className='text-xl'>{selected.note}</p>
                     </CardContent>

packages/javascript/bh-shared-ui/src/views/PrivilegeZones/PrivilegeZonesCypherEditor/PrivilegeZonesCypherEditor.tsx

@@ -89,7 +89,7 @@ export const PrivilegeZonesCypherEditor: FC<{
     }, [cypherQuery, onChange]);
 
     return (
-        <Card>
+        <Card className='mb-8'>
             <CardHeader>
                 <div className='flex justify-between items-center px-6 pt-3'>
                     <CardTitle>{preview ? 'Cypher Preview' : 'Cypher Rule'}</CardTitle>

packages/javascript/bh-shared-ui/src/views/PrivilegeZones/Save/RuleForm/BasicInfo.tsx

@@ -74,8 +74,8 @@ const BasicInfo: FC<{ control: Control<RuleFormInputs, any, RuleFormInputs> }> =
     if (isError) return <div>There was an error fetching the rule information.</div>;
 
     return (
-        <div className={'max-lg:w-full w-96 h-[36rem] '}>
-            <Card className={'p-3'}>
+        <div className={'max-lg:w-full w-96 h-[36rem]'}>
+            <Card className='p-3'>
                 <CardHeader className='text-xl font-bold'>Defining Rule</CardHeader>
                 <CardContent>
                     {ruleId !== '' && (