Sidebar changes. FM Formik MUI stuff. Pods update wip.

packages/icicle-tapisui-extension/tsconfig.json

@@ -12,7 +12,7 @@
     "types": ["node"],
     "typeRoots": ["./types", "node_modules/@types"],
     "incremental": true,
-    "esModuleInterop": true, // required or pages won't import
+    "esModuleInterop": true // required or pages won't import
     // "baseUrl": "src",
     // "allowJs": true,
     // // "allowSyntheticDefaultImports": true,

packages/tapisui-api/src/pods/index.ts

@@ -13,6 +13,7 @@ export { default as detailsTemplates } from './detailsTemplates';
 
 export { default as logs } from './logs';
 export { default as makeNewPod } from './makeNewPod';
+export { default as updatePod } from './updatePod';
 export { default as deletePod } from './deletePod';
 export { default as startPod } from './startPod';
 export { default as restartPod } from './restartPod';

packages/tapisui-api/src/pods/updatePod.ts

@@ -0,0 +1,18 @@
+import { Pods } from '@tapis/tapis-typescript';
+import { apiGenerator, errorDecoder } from '../utils';
+
+const updatePod = (
+  reqUpdatePod: Pods.UpdatePodRequest,
+  basePath: string,
+  jwt: string
+): Promise<Pods.PodResponse> => {
+  const api: Pods.PodsApi = apiGenerator<Pods.PodsApi>(
+    Pods,
+    Pods.PodsApi,
+    basePath,
+    jwt
+  );
+  return errorDecoder<Pods.PodResponse>(() => api.updatePod(reqUpdatePod));
+};
+
+export default updatePod;

packages/tapisui-common/src/index.ts

@@ -47,6 +47,7 @@ import {
   NavItem,
 } from './wrappers';
 import { FieldWrapperFormik } from './ui-formik';
+import { FMTextField } from './ui-formik-mui';
 import {
   FormikInput,
   FormikSelect,
@@ -127,6 +128,7 @@ export {
   NavItem,
   // Formik UI
   FieldWrapperFormik,
+  FMTextField,
   FormikInput,
   FormikSelect,
   FormikCheck,

packages/tapisui-common/src/ui-formik-mui/FMTextField.tsx

@@ -0,0 +1,44 @@
+// FMTextField.tsx
+import React from 'react';
+import { TextField } from '@mui/material';
+import { FormikProps } from 'formik';
+
+interface FMTextFieldProps {
+  formik: FormikProps<any>;
+  name: string;
+  label: string;
+  description: string;
+  type?: string;
+  size?: 'small' | 'medium';
+}
+
+const FMTextField: React.FC<FMTextFieldProps> = ({
+  formik,
+  name,
+  label,
+  description,
+  type = 'text',
+  size = 'small',
+}) => {
+  return (
+    <TextField
+      fullWidth
+      id={name}
+      name={name}
+      label={label}
+      type={type}
+      value={formik.values[name]}
+      onChange={formik.handleChange}
+      onBlur={formik.handleBlur}
+      error={formik.touched[name] && Boolean(formik.errors[name])}
+      helperText={
+        formik.touched[name] && formik.errors[name]
+          ? String(formik.errors[name])
+          : description
+      }
+      size={size}
+    />
+  );
+};
+
+export default FMTextField;

packages/tapisui-common/src/ui-formik-mui/TextField.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TextField } from '@mui/material';
+import { useField } from 'formik';
+
+const FMTextField = ({}) => {};
+
+export default FMTextField;

packages/tapisui-common/src/ui-formik-mui/index.ts

@@ -0,0 +1,3 @@
+import FMTextField from './FMTextField';
+
+export { FMTextField };

packages/tapisui-common/src/ui/Breadcrumbs/breadcrumbsFromPathname.ts

@@ -3,7 +3,7 @@ import normalize from 'normalize-path';
 
 const breadcrumbsFromPathname = (pathname: string) => {
   const items: Array<BreadcrumbType> = [];
-  if (pathname.startsWith('/pods/images')) {
+  if (pathname.startsWith('/pods/images/')) {
     // special case - images urls can have slashes in them
     const image = pathname.replace('/pods/images/', '');
     console.log(image);

packages/tapisui-common/src/wrappers/Navbar/Navbar.module.scss

@@ -6,12 +6,13 @@ $core-portal-color-primary: #9d85ef;
   --min-width: 100%;
   list-style: none;
   flex-direction: column;
+  flex: 1;
 }
 
 .nav-link {
   min-width: var(--min-width);
   border: none;
-  padding: 0.5rem 1rem;
+  padding: 0.5rem 1.5rem;
   padding-left: var(--horizontal-buffer);
   color: #707070;
   cursor: pointer;
@@ -27,7 +28,7 @@ $core-portal-color-primary: #9d85ef;
 }
 
 .nav-text {
-  padding-left: 16px;
+  padding-left: 1rem;
   font-size: 0.75rem;
   font-weight: 500;
 }

packages/tapisui-common/src/wrappers/Navbar/Navbar.tsx

@@ -16,7 +16,9 @@ export const NavItem: React.FC<
       >
         <div className={styles['nav-content']}>
           {icon && <Icon name={icon} />}
-          <span className={styles['nav-text']}>{children}</span>
+          {children ? (
+            <span className={styles['nav-text']}>{children}</span>
+          ) : undefined}
         </div>
       </NavLink>
     );
@@ -25,7 +27,9 @@ export const NavItem: React.FC<
       <div className={styles['nav-link']}>
         <div className={styles['nav-content']}>
           {icon && <Icon name={icon} />}
-          <span className={styles['nav-text']}>{children}</span>
+          {children ? (
+            <span className={styles['nav-text']}>{children}</span>
+          ) : undefined}
         </div>
       </div>
     );

packages/tapisui-hooks/src/pods/index.ts

@@ -14,6 +14,7 @@ export { default as useDetailsTemplates } from './useDetailsTemplates';
 export { default as useLogs } from './useLogs';
 export { default as useGetPodSecrets } from './useGetPodSecrets';
 export { default as useMakeNewPod } from './useMakeNewPod';
+export { default as useUpdatePod } from './useUpdatePod';
 export { default as useDeletePod } from './useDeletePod';
 export { default as useStartPod } from './useStartPod';
 export { default as useRestartPod } from './useRestartPod';

packages/tapisui-hooks/src/pods/queryKeys.ts

@@ -11,6 +11,7 @@ const QueryKeys = {
   detailsImages: 'pods/detailsImages',
   detailsTemplates: 'pods/detailsTemplates',
   makeNewPod: 'pods/makeNewPod',
+  updatePod: 'pods/updatePod',
   deletePod: 'pods/deletePod',
   getLogs: 'pods/getPodLogs',
   startPod: 'pods/startPod',

packages/tapisui-hooks/src/pods/useDetails.ts

@@ -16,7 +16,18 @@ const useDetails = (
     // which is expected behavior for not having a token
     () => API.details(params, basePath, accessToken?.access_token ?? ''),
     {
+      // Disable automatic refetching on window focus, mount, and reconnect
+      refetchIntervalInBackground: false,
+      refetchInterval: false,
+      refetchOnWindowFocus: false,
+      refetchOnMount: false,
+      refetchOnReconnect: false,
+      // staleTime: 100000, // 30 seconds
+      // cacheTime: 10000,
+      // Keep the enabled option to control query activation based on accessToken presence
       enabled: !!accessToken,
+      // Spread any user-provided options to allow for customization
+      ...options,
     }
   );
   const invalidate = () => {

packages/tapisui-hooks/src/pods/useGetPodSecrets.ts

@@ -16,7 +16,18 @@ const useGetPodSecrets = (
     // which is expected behavior for not having a token
     () => API.getPodSecrets(params, basePath, accessToken?.access_token ?? ''),
     {
+      // Disable automatic refetching on window focus, mount, and reconnect
+      refetchIntervalInBackground: false,
+      refetchInterval: false,
+      refetchOnWindowFocus: false,
+      refetchOnMount: false,
+      refetchOnReconnect: false,
+      staleTime: 20000, // 20 seconds
+      cacheTime: 20000, // 20 seconds
+      // Keep the enabled option to control query activation based on accessToken presence
       enabled: !!accessToken,
+      // Spread any user-provided options to allow for customization
+      ...options,
     }
   );
 

packages/tapisui-hooks/src/pods/useLogs.ts

@@ -16,6 +16,15 @@ const useLogs = (
     // which is expected behavior for not having a token
     () => API.logs(params, basePath, accessToken?.access_token ?? ''),
     {
+      // Disable automatic refetching on window focus, mount, and reconnect
+      refetchIntervalInBackground: false,
+      refetchInterval: false,
+      refetchOnWindowFocus: false,
+      refetchOnMount: false,
+      refetchOnReconnect: false,
+      staleTime: 20000,
+      cacheTime: 20000,
+      // Keep the enabled option to control query activation based on accessToken presence
       enabled: !!accessToken,
     }
   );

packages/tapisui-hooks/src/pods/useUpdatePod.ts

@@ -0,0 +1,48 @@
+import { useEffect } from 'react';
+import { useMutation, MutateOptions } from 'react-query';
+import { Pods } from '@tapis/tapis-typescript';
+import { Pods as API } from '@tapis/tapisui-api';
+import { useTapisConfig } from '../context';
+import QueryKeys from './queryKeys';
+import { updatePod } from '@tapis/tapisui-api/dist/pods';
+
+type UpdatePodHookParams = {
+  updatePod: Pods.UpdatePod;
+};
+
+const useUpdatePod = (podId: string) => {
+  const { basePath, accessToken } = useTapisConfig();
+  const jwt = accessToken?.access_token || '';
+
+  // The useMutation react-query hook is used to call operations that make server-side changes
+  // (Other hooks would be used for data retrieval)
+  //
+  // In this case, mkdir helper is called to perform the operation
+  const { mutate, isLoading, isError, isSuccess, data, error, reset } =
+    useMutation<Pods.PodResponse, Error, Pods.UpdatePodRequest>(
+      [QueryKeys.updatePod, podId, basePath, jwt],
+      (updatePod) => API.updatePod(updatePod, basePath, jwt)
+    );
+
+  useEffect(() => reset(), [reset, podId]);
+
+  // Return hook object with loading states and login function
+  return {
+    isLoading,
+    isError,
+    isSuccess,
+    data,
+    error,
+    reset,
+    updatePod: (
+      updatePod: Pods.UpdatePod,
+      // react-query options to allow callbacks such as onSuccess
+      options?: MutateOptions<Pods.PodResponse, Error, UpdatePodHookParams>
+    ) => {
+      // Call mutate to trigger a single post-like API operation
+      return mutate({ updatePod, podId }, options);
+    },
+  };
+};
+
+export default useUpdatePod;