Skip to content
This repository has been archived by the owner on Mar 13, 2024. It is now read-only.

Hide bots and apps UI when managed by Apps Framework #7850

Merged
merged 9 commits into from
Apr 30, 2021
Merged

Hide bots and apps UI when managed by Apps Framework #7850

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
6def23a
Hide bots and apps UI when managed by Apps Framework
larkox Apr 9, 2021
92360f1
Fix types and i18n
larkox Apr 9, 2021
f119431
Fix snapshot
larkox Apr 9, 2021
9e2f4b0
Make OAuthAppsIDs into OAuthAppIDs
larkox Apr 9, 2021
3e0e521
Address feedback
larkox Apr 12, 2021
2363f6e
Add tests
larkox Apr 12, 2021
459f5a6
Merge branch 'master' into HideAppsBotsUI
larkox Apr 13, 2021
4741d5a
don't hide bot account management controls
mickmister Apr 29, 2021
568529c
Merge branch 'master' into HideAppsBotsUI
mickmister Apr 29, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
Hide bots and apps UI when managed by Apps Framework
  • Loading branch information
@larkox
larkox committed Apr 9, 2021
commit 6def23afddfe3f406a3b05ca3f0002ad30e1b092
6 changes: 5 additions & 1 deletion actions/integration_actions.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import request from 'superagent';
import * as IntegrationActions from 'mattermost-redux/actions/integrations';
import {getProfilesByIds} from 'mattermost-redux/actions/users';
import {getUser} from 'mattermost-redux/selectors/entities/users';
import {appsEnabled} from 'mattermost-redux/selectors/entities/apps';

const DEFAULT_PAGE_SIZE = 100;

Expand Down Expand Up @@ -97,7 +98,10 @@ export function loadProfilesForCommands(commands) {
}

export function loadOAuthAppsAndProfiles(page = 0, perPage = DEFAULT_PAGE_SIZE) {
return async (dispatch) => {
return async (dispatch, getState) => {
if (appsEnabled(getState())) {
dispatch(IntegrationActions.getAppsOAuthAppsIDs());
}
const {data} = await dispatch(IntegrationActions.getOAuthApps(page, perPage));
if (data) {
dispatch(loadProfilesForOAuthApps(data));
Expand Down
191 changes: 100 additions & 91 deletions components/integrations/bots/bot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,11 @@ type Props = {
*/
filter?: string;

/**
* Determine whether this bot is managed by the app framework
*/
fromApp: boolean;

actions: {

/**
Expand Down Expand Up @@ -193,7 +198,9 @@ export default class Bot extends React.PureComponent<Props, State> {
const displayName = this.props.bot.display_name || '';

let ownerUsername = 'plugin';
if (this.props.owner && this.props.owner.username) {
if (this.props.fromApp) {
ownerUsername = 'Apps Framework';
} else if (this.props.owner && this.props.owner.username) {
ownerUsername = this.props.owner.username;
}
const filter = this.props.filter ? this.props.filter.toLowerCase() : '';
Expand All @@ -202,104 +209,106 @@ export default class Bot extends React.PureComponent<Props, State> {
}

const tokenList = [];
Object.values(this.props.accessTokens).forEach((token) => {
let activeLink;
let disableClass = '';
let disabledText;

if (token.is_active) {
activeLink = (
<a
id={token.id + '_deactivate'}
href='#'
onClick={(e) => {
e.preventDefault();
this.disableUserAccessToken(token.id);
}}
>
<FormattedMessage
id='user.settings.tokens.deactivate'
defaultMessage='Disable'
/>
</a>);
} else {
disableClass = 'light';
disabledText = (
<span className='mr-2 light'>
<FormattedMessage
id='user.settings.tokens.deactivatedWarning'
defaultMessage='(Disabled)'
/>
</span>
);
activeLink = (
<a
id={token.id + '_activate'}
href='#'
onClick={(e) => {
e.preventDefault();
this.enableUserAccessToken(token.id);
}}
if (!this.props.fromApp) {
Object.values(this.props.accessTokens).forEach((token) => {
let activeLink;
let disableClass = '';
let disabledText;

if (token.is_active) {
activeLink = (
<a
id={token.id + '_deactivate'}
href='#'
onClick={(e) => {
e.preventDefault();
this.disableUserAccessToken(token.id);
}}
>
<FormattedMessage
id='user.settings.tokens.deactivate'
defaultMessage='Disable'
/>
</a>);
} else {
disableClass = 'light';
disabledText = (
<span className='mr-2 light'>
<FormattedMessage
id='user.settings.tokens.deactivatedWarning'
defaultMessage='(Disabled)'
/>
</span>
);
activeLink = (
<a
id={token.id + '_activate'}
href='#'
onClick={(e) => {
e.preventDefault();
this.enableUserAccessToken(token.id);
}}
>
<FormattedMessage
id='user.settings.tokens.activate'
defaultMessage='Enable'
/>
</a>
);
}

tokenList.push(
<div
key={token.id}
className='bot-list__item'
>
<FormattedMessage
id='user.settings.tokens.activate'
defaultMessage='Enable'
/>
</a>
);
}

tokenList.push(
<div
key={token.id}
className='bot-list__item'
>
<div className='item-details__row d-flex justify-content-between'>
<div className={disableClass}>
<div className='whitespace--nowrap overflow--ellipsis'>
<b>
<FormattedMessage
id='user.settings.tokens.tokenDesc'
defaultMessage='Token Description: '
/>
</b>
{token.description}
<div className='item-details__row d-flex justify-content-between'>
<div className={disableClass}>
<div className='whitespace--nowrap overflow--ellipsis'>
<b>
<FormattedMessage
id='user.settings.tokens.tokenDesc'
defaultMessage='Token Description: '
/>
</b>
{token.description}
</div>
<div className='setting-box__token-id whitespace--nowrap overflow--ellipsis'>
<b>
<FormattedMessage
id='user.settings.tokens.tokenId'
defaultMessage='Token ID: '
/>
</b>
{token.id}
</div>
</div>
<div className='setting-box__token-id whitespace--nowrap overflow--ellipsis'>
<b>
<div>
{disabledText}
{activeLink}
{' - '}
<a
id={token.id + '_delete'}
href='#'
onClick={(e) => {
e.preventDefault();
this.confirmRevokeToken(token.id);
}}
>
<FormattedMessage
id='user.settings.tokens.tokenId'
defaultMessage='Token ID: '
id='user.settings.tokens.delete'
defaultMessage='Delete'
/>
</b>
{token.id}
</a>
</div>
</div>
<div>
{disabledText}
{activeLink}
{' - '}
<a
id={token.id + '_delete'}
href='#'
onClick={(e) => {
e.preventDefault();
this.confirmRevokeToken(token.id);
}}
>
<FormattedMessage
id='user.settings.tokens.delete'
defaultMessage='Delete'
/>
</a>
</div>
</div>
</div>,
);
});
</div>,
);
});
}

let options;
if (ownerUsername !== 'plugin') {
if (ownerUsername !== 'plugin' && !this.props.fromApp) {
options = (
<div className='item-actions'>
<button
Expand Down
19 changes: 19 additions & 0 deletions components/integrations/bots/bots.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,16 @@ type Props = {
*/
bots: Record<string, BotType>;

/**
* List of bot IDs managed by the app framework
*/
appsBotIDs: string[];

/**
* Whether apps framework is enabled
*/
appsEnabled: boolean;

/**
* Map from botUserId to accessTokens.
*/
Expand Down Expand Up @@ -79,6 +89,11 @@ type Props = {
* Enable a bot
*/
enableBot: (userId: string) => Promise<ActionResult>;

/**
* Load bot IDs managed by the apps
*/
getAppsBotIDs: () => Promise<ActionResult>;
};

/**
Expand Down Expand Up @@ -124,6 +139,9 @@ export default class Bots extends React.PureComponent<Props, State> {
}
},
);
if (this.props.appsEnabled) {
this.props.actions.getAppsBotIDs();
}
}

DisabledSection(props: {hasDisabled: boolean; disabledBots: JSX.Element[]; filter?: string}): JSX.Element | null {
Expand Down Expand Up @@ -169,6 +187,7 @@ export default class Bots extends React.PureComponent<Props, State> {
accessTokens={(this.props.accessTokens && this.props.accessTokens[bot.user_id]) || {}}
actions={this.props.actions}
team={this.props.team}
fromApp={this.props.appsBotIDs.includes(bot.user_id)}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there an async operation that could momentarily have fromApp={false} before the getAppBotIDs() response comes back?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If getAppBotIDs takes too long, the user will see the whole information, and then disappear when that information finally arrives. We could keep the loading state until we have all the information. What do you think?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should keep showing the loading animation. But if the bot id fetch fails, then show all of the information.

/>
);
};
Expand Down
8 changes: 8 additions & 0 deletions components/integrations/bots/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,17 @@ import {bindActionCreators, Dispatch, ActionCreatorsMapObject} from 'redux';
import {getExternalBotAccounts} from 'mattermost-redux/selectors/entities/bots';
import {getConfig} from 'mattermost-redux/selectors/entities/general';
import {loadBots, disableBot, enableBot} from 'mattermost-redux/actions/bots';
import {getAppsBotIDs as fetchAppsBotIDs} from 'mattermost-redux/actions/integrations';
import {getAppsBotIDs} from 'mattermost-redux/selectors/entities/integrations';
import {createUserAccessToken, revokeUserAccessToken, enableUserAccessToken, disableUserAccessToken, getUserAccessTokensForUser, getUser} from 'mattermost-redux/actions/users';
import * as UserSelectors from 'mattermost-redux/selectors/entities/users';
import {GlobalState} from 'mattermost-redux/types/store';
import {GenericAction, ActionResult, ActionFunc} from 'mattermost-redux/types/actions';
import {Bot as BotType} from 'mattermost-redux/types/bots';
import {UserProfile} from 'mattermost-redux/types/users';

import {appsEnabled} from 'mattermost-redux/selectors/entities/apps';

import Bots from './bots';

function mapStateToProps(state: GlobalState) {
Expand All @@ -38,10 +42,13 @@ function mapStateToProps(state: GlobalState) {
accessTokens: state.entities.admin.userAccessTokensByUser,
owners,
users,
appsBotIDs: getAppsBotIDs(state),
appsEnabled: appsEnabled(state),
};
}

type Actions = {
getAppsBotIDs: () => Promise<{data: string[]}>;
loadBots: (page?: number, perPage?: number) => Promise<{data: BotType[]; error?: Error}>;
getUserAccessTokensForUser: (userId: string, page?: number, perPage?: number) => void;
createUserAccessToken: (userId: string, description: string) => Promise<{
Expand All @@ -59,6 +66,7 @@ type Actions = {
function mapDispatchToProps(dispatch: Dispatch<GenericAction>) {
return {
actions: bindActionCreators<ActionCreatorsMapObject<ActionFunc>, Actions>({
getAppsBotIDs: fetchAppsBotIDs,
hanzei marked this conversation as resolved.
Show resolved Hide resolved
loadBots,
getUserAccessTokensForUser,
createUserAccessToken,
Expand Down
Loading