binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-630] refactor: empty state (#3858)

Browse source 
* refactor: empty state global config file added and empty state component refactor

* refactor: empty state component refactor

* chore: empty state refactor

* chore: empty state config file updated

* chore: empty state action button permission logic updated

* chore: empty state config file updated

* chore: cycle and module empty filter state updated

* chore: empty state asset updated

* chore: empty state config file updated

* chore: empty state config file updated

* chore: empty state component improvement

* chore: empty state action button improvement

* fix: merge conflict
This commit is contained in:
Anmol Singh Bhatia 2024-03-06 20:16:54 +05:30 • committed by GitHub
parent 4861be2773
commit a08f401452
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
32 changed files with 759 additions and 1155 deletions
Download patch file Download diff file Expand all files Collapse all files

32
web/pages/[workspaceSlug]/settings/api-tokens.tsx
View file

@ -1,29 +1,28 @@
import React, { useState } from "react";
import { observer } from "mobx-react-lite";
import { useRouter } from "next/router";
import { useTheme } from "next-themes";
import useSWR from "swr";
// store hooks
import { Button } from "@plane/ui";
import { ApiTokenListItem, CreateApiTokenModal } from "components/api-token";
import { PageHead } from "components/core";
import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
import { WorkspaceSettingHeader } from "components/headers";
import { APITokenSettingsLoader } from "components/ui";
import { WORKSPACE_SETTINGS_EMPTY_STATE_DETAILS } from "constants/empty-state";
import { API_TOKENS_LIST } from "constants/fetch-keys";
import { EUserWorkspaceRoles } from "constants/workspace";
import { useUser, useWorkspace } from "hooks/store";
// layouts
import { AppLayout } from "layouts/app-layout";
import { WorkspaceSettingLayout } from "layouts/settings-layout";
// component
import { APITokenSettingsLoader } from "components/ui";
import { WorkspaceSettingHeader } from "components/headers";
import { ApiTokenListItem, CreateApiTokenModal } from "components/api-token";
import { EmptyState } from "components/empty-state";
import { PageHead } from "components/core";
// ui
import { Button } from "@plane/ui";
// services
import { NextPageWithLayout } from "lib/types";
import { APITokenService } from "services/api_token.service";
// types
// constants
import { API_TOKENS_LIST } from "constants/fetch-keys";
import { EUserWorkspaceRoles } from "constants/workspace";
import { EmptyStateType } from "constants/empty-state";
const apiTokenService = new APITokenService();
@ -33,12 +32,9 @@ const ApiTokensPage: NextPageWithLayout = observer(() => {
// router
const router = useRouter();
const { workspaceSlug } = router.query;
// theme
const { resolvedTheme } = useTheme();
// store hooks
const {
membership: { currentWorkspaceRole },
currentUser,
} = useUser();
const { currentWorkspace } = useWorkspace();
@ -48,9 +44,6 @@ const ApiTokensPage: NextPageWithLayout = observer(() => {
workspaceSlug && isAdmin ? apiTokenService.getApiTokens(workspaceSlug.toString()) : null
);
const emptyStateDetail = WORKSPACE_SETTINGS_EMPTY_STATE_DETAILS["api-tokens"];
const isLightMode = resolvedTheme ? resolvedTheme === "light" : currentUser?.theme.theme === "light";
const emptyStateImage = getEmptyStateImagePath("workspace-settings", "api-tokens", isLightMode);
const pageTitle = currentWorkspace?.name ? `${currentWorkspace.name} - API Tokens` : undefined;
if (!isAdmin)
@ -95,12 +88,7 @@ const ApiTokensPage: NextPageWithLayout = observer(() => {
</Button>
</div>
<div className="h-full w-full flex items-center justify-center">
<EmptyState
title={emptyStateDetail.title}
description={emptyStateDetail.description}
image={emptyStateImage}
size="lg"
/>
<EmptyState type={EmptyStateType.WORKSPACE_SETTINGS_API_TOKENS} />
</div>
</div>
)}

29
web/pages/[workspaceSlug]/settings/webhooks/index.tsx
View file

@ -1,25 +1,24 @@
import React, { useEffect, useState } from "react";
import { observer } from "mobx-react-lite";
import { useRouter } from "next/router";
import { useTheme } from "next-themes";
import useSWR from "swr";
// hooks
import { Button } from "@plane/ui";
import { PageHead } from "components/core";
import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
import { WorkspaceSettingHeader } from "components/headers";
import { WebhookSettingsLoader } from "components/ui";
import { WebhooksList, CreateWebhookModal } from "components/web-hooks";
import { WORKSPACE_SETTINGS_EMPTY_STATE_DETAILS } from "constants/empty-state";
import { useUser, useWebhook, useWorkspace } from "hooks/store";
// layouts
import { AppLayout } from "layouts/app-layout";
import { WorkspaceSettingLayout } from "layouts/settings-layout";
// components
import { PageHead } from "components/core";
import { WorkspaceSettingHeader } from "components/headers";
import { WebhookSettingsLoader } from "components/ui";
import { WebhooksList, CreateWebhookModal } from "components/web-hooks";
import { EmptyState } from "components/empty-state";
// ui
import { Button } from "@plane/ui";
// types
import { NextPageWithLayout } from "lib/types";
// constants
import { EmptyStateType } from "constants/empty-state";
const WebhooksListPage: NextPageWithLayout = observer(() => {
// states
@ -27,12 +26,9 @@ const WebhooksListPage: NextPageWithLayout = observer(() => {
// router
const router = useRouter();
const { workspaceSlug } = router.query;
// theme
const { resolvedTheme } = useTheme();
// mobx store
const {
membership: { currentWorkspaceRole },
currentUser,
} = useUser();
const { fetchWebhooks, webhooks, clearSecretKey, webhookSecretKey, createWebhook } = useWebhook();
const { currentWorkspace } = useWorkspace();
@ -44,10 +40,6 @@ const WebhooksListPage: NextPageWithLayout = observer(() => {
workspaceSlug && isAdmin ? () => fetchWebhooks(workspaceSlug.toString()) : null
);
const emptyStateDetail = WORKSPACE_SETTINGS_EMPTY_STATE_DETAILS["webhooks"];
const isLightMode = resolvedTheme ? resolvedTheme === "light" : currentUser?.theme.theme === "light";
const emptyStateImage = getEmptyStateImagePath("workspace-settings", "webhooks", isLightMode);
const pageTitle = currentWorkspace?.name ? `${currentWorkspace.name} - Webhooks` : undefined;
// clear secret key when modal is closed.
@ -99,12 +91,7 @@ const WebhooksListPage: NextPageWithLayout = observer(() => {
</Button>
</div>
<div className="h-full w-full flex items-center justify-center">
<EmptyState
title={emptyStateDetail.title}
description={emptyStateDetail.description}
image={emptyStateImage}
size="lg"
/>
<EmptyState type={EmptyStateType.WORKSPACE_SETTINGS_WEBHOOKS} />
</div>
</div>
)}