update database-collection

Author: mabaasit

packages/databases-collections-list/src/collections.tsx

@@ -19,6 +19,7 @@ type Collection = {
   index_size: number;
   properties: { id: string }[];
   source?: Collection;
+  ns_source: 'provisioned' | 'privileges';
 };
 
 const COLLECTION_CARD_WIDTH = spacing[6] * 4;
@@ -176,6 +177,7 @@ const CollectionsList: React.FunctionComponent<{
               name={coll.name}
               type="collection"
               status={coll.status}
+              isProvisioned={coll.ns_source === 'provisioned'}
               data={data}
               badges={badges}
               onItemClick={onItemClick}

packages/databases-collections-list/src/databases.tsx

@@ -13,6 +13,7 @@ type Database = {
   data_size: number;
   index_count: number;
   collectionsLength: number;
+  ns_source: 'provisioned' | 'privileges' | 'roles';
 };
 
 const DATABASE_CARD_WIDTH = spacing[6] * 4;
@@ -68,6 +69,7 @@ const DatabasesList: React.FunctionComponent<{
             type="database"
             viewType={viewType}
             status={db.status}
+            isProvisioned={db.ns_source === 'provisioned'}
             data={[
               {
                 label: 'Storage size',

packages/databases-collections-list/src/namespace-card.tsx

@@ -32,13 +32,29 @@ const cardTitleGroup = css({
   display: 'flex',
   alignItems: 'center',
   gap: spacing[3],
-  marginBottom: spacing[2],
 });
 
 const CardTitleGroup: React.FunctionComponent = ({ children }) => {
   return <div className={cardTitleGroup}>{children}</div>;
 };
 
+const inactiveLightStyles = css({
+  color: palette.gray.dark1,
+});
+
+const inactiveDarkStyles = css({
+  color: palette.gray.light1,
+});
+
+const inactiveCardStyles = css({
+  borderStyle: 'dashed',
+  borderWidth: 2,
+});
+
+const tooltipTriggerStyles = css({
+  display: 'flex',
+});
+
 const cardNameWrapper = css({
   // Workaround for uncollapsible text in flex children
   minWidth: 0,
@@ -64,15 +80,21 @@ const cardName = css({
   fontWeight: '600 !important' as unknown as number,
 });
 
-const CardName: React.FunctionComponent<{ children: string }> = ({
-  children,
-}) => {
+const CardName: React.FunctionComponent<{
+  children: string;
+  isProvisioned: boolean;
+}> = ({ children, isProvisioned }) => {
   const darkMode = useDarkMode();
   return (
     <div title={children} className={cardNameWrapper}>
       <Subtitle
         as="div"
-        className={cx(cardName, darkMode ? cardNameDark : cardNameLight)}
+        className={cx(
+          cardName,
+          darkMode ? cardNameDark : cardNameLight,
+          !isProvisioned && !darkMode && inactiveLightStyles,
+          !isProvisioned && darkMode && inactiveDarkStyles
+        )}
       >
         {children}
       </Subtitle>
@@ -163,6 +185,7 @@ export type NamespaceItemCardProps = {
   status: 'initial' | 'fetching' | 'refreshing' | 'ready' | 'error';
   data: DataProp[];
   badges?: BadgeProp[] | null;
+  isProvisioned: boolean;
   onItemClick(id: string): void;
   onItemDeleteClick?: (id: string) => void;
 };
@@ -195,9 +218,11 @@ export const NamespaceItemCard: React.FunctionComponent<
   onItemDeleteClick,
   badges = null,
   viewType,
+  isProvisioned,
   ...props
 }) => {
   const readOnly = usePreference('readOnly');
+  const darkMode = useDarkMode();
   const [hoverProps, isHovered] = useHoverState();
   const [focusProps, focusState] = useFocusState();
 
@@ -207,7 +232,7 @@ export const NamespaceItemCard: React.FunctionComponent<
 
   const hasDeleteHandler = !!onItemDeleteClick;
   const cardActions: ItemAction<NamespaceAction>[] = useMemo(() => {
-    return readOnly || !hasDeleteHandler
+    return readOnly || !hasDeleteHandler || !isProvisioned
       ? []
       : [
           {
@@ -216,7 +241,7 @@ export const NamespaceItemCard: React.FunctionComponent<
             icon: 'Trash',
           },
         ];
-  }, [type, readOnly, hasDeleteHandler]);
+  }, [type, readOnly, isProvisioned, hasDeleteHandler]);
 
   const defaultActionProps = useDefaultAction(onDefaultAction);
 
@@ -238,7 +263,16 @@ export const NamespaceItemCard: React.FunctionComponent<
   );
 
   const cardProps = mergeProps(
-    { className: card },
+    {
+      className: cx(
+        card,
+        !isProvisioned && [
+          !darkMode && inactiveLightStyles,
+          darkMode && inactiveDarkStyles,
+          inactiveCardStyles,
+        ]
+      ),
+    },
     defaultActionProps,
     hoverProps,
     focusProps,
@@ -262,7 +296,22 @@ export const NamespaceItemCard: React.FunctionComponent<
       {...cardProps}
     >
       <CardTitleGroup>
-        <CardName>{name}</CardName>
+        <CardName isProvisioned={isProvisioned}>{name}</CardName>
+
+        {!isProvisioned && (
+          <Tooltip
+            align="bottom"
+            justify="start"
+            trigger={
+              <div className={tooltipTriggerStyles}>
+                <Icon glyph={'InfoWithCircle'} />
+              </div>
+            }
+          >
+            You have privileges to this namespace, but it is not in your list of
+            current namespaces
+          </Tooltip>
+        )}
 
         {viewType === 'list' && badgesGroup}
 
@@ -283,7 +332,7 @@ export const NamespaceItemCard: React.FunctionComponent<
             <NamespaceParam
               key={idx}
               label={label}
-              hint={hint}
+              hint={isProvisioned && hint}
               value={value}
               status={status}
               viewType={viewType}