This repository was archived by the owner on Apr 18, 2023. It is now read-only.

settings: Add organization and user settings (PROJQUAY-4553) #171

Open

jonathankingfc wants to merge 19 commits into main from PROJQUAY-4553

package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

package.json

-Original file line number
+Diff line change
@@ Expand Up / @@ -19,6 +19,7 @@ @@
         "axios": "^0.27.2",
         "js-sha1": "^0.6.0",
         "mini-css-extract-plugin": "^2.6.1",
+        "moment": "^2.29.4",
         "null-loader": "^4.0.1",
         "react": "^17.0.2",
         "react-router-dom": "^6.3.0",
@@ Expand Down @@

src/components/modals/GenerateEncryptedPasswordModal.tsx

-Original file line number
+Diff line change
@@ -0,0 +1,81 @@
+    import {Modal, ModalVariant, Button, TextInput} from '@patternfly/react-core';
+    import {useState} from 'react';
+    import FormError from 'src/components/errors/FormError';
+    import {addDisplayError} from 'src/resources/ErrorHandling';
+    import {useCreateClientKey} from 'src/hooks/UseCreateClientKey';
+    export function GenerateEncryptedPassword(props: ConfirmationModalProps) {
+      const [err, setErr] = useState<string>();
+      const [password, setPassword] = useState('');
+      const [step, setStep] = useState(1);
+      const {createClientKey, clientKey} = useCreateClientKey({
+        onError: (error) => {
+          console.error(error);
+          setErr(addDisplayError('Error', error));
+        },
+        onSuccess: () => {
+          setStep(step + 1);
+        },
+      });
+      const handleModalConfirm = async () => {
+        createClientKey(password);
+      };
+      return (
+        <Modal
+          variant={ModalVariant.small}
+          title={props.title}
+          isOpen={props.modalOpen}
+          onClose={props.toggleModal}
+          actions={
+            step == 1
+              ? [
+                  <Button
+                    key="confirm"
+                    variant="primary"
+                    onClick={handleModalConfirm}
+                  >
+                    {props.buttonText}
+                  </Button>,
+                  <Button key="cancel" variant="link" onClick={props.toggleModal}>
+                    Cancel
+                  </Button>,
+                ]
+              : [
+                  <Button key="cancel" variant="link" onClick={props.toggleModal}>
+                    Done
+                  </Button>,
+                ]
+          }
+        >
+          {step == 1 && (
+            <>
+              <FormError message={err} setErr={setErr} />
+              <TextInput
+                id="delete-confirmation-input"
+                value={password}
+                type="password"
+                onChange={(value) => setPassword(value)}
+                aria-label="text input example"
+                label="Password"
+              />
+              Please enter your password in order to generate
+            </>
+          )}
+          {step == 2 && (
+            <>
+              Your encrypted password is: <br /> {clientKey}
+            </>
+          )}
+        </Modal>
+      );
+    }
+    type ConfirmationModalProps = {
+      title: string;
+      modalOpen: boolean;
+      buttonText: string;
+      toggleModal: () => void;
+    };

src/components/modals/UserConvertConflictsModal.tsx

-Original file line number
+Diff line change
@@ -0,0 +1,142 @@
+    import {
+      Button,
+      Modal,
+      ModalVariant,
+      PageSection,
+      PageSectionVariants,
+      TextInput,
+      Toolbar,
+      ToolbarContent,
+      ToolbarItem,
+    } from '@patternfly/react-core';
+    import {
+      TableComposable,
+      Tbody,
+      Td,
+      Th,
+      Thead,
+      Tr,
+    } from '@patternfly/react-table';
+    import {useState} from 'react';
+    import {ToolbarPagination} from 'src/components/toolbar/ToolbarPagination';
+    import {IOrganization} from 'src/resources/OrganizationResource';
+    export const UserConvertConflictsModal = (
+      props: UserConvertConflictsModal,
+    ): JSX.Element => {
+      const [itemsMarkedForDelete, setItemsMarkedForDelete] = useState<
+        IOrganization[]
+      >(props.items);
+      const [searchInput, setSearchInput] = useState<string>('');
+      const [bulkModalPerPage, setBulkModalPerPage] = useState<number>(10);
+      const [bulkModalPage, setBulkModalPage] = useState<number>(1);
+      const paginatedBulkItemsList = itemsMarkedForDelete.slice(
+        bulkModalPage * bulkModalPerPage - bulkModalPerPage,
+        bulkModalPage * bulkModalPerPage - bulkModalPerPage + bulkModalPerPage,
+      );
+      const onSearch = (value: string) => {
+        setSearchInput(value);
+        if (value === '') {
+          setItemsMarkedForDelete(props.items);
+        } else {
+          /* Note: This search filter assumes that the search is always based on the 1st column,
+             hence we do "colNames[0]" */
+          const filteredTableRow = props.items.filter((item) =>
+            item.name?.toLowerCase().includes(value.toLowerCase()),
+          );
+          setItemsMarkedForDelete(filteredTableRow);
+        }
+      };
+      return (
+        <Modal
+          title={`Change account type`}
+          id="bulk-delete-modal"
+          titleIconVariant="warning"
+          aria-label={`Change account type`}
+          variant={ModalVariant.medium}
+          isOpen={props.isModalOpen}
+          onClose={props.handleModalToggle}
+          actions={[
+            <Button
+              key="cancel"
+              id="delete-org-cancel"
+              variant="link"
+              onClick={props.handleModalToggle}
+            >
+              Close
+            </Button>,
+          ]}
+        >
+          <span>
+            This account cannot be converted into an organization, as it is a member
+            of another organization. Please leave the following organization(s)
+            first:
+          </span>
+          <PageSection variant={PageSectionVariants.light}>
+            <Toolbar>
+              <ToolbarContent>
+                <ToolbarItem>
+                  <TextInput
+                    isRequired
+                    type="search"
+                    id="modal-with-form-form-name"
+                    name="search input"
+                    placeholder="Search"
+                    iconVariant="search"
+                    value={searchInput}
+                    onChange={onSearch}
+                  />
+                </ToolbarItem>
+                <ToolbarPagination
+                  page={bulkModalPage}
+                  perPage={bulkModalPerPage}
+                  itemsList={props.items}
+                  setPage={setBulkModalPage}
+                  setPerPage={setBulkModalPerPage}
+                />
+              </ToolbarContent>
+            </Toolbar>
+            <TableComposable aria-label="Simple table" variant="compact">
+              <Thead>
+                <Tr>
+                  <Th>Organization</Th>
+                  <Th>Role</Th>
+                </Tr>
+              </Thead>
+              <Tbody>
+                {paginatedBulkItemsList.map((item, idx) => (
+                  <Tr key={idx}>
+                    <Td>{item.name}</Td>
+                    <Td>{item.is_org_admin ? 'Admin' : 'User'}</Td>
+                  </Tr>
+                ))}
+              </Tbody>
+            </TableComposable>
+            <Toolbar>
+              <ToolbarPagination
+                page={bulkModalPage}
+                perPage={bulkModalPerPage}
+                itemsList={props.items}
+                setPage={setBulkModalPage}
+                setPerPage={setBulkModalPerPage}
+                bottom={true}
+              />
+            </Toolbar>
+          </PageSection>
+        </Modal>
+      );
+    };
+    type UserConvertConflictsModal = {
+      mapOfColNamesToTableData: {
+        [key: string]: {label?: string; transformFunc?: (value) => any};
+      };
+      isModalOpen: boolean;
+      handleModalToggle?: () => void;
+      items: IOrganization[];
+    };

src/hooks/UseConvertAccount.ts

-Original file line number
+Diff line change
@@ -0,0 +1,30 @@
+    import {useMutation, useQueryClient} from '@tanstack/react-query';
+    import {convert, ConvertUserRequest} from 'src/resources/UserResource';
+    export function useConvertAccount({onSuccess, onError}) {
+      const queryClient = useQueryClient();
+      const convertAccountMutator = useMutation(
+        async ({adminUser, adminPassword}: ConvertUserRequest) => {
+          return convert({adminUser, adminPassword});
+        },
+        {
+          onSuccess: () => {
+            onSuccess();
+            queryClient.invalidateQueries(['user']);
+            queryClient.invalidateQueries(['organization']);
+          },
+          onError: (err) => {
+            onError(err);
+          },
+        },
+      );
+      return {
+        convert: async (convertUserRequest: ConvertUserRequest) =>
+          convertAccountMutator.mutate(convertUserRequest),
+        loading: convertAccountMutator.isLoading,
+        error: convertAccountMutator.error,
+        clientKey: convertAccountMutator.data,
+      };
+    }

src/hooks/UseCreateClientKey.ts

-Original file line number
+Diff line change
@@ -0,0 +1,30 @@
+    import {useMutation, useQueryClient} from '@tanstack/react-query';
+    import {createClientKey} from 'src/resources/UserResource';
+    export function useCreateClientKey({onSuccess, onError}) {
+      const queryClient = useQueryClient();
+      const createClientKeyMutator = useMutation(
+        async ({password}: {password: string}) => {
+          return createClientKey(password);
+        },
+        {
+          onSuccess: () => {
+            onSuccess();
+            queryClient.invalidateQueries(['user']);
+            queryClient.invalidateQueries(['organization']);
+          },
+          onError: (err) => {
+            onError(err);
+          },
+        },
+      );
+      return {
+        createClientKey: async (password: string) =>
+          createClientKeyMutator.mutate({password}),
+        loading: createClientKeyMutator.isLoading,
+        error: createClientKeyMutator.error,
+        clientKey: createClientKeyMutator.data,
+      };
+    }

src/hooks/UseOrganization.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -13,6 +13,7 @@ export function useOrganization(name: string) { @@
         data: organization,
         isLoading,
         error,
+        isPlaceholderData,
       } = useQuery(['organization', name], ({signal}) => fetchOrg(name, signal), {
         enabled: !isUserOrganization,
         placeholderData: (): IOrganization[] => new Array(10).fill({}),
@@ Expand All / @@ -21,7 +22,7 @@ export function useOrganization(name: string) { @@
       return {
         isUserOrganization,
         error,
-        loading: isLoading,
+        loading: isLoading || isPlaceholderData,
         organization,
       };
     }

src/hooks/UsePlan.ts

-Original file line number
+Diff line change
@@ -0,0 +1,24 @@
+    import {fetchPlan} from 'src/resources/PlanResource';
+    import {useQuery} from '@tanstack/react-query';
+    import {useOrganization} from './UseOrganization';
+    export function usePlan(name: string) {
+      // Get usernames
+      const {isUserOrganization} = useOrganization(name);
+      // Get organization plan
+      const {
+        data: plan,
+        isLoading,
+        error,
+        isPlaceholderData,
+      } = useQuery(['organization', name, 'plan'], () => {
+        return fetchPlan(name, isUserOrganization);
+      });
+      return {
+        error,
+        loading: isLoading || isPlaceholderData,
+        plan,
+      };
+    }

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

settings: Add organization and user settings (PROJQUAY-4553) #171

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

harishsurf Jan 31, 2023

Uh oh!

Uh oh!

settings: Add organization and user settings (PROJQUAY-4553) #171

Are you sure you want to change the base?

Uh oh!

settings: Add organization and user settings (PROJQUAY-4553) #171

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

harishsurf Jan 31, 2023

Choose a reason for hiding this comment

Uh oh!

Uh oh!