Update UI for Public Sharing

jhub_apps/templates/style.css

@@ -101,6 +101,10 @@ label {
     outline-color: var(--primary-color) !important;
 }
 
+.toggle-body-on {
+    background-color: var(--primary-color) !important;
+}
+
 a {
     color: var(--link-text-color);
     text-decoration: underline;

ui/src/components/index.ts

@@ -12,3 +12,4 @@ export type { SelectOption } from './select/select';
 export { default as Tag } from './tag/tag';
 export { default as TextArea } from './text-area/text-area';
 export { default as TextInput } from './text-input/text-input';
+export { default as Toggle } from './toggle/toggle';

ui/src/components/toggle/toggle.test.tsx

@@ -0,0 +1,30 @@
+import '@testing-library/jest-dom';
+import { act, fireEvent, render } from '@testing-library/react';
+import { Toggle } from './toggle';
+
+describe('Toggle', () => {
+  test('renders a default toggle successfully', () => {
+    const { baseElement } = render(<Toggle id="default-toggle" />);
+    const input = baseElement.querySelector('input');
+
+    expect(input).toBeInTheDocument();
+  });
+
+  test('renders a toggle with label', () => {
+    const { baseElement } = render(<Toggle id="label-toggle" label="label" />);
+    const label = baseElement.querySelector('label');
+
+    expect(label).toBeInTheDocument();
+  });
+
+  test('fires event callback when changed', async () => {
+    const { baseElement } = render(<Toggle id="clickable-toggle" />);
+    const input = baseElement.querySelector('input') as HTMLInputElement;
+    const body = baseElement.querySelector('.toggle-body') as HTMLInputElement;
+    expect(body).not.toHaveClass('btn-primary');
+
+    await act(async () => {
+      fireEvent.click(input);
+    });
+  });
+});

ui/src/components/toggle/toggle.tsx

@@ -0,0 +1,74 @@
+import { ChangeEvent, ChangeEventHandler, useEffect, useState } from 'react';
+
+export interface ToggleProps {
+  /**
+   * The unique identifier for this component
+   */
+  id: string;
+  /**
+   * The name of the text input
+   */
+  name?: string;
+  /**
+   * Whether the toggle is checked or not
+   */
+  checked?: boolean;
+  /**
+   * A label to display with the toggle
+   */
+  label?: string;
+  /**
+   * Custom callback for when input is changed
+   */
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+}
+
+export const Toggle = ({
+  id,
+  name,
+  checked = false,
+  label,
+  onChange,
+}: ToggleProps) => {
+  const [isChecked, setIsChecked] = useState(false);
+  const toggleHandler = (event: ChangeEvent<HTMLInputElement>) => {
+    setIsChecked(!isChecked);
+    if (onChange) {
+      onChange(event);
+    }
+  };
+
+  useEffect(() => {
+    setIsChecked(checked);
+  }, [checked]);
+
+  return (
+    <div className="toggle flex items-center">
+      <label htmlFor={id} className="flex items-center cursor-pointer">
+        <div className="relative">
+          <input
+            type="checkbox"
+            id={id}
+            name={name}
+            className="sr-only"
+            checked={isChecked}
+            onChange={toggleHandler}
+          />
+          <div
+            className={`toggle-body w-12 h-6 rounded-full shadow-inner ${
+              isChecked ? 'toggle-body-on' : ''
+            }`}
+          ></div>
+          <div
+            className={`toggle-dot absolute w-6 h-6 rounded-full shadow inset-y-0 left-0 ${
+              isChecked ? 'ml-6' : 'ml-0'
+            }`}
+          ></div>
+        </div>
+        {label && <span className="toggle-label ml-3">{label}</span>}
+      </label>
+    </div>
+  );
+};
+
+export default Toggle;

ui/src/data/api.ts

@@ -38,6 +38,7 @@ export const app: AppQueryGetProps = {
     custom_command: '',
     conda_env: '',
     profile: '',
+    public: false,
   },
   progress_url: '',
   state: {},

ui/src/data/jupyterhub.ts

@@ -90,6 +90,7 @@ export const apps: JhApp[] = [
     url: '/hub/app1',
     shared: false,
     ready: true,
+    public: true,
   },
   {
     id: '2',
@@ -102,6 +103,7 @@ export const apps: JhApp[] = [
     url: '/hub/app2',
     shared: false,
     ready: false,
+    public: false,
   },
   {
     id: '3',
@@ -112,6 +114,7 @@ export const apps: JhApp[] = [
     url: '/hub/app3',
     shared: false,
     ready: false,
+    public: false,
   },
   {
     id: '4',
@@ -122,6 +125,7 @@ export const apps: JhApp[] = [
     url: '/hub/app4',
     shared: false,
     ready: false,
+    public: false,
   },
   {
     id: '5',
@@ -132,6 +136,7 @@ export const apps: JhApp[] = [
     url: '/hub/app5',
     shared: false,
     ready: false,
+    public: false,
   },
   {
     id: '6',
@@ -142,6 +147,7 @@ export const apps: JhApp[] = [
     url: '/hub/app6',
     shared: true,
     ready: false,
+    public: false,
   },
 ];
 

ui/src/index.css

@@ -119,6 +119,27 @@
     min-height: 6rem;
   }
 
+  .toggle {
+    margin-top: 0.5rem;
+  }
+
+  .toggle-dot {
+    background-color: theme('colors.white');
+    border: 1px solid theme('colors.gray-lighter');
+  }
+
+  .toggle-body {
+    background-color: theme('colors.gray-lighter');
+  }
+
+  .toggle-body-on {
+    background-color: #c316e9;
+  }
+
+  .toggle-label {
+    color: theme('colors.text-dark');
+  }
+
   .text-red {
     color: theme('colors.error');
   }

ui/src/pages/home/app-card/app-card.tsx

@@ -21,6 +21,7 @@ interface AppCardProps {
   thumbnail?: string;
   url: string;
   ready?: boolean;
+  isPublic?: boolean;
 }
 
 export const AppCard = ({
@@ -30,6 +31,7 @@ export const AppCard = ({
   thumbnail,
   framework,
   url,
+  isPublic = false,
 }: AppCardProps): React.ReactElement => {
   const queryClient = useQueryClient();
   const [submitting, setSubmitting] = useState(false);
@@ -149,6 +151,11 @@ export const AppCard = ({
       </div>
       <div className="card-footer">
         <Tag id={`tag-${id}`}>{framework}</Tag>
+        {isPublic ? (
+          <Tag id={`tag-${id}`} className="ml-2 bg-warning-light">
+            Public
+          </Tag>
+        ) : undefined}
       </div>
     </div>
   );

ui/src/pages/home/app-form/app-form.tsx

@@ -22,6 +22,7 @@ import {
   Select,
   TextArea,
   TextInput,
+  Toggle,
 } from '../../../components';
 import { currentNotification } from '../../../store';
 
@@ -43,6 +44,7 @@ export const AppForm = ({
   );
   const [name, setName] = useState('');
   const [currentFile, setCurrentFile] = useState<File>();
+  const [isPublic, setIsPublic] = useState(false);
   // Get the app data if we're editing an existing app
   const { data: formData, error: formError } = useQuery<
     AppQueryGetProps,
@@ -99,6 +101,7 @@ export const AppForm = ({
       conda_env: '',
       custom_command: '',
       profile: '',
+      is_public: false,
     },
   });
   const currentFramework = watch('framework');
@@ -126,6 +129,7 @@ export const AppForm = ({
         conda_env: conda_env || '',
         custom_command: custom_command || '',
         profile: profile || '',
+        public: isPublic,
       },
     };
 
@@ -216,6 +220,7 @@ export const AppForm = ({
     if (formData?.name && formData?.user_options) {
       setName(formData.name);
       reset({ ...formData.user_options });
+      setIsPublic(formData.user_options.public);
     }
   }, [formData?.name, formData?.user_options, reset]);
 
@@ -424,6 +429,24 @@ export const AppForm = ({
       ) : (
         <></>
       )}
+      <FormGroup>
+        <Label htmlFor="is_public">Allow Public Access</Label>
+        <Controller
+          name="is_public"
+          control={control}
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          render={({ field: { ref: _, value, onChange, ...field } }) => (
+            <Toggle
+              {...field}
+              id="is_public"
+              checked={isPublic}
+              onChange={() => {
+                setIsPublic(!isPublic);
+              }}
+            />
+          )}
+        />
+      </FormGroup>
       <ButtonGroup>
         <Button
           id="cancel-btn"

ui/src/pages/home/apps-grid/apps-grid.tsx

@@ -88,6 +88,7 @@ export const AppsGrid = ({
                 framework={app.framework}
                 url={app.url}
                 ready={app.ready}
+                isPublic={app.public}
               />
             ))}
           </div>

ui/src/types/api.ts

@@ -8,6 +8,7 @@ export interface UserOptions {
   custom_command: string;
   conda_env: string;
   profile: string;
+  public: boolean;
 }
 
 export interface AppQueryUpdateProps {

ui/src/types/form.ts

@@ -13,4 +13,5 @@ export interface AppFormInput {
   conda_env?: string;
   custom_command?: string;
   profile?: string;
+  is_public: boolean;
 }

ui/src/types/jupyterhub.ts

@@ -17,6 +17,7 @@ export interface JhApp {
   thumbnail?: string;
   shared: boolean;
   ready: boolean;
+  public: boolean;
 }
 
 export interface JhService {

ui/src/utils/jupyterhub.ts

@@ -39,6 +39,7 @@ export const getApps = (servers: any, appType: string) => {
           thumbnail: app.thumbnail,
           shared: false,
           ready: app.ready,
+          public: app.public,
         });
       }
     }

ui/tailwind.config.js

@@ -29,7 +29,7 @@ export default {
       success: '#00a91c',
       'success-light': '#ecf3ec',
       warning: '#ffbe2e',
-      'warning-light': '#faf3d1',
+      'warning-light': '#fde68a',
       error: '#d54309',
       'error-light': '#f4e3db',
       info: '#00bde3',

ui/vite.config.ts

@@ -81,8 +81,9 @@ export default defineConfig({
                 filepath: '',
                 framework: 'panel',
                 custom_command: '',
-                conda_env: '',
-                profile: '',
+                conda_env: 'env1',
+                profile: 'Small Instance',
+                public: true,
               },
               progress_url: '',
               state: {},
@@ -109,6 +110,7 @@ export default defineConfig({
                     'https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg',
                   framework: 'Panel',
                   ready: true,
+                  public: true,
                 },
               },
               'test-app-2': {
@@ -124,6 +126,7 @@ export default defineConfig({
                     'https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg',
                   framework: 'Streamlit',
                   ready: false,
+                  public: false,
                 },
               },
               'test-app-3': {
@@ -138,6 +141,7 @@ export default defineConfig({
                   imgUrl: null,
                   framework: 'JupyterLab',
                   ready: false,
+                  public: false,
                 },
               },
               'test-app-4': {
@@ -151,6 +155,7 @@ export default defineConfig({
                   imgUrl: null,
                   framework: 'Streamlit',
                   ready: false,
+                  public: false,
                 },
               },
             }),