From 055f629cab674e640e4fa14945c5a2fa746ccf60 Mon Sep 17 00:00:00 2001
From: Shailesh Parmar <shailesh.parmar.webdev@gmail.com>
Date: Fri, 12 Nov 2021 22:13:30 +0530
Subject: [PATCH] Improvement: made UI of disable button for teams and tags
 page same as services page (#1170)

---
 .../main/resources/ui/src/pages/tags/index.tsx    | 15 +++++++++++----
 .../main/resources/ui/src/pages/teams/index.tsx   |  9 +++++++--
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/catalog-rest-service/src/main/resources/ui/src/pages/tags/index.tsx b/catalog-rest-service/src/main/resources/ui/src/pages/tags/index.tsx
index 360990c98a2..01f24ac68c1 100644
--- a/catalog-rest-service/src/main/resources/ui/src/pages/tags/index.tsx
+++ b/catalog-rest-service/src/main/resources/ui/src/pages/tags/index.tsx
@@ -16,6 +16,7 @@
 */
 
 import { AxiosError, AxiosResponse } from 'axios';
+import classNames from 'classnames';
 import { EntityTags } from 'Models';
 import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
@@ -44,12 +45,14 @@ import {
   TagCategoryType,
 } from '../../generated/api/tags/createTagCategory';
 import { TagCategory, TagClass } from '../../generated/entity/tags/tagCategory';
+import { useAuth } from '../../hooks/authHooks';
 import { isEven } from '../../utils/CommonUtils';
 import SVGIcons from '../../utils/SvgUtils';
 import { getTagCategories, getTaglist } from '../../utils/TagsUtils';
 import Form from './Form';
 // import { Tag, TagsCategory } from './tagsTypes';
 const TagsPage = () => {
+  const { isAuthDisabled, isAdminUser } = useAuth();
   const [categories, setCategoreis] = useState<Array<TagCategory>>([]);
   const [currentCategory, setCurrentCategory] = useState<TagCategory>();
   const [isEditCategory, setIsEditCategory] = useState<boolean>(false);
@@ -183,7 +186,9 @@ const TagsPage = () => {
           <h6 className="tw-heading">Tag Categories</h6>
           <NonAdminAction position="bottom" title={TITLE_FOR_NON_ADMIN_ACTION}>
             <Button
-              className="tw-h-7 tw-px-2"
+              className={classNames('tw-h-7 tw-px-2', {
+                'tw-opacity-40': !isAdminUser && !isAuthDisabled,
+              })}
               data-testid="add-category"
               size="small"
               theme="primary"
@@ -238,9 +243,11 @@ const TagsPage = () => {
                   </div>
                   <NonAdminAction
                     position="bottom"
-                    title="Only Admin is allowed for the action">
+                    title={TITLE_FOR_NON_ADMIN_ACTION}>
                     <Button
-                      className="tw-h-8 tw-rounded tw-mb-2"
+                      className={classNames('tw-h-8 tw-rounded tw-mb-2', {
+                        'tw-opacity-40': !isAdminUser && !isAuthDisabled,
+                      })}
                       data-testid="add-new-tag-button"
                       size="small"
                       theme="primary"
@@ -261,7 +268,7 @@ const TagsPage = () => {
                   <div className="tw-flex-initial">
                     <NonAdminAction
                       position="bottom"
-                      title="Only Admin is allowed for the action">
+                      title={TITLE_FOR_NON_ADMIN_ACTION}>
                       <button
                         className="focus:tw-outline-none"
                         data-testid="add-description"
diff --git a/catalog-rest-service/src/main/resources/ui/src/pages/teams/index.tsx b/catalog-rest-service/src/main/resources/ui/src/pages/teams/index.tsx
index 9e767f9d51d..eb91beda4e3 100644
--- a/catalog-rest-service/src/main/resources/ui/src/pages/teams/index.tsx
+++ b/catalog-rest-service/src/main/resources/ui/src/pages/teams/index.tsx
@@ -16,6 +16,7 @@
 */
 
 import { AxiosError, AxiosResponse } from 'axios';
+import classNames from 'classnames';
 import { compare } from 'fast-json-patch';
 import { observer } from 'mobx-react';
 import React, { useEffect, useState } from 'react';
@@ -281,7 +282,9 @@ const TeamsPage = () => {
           <h6 className="tw-heading">Teams</h6>
           <NonAdminAction position="bottom" title={TITLE_FOR_NON_ADMIN_ACTION}>
             <Button
-              className="tw-h-7 tw-px-2"
+              className={classNames('tw-h-7 tw-px-2', {
+                'tw-opacity-40': !isAdminUser && !isAuthDisabled,
+              })}
               data-testid="add-teams"
               size="small"
               theme="primary"
@@ -391,7 +394,9 @@ const TeamsPage = () => {
                       position="bottom"
                       title={TITLE_FOR_NON_ADMIN_ACTION}>
                       <Button
-                        className="tw-h-8 tw-rounded tw-mb-2"
+                        className={classNames('tw-h-8 tw-rounded tw-mb-2', {
+                          'tw-opacity-40': !isAdminUser && !isAuthDisabled,
+                        })}
                         data-testid="add-new-user-button"
                         size="small"
                         theme="primary"