changing admin accessibility on dataset page (#182)

* changing admin accessibility on dataset page

* minor change

catalog-rest-service/src/main/resources/ui/src/components/common/non-admin-action/NonAdminAction.tsx

@@ -4,9 +4,10 @@ import PopOver from '../popover/PopOver';
 
 type Props = {
   children: React.ReactNode;
-  title: string;
+  title?: string;
   position?: 'top' | 'right' | 'bottom' | 'left';
   isOwner?: boolean;
+  html?: React.ReactElement;
 };
 
 const NonAdminAction = ({
@@ -14,6 +15,7 @@ const NonAdminAction = ({
   position = 'top',
   title,
   isOwner = false,
+  html,
 }: Props) => {
   const { isAuthDisabled, isAdminUser } = useAuth();
 
@@ -29,7 +31,11 @@ const NonAdminAction = ({
       {isAdminUser || isOwner || isAuthDisabled ? (
         <span>{children}</span>
       ) : (
-        <PopOver position={position} title={title} trigger="mouseenter">
+        <PopOver
+          html={html}
+          position={position}
+          title={title}
+          trigger="mouseenter">
           <span className="disable-cta">
             <span
               onClickCapture={handleCapturedEvent}

catalog-rest-service/src/main/resources/ui/src/components/common/rich-text-editor/RichTextEditorPreviewer.tsx

@@ -42,7 +42,7 @@ const RichTextEditorPreviewer = ({ markdown }: { markdown: string }) => {
           ul: ({ node, children, ...props }) => {
             const { ordered: _ordered, ...rest } = props;
             return (
-              <ul style={{ marginLeft: '14px' }} {...rest}>
+              <ul style={{ marginLeft: '16px' }} {...rest}>
                 {children}
               </ul>
             );

catalog-rest-service/src/main/resources/ui/src/components/my-data-details/ManageTab.tsx

@@ -24,6 +24,7 @@ import { getUserTeams } from '../../utils/CommonUtils';
 import SVGIcons from '../../utils/SvgUtils';
 import { Button } from '../buttons/Button/Button';
 import CardListItem from '../card-list/CardListItem/CardWithListItems';
+import NonAdminAction from '../common/non-admin-action/NonAdminAction';
 import DropDownList from '../dropdown/DropDownList';
 import Loader from '../Loader/Loader';
 
@@ -34,12 +35,14 @@ type Props = {
     owner: TableDetail['owner'],
     tier: TableDetail['tier']
   ) => Promise<void>;
+  hasEditAccess: boolean;
 };
 
 const ManageTab: FunctionComponent<Props> = ({
   currentTier = '',
   currentUser = '',
   onSave,
+  hasEditAccess,
 }: Props) => {
   const { data } = cardData;
   const [loading, setLoading] = useState<boolean>(false);
@@ -162,12 +165,22 @@ const ManageTab: FunctionComponent<Props> = ({
       </div>
       <div className="tw-flex tw-flex-col">
         {data.map((card, i) => (
-          <CardListItem
+          <NonAdminAction
-            card={card}
+            html={
-            isActive={activeTier === card.id}
+              <>
+                <p>You need ownership to perform this action</p>
+                <p>Claim ownership from above </p>
+              </>
+            }
+            isOwner={hasEditAccess || Boolean(owner)}
             key={i}
-            onSelect={handleCardSelection}
+            position="left">
-          />
+            <CardListItem
+              card={card}
+              isActive={activeTier === card.id}
+              onSelect={handleCardSelection}
+            />
+          </NonAdminAction>
         ))}
       </div>
       <div className="tw-mt-6 tw-text-right">

catalog-rest-service/src/main/resources/ui/src/pages/my-data-details/index.tsx

@@ -449,8 +449,8 @@ const MyDataDetailsPage = () => {
                 {'Schema '}
               </button>
               <NonAdminAction
-                isOwner={hasEditAccess()}
+                isOwner={!owner || hasEditAccess()}
-                title="Only Owner and Admin is allowed for the action">
+                title="You need ownership to perform this action">
                 <button
                   className={getTabClasses(6, activeTab)}
                   data-testid="tab"
@@ -472,8 +472,15 @@ const MyDataDetailsPage = () => {
                       </span>
                       <div className="tw-flex-initial">
                         <NonAdminAction
-                          isOwner={hasEditAccess()}
+                          html={
-                          title="Only Owner and Admin is allowed for the action">
+                            <>
+                              <p>You need ownership to perform this action</p>
+                              {!owner ? (
+                                <p>Claim ownership in Manage </p>
+                              ) : null}
+                            </>
+                          }
+                          isOwner={hasEditAccess()}>
                           <button
                             className="focus:tw-outline-none"
                             onClick={onDescriptionEdit}>
@@ -535,6 +542,7 @@ const MyDataDetailsPage = () => {
               <ManageTab
                 currentTier={tier}
                 currentUser={owner?.id}
+                hasEditAccess={hasEditAccess()}
                 onSave={onSettingsUpdate}
               />
             )}