image-builder-frontend/src/Components/CreateImageWizard/steps/Packages/components/NoResultsFound.tsx at 0b31ddb7cd67f6f95cc48a0db332ed95e1a4c961 · osbuild/image-builder-frontend · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import React from 'react';

import {
  Bullseye,
  Button,
  EmptyState,
  EmptyStateActions,
  EmptyStateBody,
  EmptyStateFooter,
  EmptyStateVariant,
} from '@patternfly/react-core';
import { ExternalLinkAltIcon, SearchIcon } from '@patternfly/react-icons';
import { Tbody, Td, Tr } from '@patternfly/react-table';

import { CONTENT_URL } from '../../../../../constants';
import { Repos } from '../packagesTypes';

type NoResultsFoundProps = {
  isOnPremise: boolean;
  activeTabKey: Repos;
  setActiveTabKey: (value: Repos) => void;
};

const NoResultsFound = ({
  isOnPremise,
  activeTabKey,
  setActiveTabKey,
}: NoResultsFoundProps) => {
  if (activeTabKey === Repos.INCLUDED) {
    return (
      <Tbody>
        <Tr>
          <Td colSpan={5}>
            <Bullseye>
              <EmptyState
                headingLevel='h4'
                titleText='No results found'
                icon={SearchIcon}
                variant={EmptyStateVariant.sm}
              >
                {!isOnPremise && (
                  <EmptyStateBody>
                    Adjust your search and try again, or search in other
                    repositories (your repositories and popular repositories).
                  </EmptyStateBody>
                )}
                {isOnPremise && (
                  <EmptyStateBody>
                    Adjust your search and try again.
                  </EmptyStateBody>
                )}
                <EmptyStateFooter>
                  <EmptyStateActions>
                    {!isOnPremise && (
                      <Button
                        variant='primary'
                        onClick={() => setActiveTabKey(Repos.OTHER)}
                      >
                        Search other repositories
                      </Button>
                    )}
                  </EmptyStateActions>
                  {!isOnPremise && (
                    <EmptyStateActions>
                      <Button
                        className='pf-v6-u-pt-md'
                        variant='link'
                        isInline
                        component='a'
                        target='_blank'
                        iconPosition='right'
                        icon={<ExternalLinkAltIcon />}
                        href={CONTENT_URL}
                      >
                        Manage your repositories and popular repositories
                      </Button>
                    </EmptyStateActions>
                  )}
                </EmptyStateFooter>
              </EmptyState>
            </Bullseye>
          </Td>
        </Tr>
      </Tbody>
    );
  } else {
    return (
      <Tbody>
        <Tr>
          <Td colSpan={5}>
            <Bullseye>
              <EmptyState
                headingLevel='h4'
                titleText='No results found'
                icon={SearchIcon}
                variant={EmptyStateVariant.sm}
              >
                <EmptyStateBody>
                  No packages found in known repositories. If you know of a
                  repository containing this packages, add it to{' '}
                  <Button
                    variant='link'
                    isInline
                    component='a'
                    target='_blank'
                    href={CONTENT_URL}
                  >
                    your repositories
                  </Button>{' '}
                  and try searching for it again.
                </EmptyStateBody>
              </EmptyState>
            </Bullseye>
          </Td>
        </Tr>
      </Tbody>
    );
  }
};

export default NoResultsFound;