From 5caa0abc12acad8e12acd58f039c97ff0cd9e3e7 Mon Sep 17 00:00:00 2001 From: Carina Ursu Date: Wed, 10 May 2023 14:07:13 -0700 Subject: [PATCH] fix: content panel captures focus (#754) * fix: content panel captures focus Signed-off-by: Carina Ursu * chore: lint Signed-off-by: Carina Ursu --------- Signed-off-by: Carina Ursu --- packages/console/package.json | 2 +- .../components/Entities/EntityDescription.tsx | 30 ++++++++++++------- .../components/Task/SimpleTaskInterface.tsx | 6 ++-- .../Workflow/useWorkflowInfoItem.ts | 7 +++-- .../__stories__/WorkflowGraph.stories.tsx | 2 +- .../src/components/common/DetailsPanel.tsx | 3 ++ .../console/src/components/data/apiContext.ts | 4 +-- .../src/components/hooks/useDescription.ts | 26 +++++++++------- .../src/models/DescriptionEntity/api.ts | 9 +++--- .../src/models/DescriptionEntity/types.ts | 13 ++++---- website/package.json | 2 +- yarn.lock | 4 +-- 12 files changed, 63 insertions(+), 45 deletions(-) diff --git a/packages/console/package.json b/packages/console/package.json index 8980ff2c3..c90846828 100644 --- a/packages/console/package.json +++ b/packages/console/package.json @@ -1,6 +1,6 @@ { "name": "@flyteorg/console", - "version": "0.0.27", + "version": "0.0.28", "description": "Flyteconsole main app module", "main": "./dist/index.js", "module": "./lib/index.js", diff --git a/packages/console/src/components/Entities/EntityDescription.tsx b/packages/console/src/components/Entities/EntityDescription.tsx index a76734f7a..245b2aaff 100644 --- a/packages/console/src/components/Entities/EntityDescription.tsx +++ b/packages/console/src/components/Entities/EntityDescription.tsx @@ -18,8 +18,8 @@ import { TaskClosure } from 'models/Task/types'; import { executionFilterGenerator } from './generators'; import { Row } from './Row'; import t, { patternKey } from './strings'; -import {entityStrings, entitySections} from './constants'; -import {useDescriptionEntityList} from "../hooks/useDescription"; +import { entityStrings, entitySections } from './constants'; +import { useDescriptionEntityList } from '../hooks/useDescription'; const Skeleton = reactLoadingSkeleton; @@ -116,7 +116,7 @@ export const EntityDescription: React.FC<{ }, ); - const descriptionEntity = descriptionEntities?.value?.[0] + const descriptionEntity = descriptionEntities?.value?.[0]; const hasDescription = descriptionEntity?.longDescription.value.length !== 0; const hasLink = !!descriptionEntity?.sourceCode?.link; const sections = entitySections[id.resourceType]; @@ -150,15 +150,23 @@ export const EntityDescription: React.FC<{ )} - {hasLink && ( - - {hasLink - ?{descriptionEntity?.sourceCode?.link} - : t( - patternKey('noGithubLink', entityStrings[id.resourceType]), + {hasLink && ( + + + {hasLink ? ( + + {descriptionEntity?.sourceCode?.link} + + ) : ( + t(patternKey('noGithubLink', entityStrings[id.resourceType])) )} - - )} + + + )} {sections?.descriptionInputsAndOutputs && } diff --git a/packages/console/src/components/Task/SimpleTaskInterface.tsx b/packages/console/src/components/Task/SimpleTaskInterface.tsx index 28416e1d9..aa2d3e6a7 100644 --- a/packages/console/src/components/Task/SimpleTaskInterface.tsx +++ b/packages/console/src/components/Task/SimpleTaskInterface.tsx @@ -66,7 +66,7 @@ const VariablesList: React.FC<{ variables: Record }> = ({ export const SimpleTaskInterface: React.FC<{ task: Task }> = ({ task }) => { const { inputs = emptyVariables, outputs = emptyVariables } = task.closure.compiledTask.template.interface || {}; - const description = task.shortDescription || "No description found."; + const description = task.shortDescription || 'No description found.'; return (
= ({ task }) => { }, { name: 'description', - content: {description} - } + content: {description}, + }, ]} />
diff --git a/packages/console/src/components/Workflow/useWorkflowInfoItem.ts b/packages/console/src/components/Workflow/useWorkflowInfoItem.ts index 57de75719..0f6e03df4 100644 --- a/packages/console/src/components/Workflow/useWorkflowInfoItem.ts +++ b/packages/console/src/components/Workflow/useWorkflowInfoItem.ts @@ -117,8 +117,11 @@ export const useWorkflowInfoItem = ({ const parsedOutputs = getOutputsForWorkflow(launchPlan); const outputs = parsedOutputs.length > 0 ? parsedOutputs.join(', ') : undefined; - const description = workflow?.shortDescription && workflow?.shortDescription.length > 0 ? workflow.shortDescription : undefined - return { id, inputs, outputs, description}; + const description = + workflow?.shortDescription && workflow?.shortDescription.length > 0 + ? workflow.shortDescription + : undefined; + return { id, inputs, outputs, description }; }, { staleTime: 1000 * 60 * 5, diff --git a/packages/console/src/components/WorkflowGraph/__stories__/WorkflowGraph.stories.tsx b/packages/console/src/components/WorkflowGraph/__stories__/WorkflowGraph.stories.tsx index 319983255..180247553 100644 --- a/packages/console/src/components/WorkflowGraph/__stories__/WorkflowGraph.stories.tsx +++ b/packages/console/src/components/WorkflowGraph/__stories__/WorkflowGraph.stories.tsx @@ -10,7 +10,7 @@ import { WorkflowGraph } from '../WorkflowGraph'; import graphData from './rich.json'; const graphDataClosure = graphData as unknown as CompiledWorkflowClosure; -const shortDescription = "" +const shortDescription = ''; const workflow: Workflow = { closure: { compiledWorkflow: graphDataClosure }, diff --git a/packages/console/src/components/common/DetailsPanel.tsx b/packages/console/src/components/common/DetailsPanel.tsx index 81d15e17f..398c9284b 100644 --- a/packages/console/src/components/common/DetailsPanel.tsx +++ b/packages/console/src/components/common/DetailsPanel.tsx @@ -43,6 +43,9 @@ export const DetailsPanel: React.FC = ({ ModalProps={{ className: styles.modal, hideBackdrop: true, + // This is needed to prevent the modal from stealing focus + // from other modals in the app + disableEnforceFocus: true, // Modal uses inline styling for the zIndex, so we have to // override it style: { zIndex: theme.zIndex.appBar - 2 }, diff --git a/packages/console/src/components/data/apiContext.ts b/packages/console/src/components/data/apiContext.ts index 6f2295ab3..c9a070a81 100644 --- a/packages/console/src/components/data/apiContext.ts +++ b/packages/console/src/components/data/apiContext.ts @@ -4,7 +4,7 @@ import * as LaunchAPI from 'models/Launch/api'; import * as ProjectAPI from 'models/Project/api'; import * as TaskAPI from 'models/Task/api'; import * as WorkflowAPI from 'models/Workflow/api'; -import * as DescriptionEntityAPI from 'models/DescriptionEntity/api' +import * as DescriptionEntityAPI from 'models/DescriptionEntity/api'; import * as React from 'react'; type APIFunctions = typeof CommonAPI & @@ -26,7 +26,7 @@ export const defaultAPIContextValue: APIContextValue = { ...ProjectAPI, ...TaskAPI, ...WorkflowAPI, - ...DescriptionEntityAPI + ...DescriptionEntityAPI, }; /** Exposes all of the model layer api functions for use by data fetching diff --git a/packages/console/src/components/hooks/useDescription.ts b/packages/console/src/components/hooks/useDescription.ts index cc74e737d..b23028c63 100644 --- a/packages/console/src/components/hooks/useDescription.ts +++ b/packages/console/src/components/hooks/useDescription.ts @@ -1,28 +1,32 @@ -import {Identifier, IdentifierScope, RequestConfig} from "../../models"; -import {useFetchableData} from "./useFetchableData"; -import {getDescriptionEntity, listDescriptionEntities} from "../../models/DescriptionEntity/api"; -import {DescriptionEntity} from "../../models/DescriptionEntity/types"; -import {FetchableData} from "./types"; -import {useAPIContext} from "../data/apiContext"; -import {usePagination} from "./usePagination"; - +import { Identifier, IdentifierScope, RequestConfig } from '../../models'; +import { useFetchableData } from './useFetchableData'; +import { DescriptionEntity } from '../../models/DescriptionEntity/types'; +import { FetchableData } from './types'; +import { useAPIContext } from '../data/apiContext'; +import { usePagination } from './usePagination'; /** A hook for fetching a description entity */ -export function useDescriptionEntity(id: Identifier): FetchableData { +export function useDescriptionEntity( + id: Identifier, +): FetchableData { const { getDescriptionEntity } = useAPIContext(); return useFetchableData( { useCache: true, debugName: 'DescriptionEntity', defaultValue: {} as DescriptionEntity, - doFetch: async descriptionEntityId => (await getDescriptionEntity(descriptionEntityId)) as DescriptionEntity, + doFetch: async descriptionEntityId => + (await getDescriptionEntity(descriptionEntityId)) as DescriptionEntity, }, id, ); } /** A hook for fetching a paginated list of description entities */ -export function useDescriptionEntityList(scope: IdentifierScope, config: RequestConfig) { +export function useDescriptionEntityList( + scope: IdentifierScope, + config: RequestConfig, +) { const { listDescriptionEntities } = useAPIContext(); return usePagination( { ...config, cacheItems: true, fetchArg: scope }, diff --git a/packages/console/src/models/DescriptionEntity/api.ts b/packages/console/src/models/DescriptionEntity/api.ts index 115753e71..23c3d1400 100644 --- a/packages/console/src/models/DescriptionEntity/api.ts +++ b/packages/console/src/models/DescriptionEntity/api.ts @@ -1,7 +1,5 @@ import { Admin } from '@flyteorg/flyteidl-types'; -import { - getAdminEntity, -} from 'models/AdminEntity/AdminEntity'; +import { getAdminEntity } from 'models/AdminEntity/AdminEntity'; import { defaultPaginationConfig } from 'models/AdminEntity/constants'; import { RequestConfig } from 'models/AdminEntity/types'; import { Identifier, IdentifierScope } from 'models/Common/types'; @@ -9,7 +7,10 @@ import { DescriptionEntity } from './types'; import { makeDescriptionPath, descriptionEntityListTransformer } from './utils'; /** Fetches a list of `DescriptionEntity` records matching the provided `scope` */ -export const listDescriptionEntities = (scope: IdentifierScope, config?: RequestConfig) => +export const listDescriptionEntities = ( + scope: IdentifierScope, + config?: RequestConfig, +) => getAdminEntity( { path: makeDescriptionPath(scope), diff --git a/packages/console/src/models/DescriptionEntity/types.ts b/packages/console/src/models/DescriptionEntity/types.ts index 14f013ec0..62a09a86c 100644 --- a/packages/console/src/models/DescriptionEntity/types.ts +++ b/packages/console/src/models/DescriptionEntity/types.ts @@ -1,18 +1,17 @@ import { Admin } from '@flyteorg/flyteidl-types'; import { Identifier } from 'models/Common/types'; - /** Optional link to source code used to define this entity */ export interface SourceCode extends Admin.ISourceCode { - link?: string + link?: string; } /** Full user description with formatting preserved */ export interface LongDescription extends Admin.IDescription { value: string; uri: string; - format: Admin.DescriptionFormat - iconLink?: string + format: Admin.DescriptionFormat; + iconLink?: string; } /* @@ -22,7 +21,7 @@ Documentation could provide insight into the algorithms, business use case, etc export interface DescriptionEntity extends Admin.IDescriptionEntity { id: Identifier; shortDescription: string; - longDescription: LongDescription - sourceCode?: SourceCode - tags?: string[] + longDescription: LongDescription; + sourceCode?: SourceCode; + tags?: string[]; } diff --git a/website/package.json b/website/package.json index a688fa1fc..71c65a075 100644 --- a/website/package.json +++ b/website/package.json @@ -37,7 +37,7 @@ }, "dependencies": { "@flyteorg/common": "^0.0.4", - "@flyteorg/console": "^0.0.27", + "@flyteorg/console": "^0.0.28", "long": "^4.0.0", "protobufjs": "~6.11.3", "react-ga4": "^1.4.1", diff --git a/yarn.lock b/yarn.lock index d4740dbe4..1359e8180 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2020,7 +2020,7 @@ __metadata: resolution: "@flyteconsole/client-app@workspace:website" dependencies: "@flyteorg/common": ^0.0.4 - "@flyteorg/console": ^0.0.27 + "@flyteorg/console": ^0.0.28 "@types/long": ^3.0.32 long: ^4.0.0 protobufjs: ~6.11.3 @@ -2059,7 +2059,7 @@ __metadata: languageName: unknown linkType: soft -"@flyteorg/console@^0.0.27, @flyteorg/console@workspace:packages/console": +"@flyteorg/console@^0.0.28, @flyteorg/console@workspace:packages/console": version: 0.0.0-use.local resolution: "@flyteorg/console@workspace:packages/console" dependencies: