fix: content panel captures focus (#754)

* fix: content panel captures focus Signed-off-by: Carina Ursu <[email protected]> * chore: lint Signed-off-by: Carina Ursu <[email protected]> --------- Signed-off-by: Carina Ursu <[email protected]>
flyteorg · May 10, 2023 · 5caa0ab · 5caa0ab
1 parent e28a142
commit 5caa0ab
Show file tree

Hide file tree

Showing 12 changed files with 63 additions and 45 deletions.
diff --git 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
@@ -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<{
                   )}
             </span>
           </Row>
-          {hasLink && (<Row title={t('githubLink')}>
-            <span>
-              {hasLink
-                ?<a href={descriptionEntity?.sourceCode?.link} target="_blank" rel="noreferrer">{descriptionEntity?.sourceCode?.link}</a>
-                : t(
-                  patternKey('noGithubLink', entityStrings[id.resourceType]),
+          {hasLink && (
+            <Row title={t('githubLink')}>
+              <span>
+                {hasLink ? (
+                  <a
+                    href={descriptionEntity?.sourceCode?.link}
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    {descriptionEntity?.sourceCode?.link}
+                  </a>
+                ) : (
+                  t(patternKey('noGithubLink', entityStrings[id.resourceType]))
                 )}
-            </span>
-          </Row>)}
+              </span>
+            </Row>
+          )}
         </WaitForData>
         {sections?.descriptionInputsAndOutputs && <InputsAndOuputs id={id} />}
       </Typography>

diff --git 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<string, Variable> }> = ({
 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 (
     <div>
       <DetailsGroup
@@ -82,8 +82,8 @@ export const SimpleTaskInterface: React.FC<{ task: Task }> = ({ task }) => {
           },
           {
             name: 'description',
-            content: <span>{description}</span>
-          }
+            content: <span>{description}</span>,
+          },
         ]}
       />
     </div>

diff --git 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
@@ -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
@@ -43,6 +43,9 @@ export const DetailsPanel: React.FC<DetailsPanelProps> = ({
       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
@@ -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
@@ -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<DescriptionEntity> {
+export function useDescriptionEntity(
+  id: Identifier,
+): FetchableData<DescriptionEntity> {
   const { getDescriptionEntity } = useAPIContext();
   return useFetchableData<DescriptionEntity, Identifier>(
     {
       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<DescriptionEntity, IdentifierScope>(
     { ...config, cacheItems: true, fetchArg: scope },

diff --git a/packages/console/src/models/DescriptionEntity/api.ts b/packages/console/src/models/DescriptionEntity/api.ts
@@ -1,15 +1,16 @@
 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';
 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
@@ -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
@@ -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
@@ -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: