Fix #4422: UI: Fix ownership text in Manage tab (#4423)

This commit is contained in:
Vivek Ratnavel Subramanian 2022-04-23 13:54:59 -07:00 committed by GitHub
parent 8291a09b0d
commit 64f6ec4e65
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 41 additions and 26 deletions

View File

@ -93,7 +93,7 @@ export const AuthProvider = ({
const oidcUserToken = localStorage.getItem(oidcTokenKey); const oidcUserToken = localStorage.getItem(oidcTokenKey);
const [isUserAuthenticated, setIsUserAuthenticated] = useState( const [isUserAuthenticated, setIsUserAuthenticated] = useState(
Boolean(oidcUserToken || localStorage.getItem('okta-token-storage')) Boolean(oidcUserToken)
); );
const [isAuthDisabled, setIsAuthDisabled] = useState(false); const [isAuthDisabled, setIsAuthDisabled] = useState(false);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);

View File

@ -309,6 +309,7 @@ const ManageTab: FunctionComponent<ManageProps> = ({
{!hideOwner && ( {!hideOwner && (
<OwnerWidget <OwnerWidget
allowTeamOwner={allowTeamOwner} allowTeamOwner={allowTeamOwner}
entityType={entityType}
handleIsJoinable={handleIsJoinable} handleIsJoinable={handleIsJoinable}
handleOwnerSelection={handleOwnerSelection} handleOwnerSelection={handleOwnerSelection}
handleSelectOwnerDropdown={() => handleSelectOwnerDropdown={() =>

View File

@ -19,6 +19,7 @@ import React, {
useCallback, useCallback,
useState, useState,
} from 'react'; } from 'react';
import { getTitleCase } from '../../../utils/EntityUtils';
import { Button } from '../../buttons/Button/Button'; import { Button } from '../../buttons/Button/Button';
import Loader from '../../Loader/Loader'; import Loader from '../../Loader/Loader';
@ -74,7 +75,9 @@ const EntityDeleteModal: FC<Prop> = ({
<div className={classNames('tw-modal-body')} data-testid="body-text"> <div className={classNames('tw-modal-body')} data-testid="body-text">
<p className="tw-mb-2"> <p className="tw-mb-2">
{bodyText || {bodyText ||
`Once you delete this ${entityType}, it will be removed permanently`} `Once you delete this ${getTitleCase(
entityType
)}, it will be removed permanently`}
</p> </p>
<p className="tw-mb-2"> <p className="tw-mb-2">
Type <strong>DELETE</strong> to confirm Type <strong>DELETE</strong> to confirm

View File

@ -18,6 +18,7 @@ import { deleteEntity } from '../../../axiosAPIs/miscAPI';
import { ENTITY_DELETE_STATE } from '../../../constants/entity.constants'; import { ENTITY_DELETE_STATE } from '../../../constants/entity.constants';
import { EntityType } from '../../../enums/entity.enum'; import { EntityType } from '../../../enums/entity.enum';
import jsonData from '../../../jsons/en'; import jsonData from '../../../jsons/en';
import { getTitleCase } from '../../../utils/EntityUtils';
import { showErrorToast, showSuccessToast } from '../../../utils/ToastUtils'; import { showErrorToast, showSuccessToast } from '../../../utils/ToastUtils';
import EntityDeleteModal from '../../Modals/EntityDeleteModal/EntityDeleteModal'; import EntityDeleteModal from '../../Modals/EntityDeleteModal/EntityDeleteModal';
import DeleteWidgetBody from './DeleteWidgetBody'; import DeleteWidgetBody from './DeleteWidgetBody';
@ -48,8 +49,12 @@ const DeleteWidget = ({
useState<typeof ENTITY_DELETE_STATE>(ENTITY_DELETE_STATE); useState<typeof ENTITY_DELETE_STATE>(ENTITY_DELETE_STATE);
const prepareDeleteMessage = (softDelete = false) => { const prepareDeleteMessage = (softDelete = false) => {
const softDeleteText = `Soft deleting will deactivate the ${entityName}. This will disable any discovery, read or write operations on ${entityName}`; const softDeleteText = `Soft deleting will deactivate the ${getTitleCase(
const hardDeleteText = `Once you delete this ${entityType}, it will be removed permanently`; entityName
)}. This will disable any discovery, read or write operations on ${entityName}`;
const hardDeleteText = `Once you delete this ${getTitleCase(
entityType
)}, it will be removed permanently`;
return softDelete ? softDeleteText : hardDeleteText; return softDelete ? softDeleteText : hardDeleteText;
}; };
@ -146,7 +151,7 @@ const DeleteWidget = ({
buttonText="Soft delete" buttonText="Soft delete"
description={prepareDeleteMessage(true)} description={prepareDeleteMessage(true)}
hasPermission={hasPermission} hasPermission={hasPermission}
header={`Soft delete ${entityType} ${entityName}`} header={`Soft delete ${getTitleCase(entityType)} ${entityName}`}
isOwner={isAdminUser} isOwner={isAdminUser}
onClick={() => handleOnEntityDelete(true)} onClick={() => handleOnEntityDelete(true)}
/> />
@ -157,7 +162,7 @@ const DeleteWidget = ({
buttonText="Delete" buttonText="Delete"
description={prepareDeleteMessage()} description={prepareDeleteMessage()}
hasPermission={hasPermission} hasPermission={hasPermission}
header={`Delete ${entityType} ${entityName}`} header={`Delete ${getTitleCase(entityType)} ${entityName}`}
isOwner={isAdminUser} isOwner={isAdminUser}
onClick={() => handleOnEntityDelete(false)} onClick={() => handleOnEntityDelete(false)}
/> />

View File

@ -17,6 +17,7 @@ import { isUndefined } from 'lodash';
import React, { Fragment } from 'react'; import React, { Fragment } from 'react';
import { Operation } from '../../../generated/entity/policies/policy'; import { Operation } from '../../../generated/entity/policies/policy';
import { useAuth } from '../../../hooks/authHooks'; import { useAuth } from '../../../hooks/authHooks';
import { getTitleCase } from '../../../utils/EntityUtils';
import { Button } from '../../buttons/Button/Button'; import { Button } from '../../buttons/Button/Button';
import DropDownList from '../../dropdown/DropDownList'; import DropDownList from '../../dropdown/DropDownList';
import Loader from '../../Loader/Loader'; import Loader from '../../Loader/Loader';
@ -32,6 +33,7 @@ interface OwnerWidgetProps {
teamJoinable?: boolean; teamJoinable?: boolean;
allowTeamOwner?: boolean; allowTeamOwner?: boolean;
ownerName: string; ownerName: string;
entityType?: string;
statusOwner: Status; statusOwner: Status;
owner: string; owner: string;
listOwners: { listOwners: {
@ -54,6 +56,7 @@ const OwnerWidget = ({
isAuthDisabled, isAuthDisabled,
hasEditAccess, hasEditAccess,
ownerName, ownerName,
entityType,
listVisible, listVisible,
owner, owner,
allowTeamOwner, allowTeamOwner,
@ -89,6 +92,11 @@ const OwnerWidget = ({
} }
}; };
const ownerDescription =
entityType === 'team'
? 'The owner of the team can manage the team by adding or removing users. Add or update Team ownership here'
: `Add or update ${getTitleCase(entityType)} ownership here`;
return ( return (
<Fragment> <Fragment>
<div className="tw-mt-1 tw-bg-white"> <div className="tw-mt-1 tw-bg-white">
@ -97,8 +105,7 @@ const OwnerWidget = ({
<div className="tw-w-10/12"> <div className="tw-w-10/12">
<p className="tw-text-sm tw-mb-1 tw-font-medium">Owner</p> <p className="tw-text-sm tw-mb-1 tw-font-medium">Owner</p>
<p className="tw-text-grey-muted tw-text-xs"> <p className="tw-text-grey-muted tw-text-xs">
The Team owner details are found here. Team ownership can be {ownerDescription}
changed
</p> </p>
</div> </div>

View File

@ -154,11 +154,11 @@ const jsonData = {
}, },
label: { label: {
'delete-entity-text': 'delete-entity-text':
'Once you delete this entity, it would be removed permanently.', 'Once you delete this entity, it will be removed permanently.',
}, },
message: { message: {
'no-services': 'No services', 'no-services': 'No services',
'fail-to-deploy-pipeline': 'Failed to deploy Ingestion Pipeline', 'fail-to-deploy-pipeline': 'Failed to deploy Ingestion Pipeline!',
}, },
}; };

View File

@ -12,7 +12,14 @@
*/ */
import classNames from 'classnames'; import classNames from 'classnames';
import { isEmpty, isNil, isString, isUndefined } from 'lodash'; import {
camelCase,
isEmpty,
isNil,
isString,
isUndefined,
startCase,
} from 'lodash';
import { Bucket, ExtraInfo, LeafNodes, LineagePos } from 'Models'; import { Bucket, ExtraInfo, LeafNodes, LineagePos } from 'Models';
import React from 'react'; import React from 'react';
import Avatar from '../components/common/avatar/Avatar'; import Avatar from '../components/common/avatar/Avatar';
@ -128,11 +135,7 @@ export const getEntityOverview = (
name: 'Owner', name: 'Owner',
value: ownerValue?.displayName || ownerValue?.name || '--', value: ownerValue?.displayName || ownerValue?.name || '--',
url: getTeamAndUserDetailsPath(owner?.name || ''), url: getTeamAndUserDetailsPath(owner?.name || ''),
isLink: ownerValue isLink: ownerValue ? ownerValue.type === 'team' : false,
? ownerValue.type === 'team'
? true
: false
: false,
}, },
{ {
name: 'Tier', name: 'Tier',
@ -206,11 +209,7 @@ export const getEntityOverview = (
name: 'Owner', name: 'Owner',
value: ownerValue?.displayName || ownerValue?.name || '--', value: ownerValue?.displayName || ownerValue?.name || '--',
url: getTeamAndUserDetailsPath(owner?.name || ''), url: getTeamAndUserDetailsPath(owner?.name || ''),
isLink: ownerValue isLink: ownerValue ? ownerValue.type === 'team' : false,
? ownerValue.type === 'team'
? true
: false
: false,
}, },
{ {
name: 'Tier', name: 'Tier',
@ -254,11 +253,7 @@ export const getEntityOverview = (
name: 'Owner', name: 'Owner',
value: ownerValue?.displayName || ownerValue?.name || '--', value: ownerValue?.displayName || ownerValue?.name || '--',
url: getTeamAndUserDetailsPath(owner?.name || ''), url: getTeamAndUserDetailsPath(owner?.name || ''),
isLink: ownerValue isLink: ownerValue ? ownerValue.type === 'team' : false,
? ownerValue.type === 'team'
? true
: false
: false,
}, },
{ {
name: 'Tier', name: 'Tier',
@ -543,3 +538,7 @@ export const isColumnTestSupported = (dataType: string) => {
getDataTypeString(dataType) as PrimaryTableDataTypes getDataTypeString(dataType) as PrimaryTableDataTypes
); );
}; };
export const getTitleCase = (text?: string) => {
return text ? startCase(camelCase(text)) : '';
};